CSS画像スプライト
画像スプライト
画像スプライトは、単一の画像に入れられた画像のコレクションです。
多くの画像を含むWebページは、ロードに時間がかかり、複数のサーバー要求を生成する可能性があります。
イメージスプライトを使用すると、サーバーリクエストの数が減り、帯域幅が節約されます。
画像スプライト-簡単な例
3つの別々の画像を使用する代わりに、次の1つの画像( "img_navsprites.gif")を使用します。
CSSを使用すると、必要な画像の一部だけを表示できます。
次の例では、CSSは「img_navsprites.gif」画像のどの部分を表示するかを指定します。
例
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
説明された例:
<img id="home" src="img_trans.gif">
-src属性を空にすることはできないため、小さな透明な画像のみを定義します。表示される画像は、CSSで指定した背景画像になりますwidth: 46px; height: 44px;
-使用する画像の部分を定義しますbackground: url(img_navsprites.gif) 0 0;
-背景画像とその位置を定義します(左0px、上0px)
これは画像スプライトを使用する最も簡単な方法です。次に、リンクとホバー効果を使用して画像スプライトを拡張します。
画像スプライト-ナビゲーションリストを作成する
スプライト画像( "img_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に設定され、リストスタイルは削除され、すべてのリストアイテムは絶対位置に配置されます
- #navlist li、#navlist a {height:44px; display:block;}-すべての画像の高さは44pxです
次に、特定のパーツごとに配置とスタイル設定を開始します。
- #home {left:0px; width:46px;}-左端に配置され、画像の幅は46pxです
- #home {background:url(img_navsprites.gif)0 0;}-背景画像とその位置を定義します(左0px、上0px)
- #prev {left:63px; width:43px;}-右に63pxの位置にあり(#home width 46px +アイテム間の余分なスペース)、幅は43pxです。
- #prev {background:url( 'img_navsprites.gif')-47px 0;}-背景画像を右に47px定義します(#home width 46px + 1px linedivider)
- #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 linedivider + #prev width 43px + 1px linedivider)
画像スプライト-ホバー効果
次に、ナビゲーションリストにホバー効果を追加します。
ヒント::hover
セレクターは、リンクだけでなく、すべての要素で使用できます。
新しい画像( "img_navsprites_hover.gif")には、ホバー効果に使用する3つのナビゲーション画像と3つの画像が含まれています。
これは単一の画像であり、6つの個別のファイルではないため、ユーザーが画像にカーソルを合わせても読み込みの遅延はありません。
ホバー効果を追加するために追加するコードは3行だけです。
例
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
}
説明された例:
- #home a:hover {background:url( 'img_navsprites_hover.gif')0 -45px;}-3つのホバー画像すべてに対して、同じ背景位置を指定しますが、45pxだけ下になります。