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

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
CSSソースの中に埋め込まれた画像
CSSソースの中に埋め込まれた画像
複数の画像を結合した「大きな画像」を作り、CSSで必要な箇所だけ切り抜いて表示する方法「CSS Sprite」
複数の画像を結合した「大きな画像」を作り、CSSで必要な箇所だけ切り抜いて表示する方法「CSS Sprite」
ファイルの個数だけ通信回数が必要になる
ファイルの個数だけ通信回数が必要になる
画像がCSS内に埋め込まれていれば、1回の通信で画像も受け取れる
画像がCSS内に埋め込まれていれば、1回の通信で画像も受け取れる
画像をBase64でエンコードしてくれるウェブ上のサービス例
画像をBase64でエンコードしてくれるウェブ上のサービス例
画像をBase64でエンコードした結果
画像をBase64でエンコードした結果
任意のファイルをBase64でエンコードできるフリーソフト「BMASE64」
任意のファイルをBase64でエンコードできるフリーソフト「BMASE64」
サンプルページ
サンプルページ
CSSソースの中に画像を埋め込む
CSSソースの中に画像を埋め込む
この写真の記事を読む
CSSソースの中に埋め込まれた画像
複数の画像を結合した「大きな画像」を作り、CSSで必要な箇所だけ切り抜いて表示する方法「CSS Sprite」
ファイルの個数だけ通信回数が必要になる
画像がCSS内に埋め込まれていれば、1回の通信で画像も受け取れる
画像をBase64でエンコードしてくれるウェブ上のサービス例
画像をBase64でエンコードした結果
任意のファイルをBase64でエンコードできるフリーソフト「BMASE64」
サンプルページ
CSSソースの中に画像を埋め込む
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます