CSS Sprite で異なる背景画像をひとつにまとめて効率良く読み込ませる

ヘッダーとかサイドエリアのメニューバーなどで、一般的に画像のロールオーバーとか使う場合は、
違う画像を2つ用意して、cssでリンク時とクリック時でそれぞれ読み込みますが、
CSS Sprite っていう方法は、違う画像をひとつにまとめて、位置関係で表示する方法です。

HTTPリクエストは1回・トータルの画像枚数も減るようです。

このブログの左側に固定されているツイッターの画像などでも、CSS Spriteを使っています。

やってみると意外と簡単なので、作り方の備忘録です。

まずは、通常時の画像とオンマウスの状態の画像をひとつにまとめます。

ポジションの指定が楽なので、できればピッタリくっつけた方が、楽かもしれません。

実際に使っているツイッターの画像で説明します。

画像はコレ↓

Twitter

上の画像が通常時で、下の画像がオンマウスの時に表示される画像です。
(上記の画像はすでにひとつにしてあります ^^;)

普通のロールオーバーでは上下それぞれに画像を作り読み込ませますね。

まあ、画像自体はもともと2つ必要なんですけど 笑

注意点は同じ大きさで作ることくらいでしょうか。

画像を用意したらいよいよcssを書いて、サイトにもhtml(xhtml)を書いたら完成です。

このサイトで使っている例だと

css ↓

CSS Spriteの要点は画像をひとつにまとめて、
画像を読み込むポジションを正確にすることでしょうか。

background のポジション指定で、最初に読み込む画像の位置を起点として、
横軸に何ピクセルとか縦軸に何ピクセルとかが肝ですが、
画像をピッタリとくっつけておくと、画像の大きさ分(*1)それぞれ縦横に移動すれば
問題なく表示されるようです。

*1 
今回の例で使ったCSS Sprite用の画像は横幅77ピクセル、高さ98ピクセルです。
2つの画像を1つにする前の、もともとの大きさは、横幅は同じ、高さが49ピクセル(真半分)です。
今回の例の画像のように、縦に2つ並べて作られた画像の場合、
縦軸に移動すのは、もともとひとつだった画像分の数値(49ピクセル)になります。

縦軸を上に移動した場合、0を起点とするとプラスの数値になり、
下に移動するとマイナスの数値になります。
(今回の例は下に移動したので、-49ピクセルっていうことです。。)

横軸を左に移動した場合、0を起点とするとマイナスの数値なり、
右に移動するとプラスの数値になります。

今回の例だと横方向は同じで、縦方向が下方向に移動(-49ピクセル)したところに
もともと別の画像だった、もう一枚の画像があるということです。

自分ようの備忘録も兼ねて書いていますので、
なんのこっちゃっていう人は、サクっと検索してみてくださいね ^^;

:: スポンサーリンク ::

posted by そば富泉

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)