今回はサイトの読み込み高速化に効果的なCSSスプライトと呼ばれるテクニックを紹介します。CSSスプライト自体は結構前から有名な技術で今更ではありますが、スマートフォンサイトや高解像度ディスプレイの対応にも便利ですので、ウェブフォントのアイコンなども登場しているとはいえ、まだまだ使える場所は多いです。  

要素の背景画像として表示させるCSSスプライトについて

CSSスプライトとは、サイト内で使用する画像を一つにまとめて画像としてでは無く、要素の背景画像として表示することによりデータのリクエスト回数を減らすテクニックを指します。そうすることでサイトの読み込みがスムーズになるという効果があります。   一般的なサイトではグローバルナビゲーションのメニューボタン部分や、各所に設置される小さなアイコンなどに使われていることが多いようです。使う画像の数が多く大きさが揃っている場合や、パターンが決まっている場合などはCSSスプライトに向いています。  

CSSスプライトで画像を配置する

では実際にCSSスプライトで画像を設置する方法を説明していきます。次のような順序で進めていきます。  

1. 1.　画像を設定する要素のHTMLを作成する
2. 2.　各画像を一つにまとめたCSSスプライト用の画像を作成します。
3. 3.　HTMLの要素へ背景画像（background-image）として設定します。
4. 4.　背景画像位置（background-position）を目的の画像が表示されるよう調整します。
5. 5.　画像置換でテキストが表示されないように調整します。

  少し面倒ですが、画像さえ用意すればCSSで設定できるのでHTMLのソースがすっきりします。では順番に沿って詳しく説明していきます。   【　1.　HTMLを作成　】 まずは画像をしているする要素をHTMLで作成します。ここではCSSスプライトがよく使われる例として、グローバルナビゲーションをサンプルに挙げています。

<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を出力してくれる機能もあるので有効に使えます。   【　3.　background-imageで要素の背景画像として設定する　】 先ほど作成した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フォントと併用してみてはいかがでしょうか。