ウェブページの読み込み高速化に効果的「CSSスプライト」について
最終更新日: Update!!
今回はサイトの読み込み高速化に効果的なCSSスプライトと呼ばれるテクニックを紹介します。CSSスプライト自体は結構前から有名な技術で今更ではありますが、スマートフォンサイトや高解像度ディスプレイの対応にも便利ですので、ウェブフォントのアイコンなども登場しているとはいえ、まだまだ使える場所は多いです。
【 3. background-imageで要素の背景画像として設定する 】
先ほど作成したCSSスプライト画像を、各要素の背景画像として設定します。
要素の背景画像として表示させるCSSスプライトについて
CSSスプライトとは、サイト内で使用する画像を一つにまとめて画像としてでは無く、要素の背景画像として表示することによりデータのリクエスト回数を減らすテクニックを指します。そうすることでサイトの読み込みがスムーズになるという効果があります。 一般的なサイトではグローバルナビゲーションのメニューボタン部分や、各所に設置される小さなアイコンなどに使われていることが多いようです。使う画像の数が多く大きさが揃っている場合や、パターンが決まっている場合などはCSSスプライトに向いています。CSSスプライトで画像を配置する
では実際にCSSスプライトで画像を設置する方法を説明していきます。次のような順序で進めていきます。- 1. 画像を設定する要素のHTMLを作成する
- 2. 各画像を一つにまとめたCSSスプライト用の画像を作成します。
- 3. HTMLの要素へ背景画像(background-image)として設定します。
- 4. 背景画像位置(background-position)を目的の画像が表示されるよう調整します。
- 5. 画像置換でテキストが表示されないように調整します。
<ul class="global_navi"> <li class="navi_01"><a href="page_01.html">ナビゲーション1</a></li> <li class="navi_02"><a href="page_02.html">ナビゲーション2</a></li> <li class="navi_03"><a href="page_03.html">ナビゲーション3</a></li> <li class="navi_04"><a href="page_04.html">ナビゲーション4</a></li> <li class="navi_05"><a href="page_05.html">ナビゲーション5</a></li> </ul>【 2. CSSスプライト用の画像作成 】 次に使用する複数の画像をまとめたCSSスプライト用の画像を作成します。この時に各画像の横(x)と縦(y)座標をあらかじめ決めておくと後でラクに設定できます。デザイン制作ソフト(Adobe fireworksなど)ではCSSスプライト用のCSSを出力してくれる機能もあるので有効に使えます。

ul.global_navi li a { background-image: url(images/css_sprite.jpg); width: 120px; height: 60px; display: block; }【 4. background-positionで表示領域を設定する 】 先ほどbackground-imageで設定した背景画像ですが、各要素に合わせてbackground-positionで表示させる領域を指定します。横方向(x座標)と縦方向(y座標)の数値を設定します。

ul.global_navi li.navi_01 a { background-position: 0; } ul.global_navi li.navi_01 a:hover { background-position: 60px 0; } ul.global_navi li.navi_02 a { background-position: 0 -120px; } ul.global_navi li.navi_02 a:hover { background-position: 60px -120px; } …【 5. 画像置換でテキストを表示させなくする 】 背景画像が各要素に合わせて指定されましたが、テキストが表示され画像と重なっているので、CSSを使ってテキストを表示させないように設定します。この時にテキストを非表示にするような形で消してしまうとクローラーに隠しテキストなどでペナルティを受ける可能性があります。一般的には次のような方法でテキストの表示を調整します。
ul.global_navi li a { // text-indentを使って要素の外へ出す text-indent: 100%; // white-spaceを使って改行を禁止する white-space: 100%; // overflowを使ってはみ出した部分を非表示にする overflow: hidden; background-image: url(images/css_sprite.jpg); width: 120px; height: 60px; display: block; }
CSSスプライトの注意点
ページ読み込みにおいては効果的なテクニックですが幾つか注意点があります。 ・CSSスプライト画像を編集する場合は座標に注意する → 各座標で示された表示域が崩れないように ・画像サイズが大きくならないようにする → 効率よく画像を表示させるためのテクニックですが、画像自体のファイルが大きくなってしまっては意味がありません スマートフォンでサイトを閲覧する場面も多くなってきましたので、効率良くサイトを表示させることはとても重要です。webフォントと併用してみてはいかがでしょうか。sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories