CSS Sprite で異なる背景画像をひとつにまとめて効率良く読み込ませる
ヘッダーとかサイドエリアのメニューバーなどで、一般的に画像のロールオーバーとか使う場合は、
違う画像を２つ用意して、cssでリンク時とクリック時でそれぞれ読み込みますが、
CSS Sprite っていう方法は、違う画像をひとつにまとめて、位置関係で表示する方法です。
HTTPリクエストは1回・トータルの画像枚数も減るようです。
このブログの左側に固定されているツイッターの画像などでも、CSS Spriteを使っています。
やってみると意外と簡単なので、作り方の備忘録です。
まずは、通常時の画像とオンマウスの状態の画像をひとつにまとめます。
ポジションの指定が楽なので、できればピッタリくっつけた方が、楽かもしれません。
実際に使っているツイッターの画像で説明します。
画像はコレ↓
上の画像が通常時で、下の画像がオンマウスの時に表示される画像です。
（上記の画像はすでにひとつにしてあります ＾＾；）
普通のロールオーバーでは上下それぞれに画像を作り読み込ませますね。
まあ、画像自体はもともと２つ必要なんですけど 笑
注意点は同じ大きさで作ることくらいでしょうか。
画像を用意したらいよいよcssを書いて、サイトにもhtml(xhtml)を書いたら完成です。
このサイトで使っている例だと
css ↓
#tweet a{
text-decoration: none;
display: block;
width:77px;/* 画像の横幅 */
height:114px;/* 画像の高さ */
background: transparent url(images/twsprite.gif) no-repeat 0 0;
/* 上記の数字 0 0 っていうの肝で横軸・縦軸です */
}
#tweet a:hover{
background: transparent url(images/twsprite.gif) no-repeat 0 -114px;
/* 横軸の方向はそのまま、縦軸は下に114px移動します */
}CSS Spriteの要点は画像をひとつにまとめて、
画像を読み込むポジションを正確にすることでしょうか。
background のポジション指定で、最初に読み込む画像の位置を起点として、
横軸に何ピクセルとか縦軸に何ピクセルとかが肝ですが、
画像をピッタリとくっつけておくと、画像の大きさ分（*1）それぞれ縦横に移動すれば
問題なく表示されるようです。
*1
今回の例で使ったCSS Sprite用の画像は横幅77ピクセル、高さ228ピクセルです。
２つの画像を１つにする前の、もともとの大きさは、横幅は同じ、高さが114ピクセル（真半分）です。
今回の例の画像のように、縦に２つ並べて作られた画像の場合、
縦軸に移動すのは、もともとひとつだった画像分の数値（114ピクセル）になります。
縦軸を上に移動した場合、0を起点とするとプラスの数値になり、
下に移動するとマイナスの数値になります。
（今回の例は下に移動したので、-114ピクセルっていうことです。。）
横軸を左に移動した場合、0を起点とするとマイナスの数値なり、
右に移動するとプラスの数値になります。
今回の例だと横方向は同じで、縦方向が下方向に移動（-114ピクセル）したところに
もともと別の画像だった、もう一枚の画像があるということです。
自分ようの備忘録も兼ねて書いていますので、
なんのこっちゃっていう人は、サクっと検索してみてくださいね ＾＾；
： ： このページの内容と関連がある記事 ： ：
- 背景ではなく単純に特定の画像に適用するCSS Sprite
- CSSハックまとめ（IE）
- WP-PageNavi を使わずにナビゲーション表示 備忘録
- 角丸画像で切り抜いた写真に角丸の枠線を付ける方法
- ショートハンド
