トリビア・リンク

CSS Spriteの使い方
基本形です。このブログの左のタイトルメニューの背景に画像を使用している場合を例とします。
まず、CSSでは、『width』、『height』、『background』の３つの要素が必要です。

<h3 class="title">カレンダー</h3>

.title {
	width=180px;
	height=30px;
	background=url(sprites.png) no-repeat 0px -178px;
}

少し面倒なのが、backgroundの画像の座標です。画像ファイルの左上の基点（0,0）と表示したい画像イメージの左上の基点のずれを測って記載します。例の場合だと表示したい画像イメージが画像ファイルの左上の基点から見て下方向に178pxずれているので-178pxとなります。

CSS Spriteの注意点

いくつかCSS Spritesの注意点があります。

リピート用画像はCSS Spritesでは使えないため別画像とする。

CSS Sprites用の統合画像が，アルファチャンネルを持った透過画像となっている場合，IE6で正しく表示されないことがある。

リストアイコン等使用するときは、CSS Sprites用の統合画像を作成する際にある程度離しておいておかないといけない。（height指定をすることでリストが２行になった時に２行目が表示されなくなったりするので、複数行のリスト行の場合はMAXの高さをmax-heightしてリストアイコンもそのmax-height分話して統合画像に配置する必要がある）