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を活用してみてはいかがでしょう？
|
|
|
|
February 16th, 2008 at 5:38 pm
もし知っていたら、
ファビコンをランダムに読み込む方法をエントリーとして
教えて欲しいです。
February 18th, 2008 at 11:15 am
いつも参考にさせていただいています。
たぶん、3つ目のWeb Design WallさんのやつはこのCSS Spriteに当てはまらないんじゃないかなと思うのです。ファイルをDLしてもらえれば分かると思いますが、画像は個別にスライスされていて、1枚ものの画像ではありません。
画像が1枚で表示されているのは記事投稿のときに説明用として掲載しているだけですので。
February 18th, 2008 at 7:55 pm
Spriteっていう言い方をするとは知らなかったですねー。
ただ、これを使うとFireFoxで印刷したとき表示がおかしくなるので、自分は仕事では極力使用しないようにしてます。
印刷結果も見られるクライアントさんも結構いますので・・・。
February 19th, 2008 at 12:09 pm
YSAIXさん
コメントどうもありがとうございます。『ファビコンをランダムに読み込む』ですか・・・調べてみますね。。
TRANSさん
ご指摘のとおり、一枚ものの画像ではありませんが・・・Home, About, Rssのボタンのロールオーバー部分で、使われていたので、ご紹介させていただきました。説明が不十分で申し訳ございません。
通りすがりさん
確かに、印刷用のCSSも適用すると良いですよね。
May 29th, 2008 at 3:25 pm
CSS Spriteのあれこれ。…
最近は、これらを念頭に作業をしている。
作業の効率化
ファイル容量の軽減
シンプル
なるべく無駄をなくして、シンプルな形にすれば制作者にとっても、ユーザ……
July 10th, 2008 at 12:49 pm
[javascript][css] CSS Sprite + setInterval で簡易アニメーションしてみる…
はじめに
画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によっては……
November 4th, 2008 at 2:38 am
RPGツクール画像を使ってマップスクロール（CSS SPRITE）…
CSS SPRITEというテクがある。通常、Webサイトには多数の画像を表示しているが、その画像を一枚の画像としてまとめたものを読み込み、CSSのbackground-imageやbackground-positionを用いて、画像の必要な箇所にCSSで画像を表示する、というものである。
DesignWalkerさんによると、YouTubeの背景もこの方法を用いているようである。
これを見ていて、ふと思い出したものがあった。それは、RPGツクールといわれるゲーム作成ソフトの背景画像である。
…
December 6th, 2008 at 9:46 pm
[...] これも有名所DesignWalkerさん。CSS Spriteの簡単な説明と利点。 DesignWalker CSS Spriteを活用しよう [...]
December 29th, 2008 at 6:14 pm
[...] CSS Spriteは、複数の画像をつなぎ合わせて、一枚の画像を用意します。そして、その一部分だけをCSSを使って表示する方法です。デザインウォーカーでも以前、『CSS Spriteを活用しよう』と言う記事でご紹介しました。 [...]
January 6th, 2009 at 4:56 am
[...] DesignWalker：CSS Spriteを活用しよう 基本的に自分はGIFならGIFでひとまとめにすることが多いです。 [...]
July 7th, 2009 at 8:22 pm
[...] ちなみにうちのメニューは下の画像一枚です。これCSSによって表示位置を変えるとメニューになるわけです。 割とよく使われるんですけど、この方法をCSS spriteと呼ぶとは知りませんでした。 CSS spriteについて詳しくはこちら。 [...]