CSS Radar

CSSスプライトとは？

CSSスプライトという言葉を聞いたことがあるだろうか？
ナビゲーションなどで画像を利用した際にマウスオーバーで画像を切り替えるという効果を加えるのによく利用される手法だ。

その昔はJavaScriptを利用していたが、CSSのbackground-position属性の位置情報を変更することで、CSSで置き換えることが一般的になった。
CSSスプライトが紹介される以前は、通常時とマウスオーバー時の画像を対にしてスライスする手法が主だったが、
CSSスプライトではさらに一歩進め、ナビゲーション全体で利用する通常時、マウスオーバー時の画像を1枚の画像にしてしまい、やはりCSSにより必要な画像を表示させる。

なぜCSSスプライト？

CSSスプライトはなぜこれまでの手法よりも優れているのだろうか？
大きな1枚画像はページのロード時間を、複数に分けるより遅くしないだろうのか？

実はほとんどのウェブサイトではおよそ20％をHTMLのロードに、残り80%を画像やCSS、JavaScriptなどのコンポーネントをロードするのに時間がかかっている。

Yahoo!のパフォーマンス改善チームのTenni Theurerによると、
HTTPのリクエスト回数を減らすことが、パフォーマンスの改善にもっとも効果的である、そうだ。

つまり、複数枚にスライスされた大きな画像は、それぞれの画像のロードに時間がかからないというだけで、
ページ全体で考えると複数のHTTPリクエストを生むことになり、結果的にページのロードに時間がかかることになる。

では、コードを。

<div class="navi">
    <ul>
        <li><a href="#1" class="home"></a></li>
        <li><a href="#2" class="yourCategory1"></a></li>
        <li><a href="#3" class="yourCategory2"></a></li>
        <li><a href="#4" class="yourCategory3"></a></li>
    </ul>
</div>

例として、HTMLは上記を利用する。

div.navi li a {
    background-image:url(../img/image_nav.gif);
    /* スプライト画像の呼び出し */
}
    div.navi li .home {
        background-position: 0px 0px;
    }
    div.navi li.home a:hover.home  {
        background-position: 0px -32px;
    }
    ......

最後の方は省略したが、アイデアは理解できるだろう。
Aタグにスプライト画像を背景として呼び出し、
各li a.homeなどの部分でその背景の必要な部分を読み込む。
という考え方だ。

対になるように画像をスライスするよりはCSSのコード自体もすっきりする。
ナビゲーション以外にも、ブロックごとのアイコンの表示などにも利用でき、意外と利用範囲は広い。

List ApartのCSS Sprites: Image Slicing’s Kiss of Deathや、CSS-TricksのCSS Sprites: What They Are, Why They’re Cool, and How To Use Them
にて、いくつかの例を見ることが出来る。

でも、background-positionの値が面倒そう……

その部分は確かに面倒だ。
そんな面倒を解決してくれるのが、
Website Performanceにて公開されている、CSS Sprite Generator。

このオンラインツールは、スライスした画像をZipファイルにしてアップロードすると、
スプライト画像を作成してくれる上に、面倒なbackground-positionの値を指定も出力してくれる。
さらに、Operaでのバグの修正までしてくれるし、CSSのクラス名の指定もかなり自由度の高い形でできる。

その上、ソースコード(PHP)まで公開され、BSDライセンスにて自由に利用できるので、オフライン時でも利用できる。
サイト自体は英語が主だが、翻訳を募集していたので、先日翻訳してファイルを送信した。
近い内に日本語でも利用可能にしてくれることだろう。

2008-8-23、日本語訳の実装が終了したようです。
もし、妙な日本語になっている場合はご指摘ください。

ヘルプページとCSSスプライトとは？ページの翻訳のお願いも作者からいただきましたので、
合わせて翻訳します。