CSS Spriteを活用しよう

February 16th, 2008

みなさんお馴染みのYouTube

このYouTubeのプレーヤーに使われている画像は実は↓のような一枚の画像が用意されていて、スタイルでうまく表示されているようです。

画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそうです。

このテクニックをCSS Spriteって言うそうです。。（この手法自体は知ってましたが、CSS Spriteって呼ばれているのは知りませんでした…）

せっかくなので、本日はCSS Spriteをいろいろとまとめてみました。

1. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

一枚ずつ画像をスライスした場合と、CSS Spriteを使った場合の比較をされています。
サンプルのコードも公開されているので、わかりやすいですね。

一枚の画像をCSSのbackground-positionで表示してみると。

結果、HTTPリクエストは1回、トータルの画像サイズも7KBほど短縮されています。

2. Image Sprite Navigation With CSS

メニューのロールオーバーにCSS Spriteを使うのが一番分かりやすい例ですね。

↓のようにオーバーの画像もまとめて、一枚画像を用意して、hoverのbackground-positionを変更。

3. Advanced CSS Menu

WebDesignerWallさんのメニューもとってもきれいですね。ファイルもダウロードできるので便利です。

4. Dragon Interactive

jQueryとCSS Spriteを使った例。とってもきれいなメニューですね。

↓このような画像が用意されています。

5. JavaScript Sprite Animation Using jQuery

こちらもjQueryとCSS Spriteでページをパラパラとめくるような効果を出しています。

↓のような全ページの画像を一枚用意して。

↓のようなページをめくる時の画像と組み合わせています。

デモページはこちら

ページ右側をクリックすると次のページに、左側をクリックすると前のページにめくれたように見えますね～。

6. CSS Sprite Generator

もう既に画像スライスしちゃったよ～！って方にお勧めなのが、こちらのCSS Sprite Generator。スライスした画像をフォルダにまとめて、ZIPで圧縮して、このジェネレーターにアップロードすると、一枚の画像を作ってくれて、CSSも生成してくれる優れものです。

みなさんもCSS Spriteを活用してみてはいかがでしょう？

Star Wars - C-3PO mimobot 1GB USBフラッシュメモリ

価格（税込）: ￥ 6,250

Star Wars - ダース・シディアス mimobot 1GB USBフラッシュメモリ

価格（税込）: ￥ 6,250

Star Wars - ウィケット mimobot 1GB USBフラッシュメモリ

価格（税込）: ￥ 6,250

この記事に関連する記事

この記事のタグ

6 Responses to “CSS Spriteを活用しよう”

YSAIX Says:
February 16th, 2008 at 5:38 pm
もし知っていたら、
ファビコンをランダムに読み込む方法をエントリーとして
教えて欲しいです。
TRANS Says:
February 18th, 2008 at 11:15 am
いつも参考にさせていただいています。

たぶん、3つ目のWeb Design WallさんのやつはこのCSS Spriteに当てはまらないんじゃないかなと思うのです。ファイルをDLしてもらえれば分かると思いますが、画像は個別にスライスされていて、1枚ものの画像ではありません。

画像が1枚で表示されているのは記事投稿のときに説明用として掲載しているだけですので。
通りすがり Says:
February 18th, 2008 at 7:55 pm
Spriteっていう言い方をするとは知らなかったですねー。
ただ、これを使うとFireFoxで印刷したとき表示がおかしくなるので、自分は仕事では極力使用しないようにしてます。
印刷結果も見られるクライアントさんも結構いますので・・・。
管理人 Says:
February 19th, 2008 at 12:09 pm
YSAIXさん
コメントどうもありがとうございます。『ファビコンをランダムに読み込む』ですか・・・調べてみますね。。

TRANSさん
ご指摘のとおり、一枚ものの画像ではありませんが・・・Home, About, Rssのボタンのロールオーバー部分で、使われていたので、ご紹介させていただきました。説明が不十分で申し訳ございません。

通りすがりさん
確かに、印刷用のCSSも適用すると良いですよね。
center-circle.net Says:
May 29th, 2008 at 3:25 pm
CSS Spriteのあれこれ。…

最近は、これらを念頭に作業をしている。

作業の効率化
ファイル容量の軽減
シンプル

なるべく無駄をなくして、シンプルな形にすれば制作者にとっても、ユーザ……
岩家ぶろぐ Says:
July 10th, 2008 at 12:49 pm
[javascript][css] CSS Sprite + setInterval で簡易アニメーションしてみる…

はじめに

画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によっては……

DesignWalker