CSS Spriteを活用しよう

みなさんお馴染みのYouTube この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 Sprites: What They Are, Why They’re Cool, and How To Use Them

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

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

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

2. Image Sprite Navigation With CSS

メニューのロールオーバーにCSS Spriteを使うのが一番分かりやすい例ですね。 ↓のようにオーバーの画像もまとめて、一枚画像を用意して、hoverのbackground-positionを変更。

Image Sprite Navigation With CSS

3. Advanced CSS Menu

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

Advanced CSS Menu

4. Dragon Interactive

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

Dragon Interactive

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

Dragon Interactive

5. JavaScript Sprite Animation Using jQuery

こちらもjQueryとCSS Spriteでページをパラパラとめくるような効果を出しています。 ↓のような全ページの画像を一枚用意して。

JavaScript Sprite Animation Using jQuery

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

JavaScript Sprite Animation Using jQuery

デモページはこちら ページ右側をクリックすると次のページに、左側をクリックすると前のページにめくれたように見えますね~。

6. CSS Sprite Generator

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

CSS Sprite Generator

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

関連記事

12件のコメント

  1. もし知っていたら、
    ファビコンをランダムに読み込む方法をエントリーとして
    教えて欲しいです。

  2. いつも参考にさせていただいています。

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

    画像が1枚で表示されているのは記事投稿のときに説明用として掲載しているだけですので。

  3. Spriteっていう言い方をするとは知らなかったですねー。
    ただ、これを使うとFireFoxで印刷したとき表示がおかしくなるので、自分は仕事では極力使用しないようにしてます。
    印刷結果も見られるクライアントさんも結構いますので・・・。

  4. YSAIXさん
    コメントどうもありがとうございます。『ファビコンをランダムに読み込む』ですか・・・調べてみますね。。

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

    通りすがりさん
    確かに、印刷用のCSSも適用すると良いですよね。

  5. ピンバック: center-circle.net
  6. ピンバック: 岩家ぶろぐ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です