CSS イメージ・スプライト

❮ 前章へ次章へ ❯

イメージ・スプライト

イメージ・スプライトとは、1 つの画像にまとめられた画像の集まりです。

多くの画像を持つ Web ページは、ロードや複数サーバ・リクエストの生成に長い時間が掛ります。

イメージスプライトを使うことで、サーバへのリクエスト回数を減らし、帯域幅を節約することができます。

イメージスプライト - 簡単な例

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

navigation images

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

下の例において、CSS は "img_navsprites.gif" イメージのどの部分を表示するかを指定します:

例

#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}

Try it Yourself ❯

例の説明:

<img id="home" src="img_trans.gif"> - src 属性を空にはできないので、小さな透明画像を定義しているだけです。表示される画像は、CSS で指定する背景画像です
width: 46px; height: 44px; - 使用したい画像の一部を定義します
background: url(img_navsprites.gif) 0 0; - 背景画像と位置 (左 0px、上 0px) を定義します

これは、イメージスプライトを使用する最も簡単な方法です。次に、リンクと hover 効果を使用して拡張しようと思います。

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

ここでは、ナビゲーションリストを作成するために、スプライトイメージ("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;
}

Try it Yourself ❯

例の説明:

#navlist {position:relative;} - 内部に absolute 配置が可能になるように、position は relative に設定します
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - マージンとパディングを 0 に設定、list-style を削除し、すべてのリストアイテムを absolute 配置にします
#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 の幅 46px + 項目間のスペース)に配置し、幅を 43px にします
#prev {background:url('img_navsprites.gif') -47px 0;} - 右 47px (#homeの幅 46px + 1px 区切り線) に背景画像を定義します
#next {left:129px;width:43px;} - 右 129px (開始の #prev 63px + #prev の幅 43px + 必要なスペース)に配置し、幅を 43px にします
#next {background:url('img_navsprites.gif') -91px 0;} - 右 91px（#home の幅 46px + 1px 区切り線 + #prev 幅 43px + 1px 仕切り線）に背景画像を定義します

イメージスプライト - ホバー効果

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

チップ: :hover セレクタはリンクだけでなく、すべての要素に使用することができます。

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

navigation images

これは、1 つの画像で、6 つの別々なファイルではないため、ユーザが画像上にマウスを乗せた時にも、 ロードの遅延は生じません。

hover 効果を追加するには、コードを 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;
}

Try it Yourself ❯

例の説明:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 3つ全てのホバー画像に対し、45px だけ下にさげて、背景位置を同じに指定します

❮ 前章へ次章へ ❯