画像スプライト

画像スプライトは、1つの画像にまとめられた画像のコレクションです。

多くの画像を含むWebページは、読み込みに時間がかかり、複数のサーバーリクエストが生成される可能性があります。

画像スプライトを使用すると、サーバーリクエストの数が減り、帯域幅が節約されます。

画像スプライト - 簡単な例

3つの個別の画像を使用する代わりに、この1つの画像("img_navsprites.gif")を使用します。

CSSを使用すると、画像の必要な部分だけを表示できます。

次の例では、CSSは「img_navsprites.gif」画像のどの部分を表示するかを指定します。

例の説明

• <img id="home" src="img_trans.gif">- src属性を空にすることはできないため、小さい透過イメージのみを定義します。表示される画像は、CSSで指定した背景画像になります。
• width: 46px; height: 44px;- 使用したい画像の部分を定義します。
• background: url(img_navsprites.gif) 0 0;- 背景画像とその位置を定義します。(left 0px、top 0px)

これは、画像スプライトを使用する最も簡単な方法です。次に、リンクとホバー効果を使用して拡張します。

画像スプライト - ナビゲーションリストの作成

スプライト画像("img_navsprites.gif")を使用して、ナビゲーションリストを作成します。

HTMLリストを使用します。リンクにすることができ、背景画像もサポートするからです。

例の説明

• #navlist {position:relative;} - positionはrelativeに設定され、その内部での絶対配置を可能にします
• #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}- marginとpaddingは0に設定され、list-styleは削除され、すべてのリスト項目は絶対位置に配置されます
• #navlist li, #navlist a {height:44px;display:block;} - すべての高さ画像は44pxです

次に、特定の各パーツの配置とスタイルを開始します。

• #home {left:0px;width:46px;} - 一番左に配置し、画像の幅は46pxです
• #home {background:url(img_navsprites.gif) 0 0;} - 背景画像とその位置を定義します(left 0px、top 0px)
• #prev {left:63px;width:43px;} - 右に63px(#home width 46px + アイテム間の余分なスペース)に配置され、幅は43pxです
• #prev {background:url('img_navsprites.gif') -47px 0;} - 右に47pxの背景画像を定義します(#home width 46px + 1px line divider)
• #next {left:129px;width:43px;} - 右に129px配置(#prevの開始は63px + #prev width 43px + 余分なスペース)、幅は43px
• #next {background:url('img_navsprites.gif') -91px 0;} - 背景画像を右に91px定義します(#home width 46px + 1px line divider + #prev width 43px + 1px line divider)

画像スプライト - ホバー効果

次に、ナビゲーションリストにホバー効果を追加します。

新しい画像("img_navsprites_hover.gif")には、ホバー効果に使用する3つのナビゲーション画像と3つの画像が含まれています。

これは1つの画像であり、6つの個別のファイルではないため、ユーザーが画像の上にカーソルを置いたときに読み込みの遅延が発生することはありません。

ホバー効果を追加するコードを3行追加するだけです。

例の説明

• #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - 3つのホバー画像すべてについて、同じ背景位置を指定します。