ゼロから学ぶ「CSS Sprite」

Yahoo! JAPANの制作チームによる、さまざまなWebサイト最適化手法 第1回

CSS Spriteの手順詳細

1. 複数の画像をひとまとめにしてSprite画像を作成します。今回は「New!アイコン」と「カメラアイコン」を使用して説明します。


　文字サイズ拡大時に見切れないようするためにも、縦に並べる方が使い勝手がよいです。画像を横に繰り返して表示させたい場合にも対応がしやすいです。例外として横に並べた方がよい場合もありますが、ここでは言及しません。

※注意

　この複数の画像をひとまとめにする作業はツールを用いて省略することも可能です。画像編集ソフトを持っていない方や、手軽にSprite画像を作成したい方は後に説明する「Sprite画像作成補助ツール」の項を見てください。

2. 作成した画像を保存します。このときの画像フォーマットを何にするべきか考えると思いますがPNGがお勧めです。減色などを行ったときに圧縮率がよく、GIFよりも綺麗に書き出しを行えることが多いためです。

　しかし、IE6をサポートブラウザとして含んでいる場合、半透過のPNGを用いると透過部分が灰色として表示されてしまうので注意してください。IE6でも半透過の処理を施したい場合は、IE独自のCSSプロパティであるfilterを用いて表示することが可能になります。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sprite.png');

3. できあがった縦並びのSprite画像を用いてHTMLとCSSを記述し、表示を調整します。まずはNEW！アイコンを表示させます。

<style type="text/css">
.sprite{
/* スプライト画像を読み込む */
background-image:url(sprite_img.png);
/* 画像の繰り返しを設定する */
background-repeat:no-repeat;
/* 表示位置を調整する */
background-position:0 5px;
/* 画像を表示する分のpaddingを設定する */
padding-left:30px;
}
</style>
<p class="sprite"><a href="#">Yahoo! JAPANのサンプル</a></p>


4. カメラアイコンを表示させたい時には、「background-position」の値を調整すれば表示させることができます。 background-positionは「background-position:x y;」という様にx軸の値、y軸の値を入れることで位置をずらせます。下の例ですと、画像を上側に34px移動させて表示させる、といった意味になります。

<style type="text/css">
.sprite{
/*スプライト画像を読み込む */
background-image:url(sprite_img.png);
/* 画像の繰り返しを設定する */
background-repeat:no-repeat;
/* 【カメラアイコンが表示される】表示位置を調整する */
background-position:0 -34px;
/* 画像を表示する分のpaddingを設定する */
padding-left:30px;
}
</style>
<p class="sprite"><a href="#">Yahoo! JAPANのサンプル</a></p>