CSS イメージスプライト
- 前のページ CSS イメージライブラリ
- 次のページ CSS 属性セレクタ
画像スプライト
画像スプライトは、単一の画像に含まれる画像集合です。
多くの画像を含むウェブページは、長い時間がかかり、複数のサーバーへのリクエストが生成されることがあります。
画像スプライトを使用することで、サーバーへのリクエストの数を減らし、帯域幅を節約できます。
画像スプライト - 単純な例
「navsprites.gif」の単一の画像を使用し、3つの別々の画像を使用するのではなく、以下のように簡単な例を使用します：
CSSを使用することで、必要な画像の部分のみを表示することができます。
以下の例では、CSSが「navsprites.gif」画像のどの部分を表示するかを指定しています：
例
#home {
width: 46px;
height: 44px;
background: url(navsprites.gif) 0 0;
}
例説明：
<img id="home" src="trans.gif">- 小さな透明画像のみを定義します。なぜなら、src属性は空にすることができず、実際に表示される画像はCSSで指定された背景画像になります。width: 46px; height: 44px;- 使用する画像部分を定義しますbackground: url(navsprites.gif) 0 0;- 背景画像とその位置（left 0px, top 0px）を定義します
画像スプライト - ナビゲーションリストの作成
「navsprites.gif」のスプライト画像を使用してナビゲーションリストを作成したいです。
HTMLリストを使用します。なぜなら、リンクとして使用できるだけでなく、背景画像をサポートするからです：
例
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
例説明：
- #navlist {position:relative;} - 位置設定が相対的となり、その中で絶対定位を行うことができます
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 余白と内余白を 0 に設定し、list-style を削除し、すべてのリストアイテムは絶対配置
- #navlist li, #navlist a {height:44px;display:block;} - すべての画像の高さは 44px
今から各特定部分の配置とスタイルを設定し始めます：
- #home {left:0px;width:46px;} - 始終左に配置し、画像の幅は 46px
- #home {background:url(navsprites.gif) 0 0;} - 背景画像及其位置（left 0px, top 0px）を定義
- #prev {left:63px;width:43px;} - 右に 63px（#home 幅 46px + プロジェクト間の一部の余分なスペース）に配置、幅 43px
- #prev {background:url('navsprites.gif') -47px 0;} - 背景画像を右に 47px（#home 幅 46px + 1px の分離線）に定義
- #next {left:129px;width:43px;} - 右に 129px（#prev 開始は 63px + #prev 幅は 43px + 余分なスペース）に配置、幅 43px
- #next {background:url('navsprites.gif') -91px 0;} - 背景画像を右に 91px（#home 幅 46px + 1px の分離線 + #prev 幅 43px + 1px の分離線）に定義
画像エンティティ - ホバー効果
次に、ナビゲーションリストにホバー効果を追加します。
ヒント：:hover セレクタはすべての要素に適用できますが、リンクに限られていません。
新しい画像（"navsprites_hover.gif"）には、三つのナビゲーション画像と三つのホバー効果用の画像が含まれています：
これは画像であり、六つの個別のファイルではなく、ユーザーが画像上にマウスをホバーするときに、ロード遅延はありません。
ホバー効果を実現するために、わずか三行のコードを追加します：
例
#home a:hover {
background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('navsprites_hover.gif') -91px -45px;
}
例説明：
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - すべての3つのホバーアイコンに同じ背景位置を指定し、45ピクセルだけ下に移動
- 前のページ CSS イメージライブラリ
- 次のページ CSS 属性セレクタ
