[う]CSS Spriteを練習してみた

CSS Spriteを練習してみた

2008/02/19

YouTubeで使用されている画像は、実は一枚の画像 - これを「CSS Sprite」と呼ぶのだそう。ということを、Design Walkerさんのこの記事で知りました。

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

サイトを作るときにすっごく面倒なのがパーツごとの切り出し（＝スライス）。例えば、ロールオーバーのメニューバーを作るとき、メニューが5つあれば5×2（マウスon/off）＝10枚の画像を作らなきゃいけません。

で、これまで私はPhotoshopで文字を書いたレイヤーを何重にも作り、それを表示/非表示させてPSDファイル1枚で管理してたんですが、「画像ファイル一枚」で管理することができれば見た目的にも分かりやすいですし、上で引用しているように読み込み速度が速くなるというのもプラス。

これは一応使えるようになっていた方がいいかなーと思いまして、練習してみたのがコレ。

メニュー部分にマウスカーソルを合わせていただければ分かると思いますが、よくあるロールオーバーのメニューバーです。で、これを表示させるのにCSSはこんな感じで設定してみました。

#SampleMenu,
#SampleMenu li{
	margin:0; padding:0;
}

#SampleMenu {
	width:500px;
	height:30px;
	list-style:none;
}

#SampleMenu li,
#SampleMenu li a{
	width:100px;
	height:30px;
	overflow:hidden;
}

#SampleMenu li{
	float:left;
}

#SampleMenu li a{
	display:block;
	text-indent:-9999px;
	background-image:url('./background.gif');
	background-repeat:no-repeat;
}

#SampleMenu1 a:link,
#SampleMenu1 a:visited,
#SampleMenu1 a:active { background-position:0 -30px; }
#SampleMenu1 a:hover { background-position:0 0; }

#SampleMenu2 a:link,
#SampleMenu2 a:visited,
#SampleMenu2 a:active { background-position:-100px -30px; }
#SampleMenu2 a:hover { background-position:-100px 0; }

#SampleMenu3 a:link,
#SampleMenu3 a:visited,
#SampleMenu3 a:active { background-position:-200px -30px; }
#SampleMenu3 a:hover { background-position:-200px 0; }

#SampleMenu4 a:link,
#SampleMenu4 a:visited,
#SampleMenu4 a:active { background-position:-300px -30px; }
#SampleMenu4 a:hover { background-position:-300px 0; }

#SampleMenu5 a:link,
#SampleMenu5 a:visited,
#SampleMenu5 a:active { background-position:-400px -30px; }
#SampleMenu5 a:hover { background-position:-400px 0; }

CSS Spriteで使用した背景画像

使用した背景画像はコレ1枚。5,297バイトの重さです。
で、比較用に10枚分の画像を切り出して重さを見てみたところ、全10画像で10,928バイトありました。画像を1枚にすることで5kバイトもサイズダウンさせることができるんですね☆

で、上で引用させてもらったDesign Walkerさんの記事では、いくつかCSS Spriteに関するノウハウが書かれていると思われるサイトが紹介されていたのですが、どれも英語でよく分からなかったので＾＾；「たぶんこーゆーことだろうなぁ...。」と試しに打ってみたのが上のテキストボックスに入っているCSS。当初は面倒そうに思えたものの、いざコードを打ってみるとホント簡単にCSS Spriteを活用することができました。

作業上、画像をいちいち切り出さなくていいというのはすっごい楽。その一方でちゃんと画像の位置を把握してCSSを指定しなきゃいけないという面倒もあるんですが、ブロードバンド時代であっても、やはりサイトはより軽いものを作るというのは心がけたいもの。

ということで、今後、あちこちでCSS Spriteという技法を活用させていただきます♪
Design Warkerさん、ありがとうございました！