LINEで送る
Pocket

みなさんお馴染みの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を活用してみてはいかがでしょう?

Similar Posts:

LINEで送る
Pocket


13 Thoughts on “CSS Spriteを活用しよう”

コメントを残す

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