HTML Base64エンコードで画像を表示 画像をテキストデータに変換してimgタグで表示させるサンプルです。 普通のimgタグでPNG画像を掲載する場合 [[<img src="/img/article/294/2020-04-18-181228.png">]] これはサーバにアップされた画像... 2020-04-18 18:12:02
HTML 背景に動画を流す HTMLとCSSでコンテンツの背景に動画を再生するサンプルです。 最近インターネット回線も早くなり、動画を背景にするサイトも増えてきました。 自分の場合、だいたい4Gで調子が良くて1秒間50MBくらいな体感なので、つまり... 2020-04-05 23:38:44
HTML コンテンツの表示・非表示 HTML5から追加されたタグでJavaScriptを使わないでコンテンツの表示・非表示を実装するサンプルです。 クリックすると隠れている要素を表示させるJSはよく実装します。 よくアコーディオンと呼ばれるUIですが、HTMLだけでも表現することが可能です。 なにも装... 2020-03-10 07:10:08
HTML 縦書きのふりがな 文字を縦書きにしたとき、ふりがな(ルビ)をつけるサンプルです。 ウェブでは主に文字は横書きが主流です。 横書きのときのふりがなのコーディングは別ページに記載しています。 猫ねこ を... 2020-01-05 22:07:04
HTML 横書きのふりがな 文字の上にふりがな(ルビ)を付けたいときに使えるrubyタグのサンプルです。 漢字の読み方を記述するときにふりがなを使います。 HTMLではふりがな用のタグが用意されてます。 ふりがなは概ねのブラウザで横書きの上に配置されます。... 2019-12-28 23:05:25
OGPタグ 記事をシェアする時のOGPタグについてのメモ書きです。 サイト作成する際にページがシェアされることを想定します。 その際、ページの情報を要約を指定してあげたいときに使うのがOGPタグです。 呼ばれ方は「OG... 2019-10-29 16:02:04
HTML 幅やズームのviewportの設定 viewportの設定のデバイスに対してコンテンツの幅やズーム操作をどう扱うか設定をするサンプルです。 HTMLのmeta情報にviewportというコンテンツをデバイスに対してどう扱うか設定する機能があります。 [[<meta name="viewport" content="wid... 2019-10-29 15:35:35
HTML5 ダウンロードボタン HTML5であればaタグに、download属性を書くだけでダウンロードボタンが作れます。 下記の画像をダウンロードしたいとき、右クリックで保存するのが一般的ですが、サイトの都合によってボタンを押したときにダウンロードが始まるようにしたい場合... 2019-07-28 04:49:43
HTML5 フォームの知っておきたい便利機能 HTML5からformのinputタグのtype属性に便利な設定が増えているので、一部紹介していきます。 よく使うタグは「type=」はtextやhiddenやcheckboxやradio、そ... 2019-08-07 16:30:10
HTML5 ローカルストレージ ローカルストレージを使ってブラウザにデータを保存します。 ほとんどのメジャーブラウザは対応していますが容量が5MBか10MBと違いがあります。 なので5MB... 2019-08-07 00:13:30