CSSスプライトの使い方

CSSスプライトとは

簡単に言うと、サイトで使用するボタンや背景画像などの部品を、
ひとつの画像にまとめてしまう技法です。
ひとつの画像にして、使用する要素ごとに、
どの位置のどの範囲を表示するかをスタイルシートで指定します。
CSSスプライトを使うと、画像の数だけサーバへのレスポンスが
発生していたのが、1回ですむようになり、結果として
ページの描画が早くなる効果があります。
また、画像ファイルが1枚になるので、メンテナンスもしやすくなります。
実例を挙げると、jQuery UI が、複数のアイコンを1枚のPNGファイルで扱っています。

素材の準備

使用するファイルがPNG(透明)の場合、Fireworksでは下記の設定で出力しています。
・PNG8
・透明
・256色
・ディザにチェック　100%

HTMLの構造

メニュー要素にCSSスプライトを使うサンプルです。
アンカータグに個別のクラスをつけておきます。

CSS

(1) divタグでメニュー全体の大きさとマージンを設定

(2) liタグはフロート寄せと、テキストの追い出しを設定

(3) アンカータグでは以下の（共通）要素を設定
①display:block、　cursor: pointer;

②高さ、背景画像、リピートなし

※画像が上下に並んで保存されている場合
マウス通常時とオーバー時とでは、「縦の位置のみが異なる」ように、
また、通常時とオーバー時の「縦の位置」は、すべてのLIで等しくなるように
CSSのプロパティを設定します。
↓
（例）
通常時： background-position: 0px(横) -3px(縦);
オーバー時： background-position: 0px(横) -58px(縦);

(4) 「a.クラス名」に幅と通常の画像の位置を指定
(5) 「a.クラス名:hover」にマウスオーバー時の画像の位置を指定

実コード