HTTPリクエスト数削減テクニック2： CSS Sprite編

これから身につけるWebサイト高速化テクニック（6）

CSS Spriteの記述方法

　それでは、サンプルナビゲーションを使ってどのようにCSSを指定するのか記述方法を紹介します。

1. HTMLの構造

　実現するためのHTMLの構造は以下のとおりです。

　個々のボタンを判別するために、ホームや会社情報を表すクラスを指定しておきます。

<nav>
    <ul id="globalNav">
        <li class="item home"><a href="#">ホーム</a></li>
        <li class="item company"><a href="#">会社情報</a></li>
        <li class="item services"><a href="#">サービス</a></li>
        <li class="item solutions"><a href="#">ソリューション</a></li>
        <li class="item recruit"><a href="#">採用</a></li>
        <li class="item inquiry"><a href="#">お問い合わせ</a></li>
    </ul>
</nav>

2. CSSの指定

　CSSでは.itemクラスの中のアンカータグに、Sprite画像の指定を行い.homeクラスを使いbackground-positionプロパティによる座標指定を行います。さらに:hoverや:activeなどの疑似要素を使って、マウスが乗ったときに表示する座標を変更します。座標指定は左上を起点にx軸・y軸の移動距離を指定するので、値はマイナス指定です。

.item a {
        display:  block;
        width:    160px;
        height:   85px;
        
        background-image: url('sprite.png');
        background-repeat:        no-repeat;
}
 
.item.home a {
        background-position:        0px 0px;
}
.item.home a:hover {
        background-position:        0px -85px;
}
.item.home a:active {
        background-position:        0px -170px;
}
.item.home.current a {
        background-position:        0px -205px;
}

　この状態でも一見問題ないように見えますが、このままでは内包するテキストや要素によって収まりきらない場合、はみ出てしまう可能性があるので、overflow: hidden;を指定しておきましょう。

.item a {
        overflow: hidden;
        display:  block;
        width:    160px;
        height:   85px;
        
        background-image: url('sprite.png');
        background-repeat:        no-repeat;
}

3. 画像置換について

　テキストも活用したCSS Spriteの場合は問題になりませんが、テキストを表示させたくない場合があります。

　こういった時に使われるのが画像置換というテクニックです。画像置換は表示領域外にテキストを飛ばすことで画像のみを表示させます。昔からあるテクニックで、text-indent: -9999px;を使ってテキストをブラウザの表示領域外の彼方に飛ばす手法が使われてきました。ですが、この指定方法は無駄が多く、現在ではtext-indent: 100%;とwhite-space: nowrap;を使う方法が一般的です。

.item a {
        overflow: hidden;
        display:  block;
        width:    160px;
        height:   85px;
        
        background-image: url('sprite.png');
        background-repeat:        no-repeat;
        
        text-indent:    100%;
        white-space:  nowrap;
}

4. Retinaディスプレイの対応方法

　Retinaディスプレイに対応するには、Media Queries（@media規則）を使いデバイスに合わせてCSS Spriteを指定します。このナビゲーションの場合は、倍のサイズ1920px×680pxです。この高解像度用画像をMedia Queries内のbackground-imageに指定します。

.item a {
        overflow: hidden;
        display:  block;
        width:    160px;
        height:   85px;
        
        background-image: url('sprite.png');
        background-repeat:        no-repeat;
        
        text-indent:    100%;
        white-space:  nowrap;
}
 
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
    .item a {
            background-image: url('sprite_x2.png');
            background-size: 960px 340px;
    }
}

　@media規則内のbackground-positionは、background-sizeが指定されていない場合、1920px×680pxの背景画像サイズを前提として計算されます。ここでbackground-sizeに通常と同じ960px×340pxを指定することにより、通常時と同じbackground-positionで背景画像を扱うことができます。

　CSS Spriteの仕組みに関する解説はこれぐらいにしておきましょう。