CSS Spriteを活用する
ホーム>CSS>CSSサンプル>CSS Spriteを活用する
CSS Spriteとは
CSS Spriteとは、ウェブページを高速に表示するための技術として、YouTubeやYahoo!Japanで使われている、と言われています。
CSS Spriteの技術とは、そのページ内で表示する画像を、すべて一枚の画像に作成し、最初に読み込んだ後、CSSのbackground-imageプロパティとbackground-positionプロパティによって、適切な場所に画像を表示します。
この技法は、「ロールオーバーイメージ」の項で解説した方法の応用です。
原理
上の画像は、サイトロゴ、メニューボタン、マーク画像をまとめて1枚の画像としてつくった画像です。
この画像では、本来なら12個の別々の画像を、1つの画像にしています。各画像の幅と高さは以下のとおりです。
この各画像の幅と高さを覚えておきます。
background-positionプロパティで、背景画像の表示位置を指定するのですが、background-positionでは、背景画像を表示する領域の左上を0として、上から何ピクセル、左から何ピクセル目から表示する、という指定をします。
つまり、画像の表示位置を指定するならば、マイナスの指定をすることになります。
背景画像を表示する位置を、横-70ピクセル、縦-15ピクセルにすると、背景画像は左へ70ピクセル、上に15ピクセル移動し、下のような画像が表示されます。
<div style="margin-left:30px;background-image:url(../../../data/img/css/sample/css-sprite-sample01.jpg);background-repeat:no-repeat;background-position:-70px -15px;"> </div>
次に、この領域に表示する幅と高さを指定すると、一つの画像だけを表示させることができます。
<div style="margin-left:30px;background-image:url(../../../data/img/css/sample/css-sprite-sample01.jpg);background-repeat:no-repeat;background-position:-70px -15px;width:50px;height:15px;"> </div>
CSS Spriteを使ってみる
上に表示した画像を使ってロゴとメニューが動作しているサンプルをご覧ください。
CSS Spriteを使う上での注意事項
CSS SpriteはWebページを高速に表示する技術の一つですが、使う上では幾つかの注意事項があります。
繰り返す画像には使えない
ある画像の連続パターンを表示することで、背景にしきつめる、というような表現をする場合、background-repeatプロパティを使いますが、これを使うと他の用途の画像まで表示されてしまうので、使うことができません。
CSS Spriteに使えるのは、単体の幅と高さが決まっている画像のみです。
画像を修正した場合手間がかかる
必要があって、後から個々の画像の大きさを変えた場合には、CSSのbackground-positionプロパティで指定した座標がずれてしまうので、再度、CSSを修正しなければなりません。
テキストを表示させる部分には使えない
例えば、メニューの文字の背景に表示させる画像を、CSS Spriteで表示させる場合、文字の大きさによって画像を表示する高さと幅が決まるので、必ず同じ高さ・幅が確保されるとは限りません。
文字の大きさ
上のように、文字が小さければ画像は下まで表示されません。
文字の大きさ
文字が大きすぎると画像をはみだしてしまいます。
ブラウザの設定で、文字のサイズは変更できますし、変更できない設定にしておいても、ブラウザの種類によって若干大きさが異なる場合があります。
※ブラウザで文字のサイズを変更できないように、CSSのfont-sizeプロパティでサイズをピクセルで指定することは、ユーザビリティの観点からは望ましくないとされています。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-7-8