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を活用してみてはいかがでしょう?

デザインblogランキング

コメント 14 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



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

  1. YSAIX Says:

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

  2. TRANS Says:

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

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

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

  3. 通りすがり Says:

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

  4. 管理人 Says:

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

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

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

  5. center-circle.net Says:

    CSS Spriteのあれこれ。…

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

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

    なるべく無駄をなくして、シンプルな形にすれば制作者にとっても、ユーザ……

  6. 岩家ぶろぐ Says:

    [javascript][css] CSS Sprite + setInterval で簡易アニメーションしてみる…

    はじめに

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

  7. まねきねこプロジェクト|開発ブログ Says:

    RPGツクール画像を使ってマップスクロール(CSS SPRITE)…

    CSS SPRITEというテクがある。通常、Webサイトには多数の画像を表示しているが、その画像を一枚の画像としてまとめたものを読み込み、CSSのbackground-imageやbackground-positionを用いて、画像の必要な箇所にCSSで画像を表示する、というものである。
    DesignWalkerさんによると、YouTubeの背景もこの方法を用いているようである。

    これを見ていて、ふと思い出したものがあった。それは、RPGツクールといわれるゲーム作成ソフトの背景画像である。

  8. [XHTML+CSS]CSS Spriteで実現する角丸 | Commit Lab Says:

    […] これも有名所DesignWalkerさん。CSS Spriteの簡単な説明と利点。 DesignWalker CSS Spriteを活用しよう […]

  9. Desinine » Blog Archive » CSS Spriteを利用して角丸の枠を作る方法 Says:

    […] CSS Spriteは、複数の画像をつなぎ合わせて、一枚の画像を用意します。そして、その一部分だけをCSSを使って表示する方法です。デザインウォーカーでも以前、『CSS Spriteを活用しよう』と言う記事でご紹介しました。 […]

  10. CSS Sprite | Chibiの覚え書き Says:

    […] DesignWalker:CSS Spriteを活用しよう 基本的に自分はGIFならGIFでひとまとめにすることが多いです。 […]

  11. Moral Hazard!! » CSS spriteとpay pal Says:

    […] ちなみにうちのメニューは下の画像一枚です。これCSSによって表示位置を変えるとメニューになるわけです。 割とよく使われるんですけど、この方法をCSS spriteと呼ぶとは知りませんでした。 CSS spriteについて詳しくはこちら。 […]

  12. Otaxa » Blog Archive » SEOでよく言われる「text-indent:-9999px;」でのテキスト隠し Says:

    […] そもそも、なんでこんなことするのか。 上でも書いたけど、一般的に「imgタグ入れるよりテキスト書いたほうがSEO的に強い(気がする)から」ってのが共通認識のようになってるけど、それは少しズレてると思う。 GoogleもYahoo!も、なんで画像を表示するのにテキスト隠してるのかっていうと「表示を速くするため」だと思う(本人に聞いたわけじゃないけど)。 いわゆる「CSSスプライト」。 […]

  13. ゆっくりと… » CSS最適化オンラインツールの性能比較 (2) Says:

    […] Optimizerは文字サイズが大きくなり、CSS Spritesの画像が一部しか表示されなくなりました。 […]

  14. SEOでよく言われる「text-indent:-9999px;」でのテキスト隠し | otaxa Says:

    […] ると思う。 GoogleもYahoo!も、なんで画像を表示するのにテキスト隠してるのかっていうと「表示を速くするため」だと思う(本人に聞いたわけじゃないけど)。 いわゆる「CSSスプライト」。 […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ