今回は、表題の通り、WEB制作の際にスライス作業を減らして、しかもブラウザでファイルを開いた際に画像の読み込み処理を最小限にするという、ちょっと素敵なCSS（スタイルシート）の小技をお教えします。
まずは、実際の処理を見て頂くために、下のボタンにマウスを合わせてみて下さい。
いかがですか？…まぁ何の変哲もないロールオーバーボタンですね。CSSで背景にアクションをつけています。
ただ、このロールオーバーが他と違う点は、画像1枚でオンマウス/オンマウスアウトの処理を行う点。
どういうことかと言うと、
↑このような1枚の画像を用意して、a:hoverの背景をbackground-positionでずらしているのです。
これ1点だけでは画像のローディング・スピードに大した変化は期待できませんが、もしこのスタイル指定をサイト全体の画像（ボタンやアイコンなど）に応用したらどうでしょうか。
実はこの手法、“CSS Sprite（CSSスプライト）”という呼び名がついているようで、有名どころで例を挙げれば、皆さんもよくご存知のYouTubeのサイトでも使われています。
しかも、サイト上のほとんどのボタン・アイコン・背景画像を1枚のGIFイメージで表示しています。
ちなみにその画像がこちら → master-vfl34196.gif
この手法を使いこなせば、前述の通り、デザイナーさんのスライスの手間を減らすこともできて、しかもローディングの負荷を最低限に抑えることができますね。
というわけで、今回のサンプル（XHTML/CSSのファイルと画像）を用意しておりますので、どうぞご自由に。
|