この写真の記事へ

小さな画像をCSSソースに直接(Base64で)埋め込む方法(画像)(2ページ目)

西村 文宏

執筆者：西村 文宏

ホームページ作成ガイド

複数の画像を結合した「大きな画像」を作り、CSSで必要な箇所だけ切り抜いて表示する方法「CSS Sprite」

複数の画像を結合した「大きな画像」を作り、CSSで必要な箇所だけ切り抜いて表示する方法「CSS Sprite」

この写真の記事へ
CSSソースの中に埋め込まれた画像
複数の画像を結合した「大きな画像」を作り、CSSで必要な箇所だけ切り抜いて表示する方法「CSS Sprite」
ファイルの個数だけ通信回数が必要になる
画像がCSS内に埋め込まれていれば、1回の通信で画像も受け取れる
画像をBase64でエンコードしてくれるウェブ上のサービス例
画像をBase64でエンコードした結果
任意のファイルをBase64でエンコードできるフリーソフト「BMASE64」
サンプルページ
CSSソースの中に画像を埋め込む

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる