CSS Spriteを活用する

ホーム>CSS>CSSサンプル>CSS Spriteを活用する

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

CSS Spriteとは

CSS Spriteとは、ウェブページを高速に表示するための技術として、YouTubeやYahoo!Japanで使われている、と言われています。

CSS Spriteの技術とは、そのページ内で表示する画像を、すべて一枚の画像に作成し、最初に読み込んだ後、CSSのbackground-imageプロパティbackground-positionプロパティによって、適切な場所に画像を表示します。

この技法は、「ロールオーバーイメージ」の項で解説した方法の応用です。

原理

CSS Spriteのための画像

上の画像は、サイトロゴ、メニューボタン、マーク画像をまとめて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;">&nbsp;</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;">&nbsp;</div>

 

CSS Spriteを使ってみる

上に表示した画像を使ってロゴとメニューが動作しているサンプルCSS Spriteを使ったサイトのサンプルを別ウィンドウで開くをご覧ください。

CSS Spriteを使う上での注意事項

CSS SpriteはWebページを高速に表示する技術の一つですが、使う上では幾つかの注意事項があります。

繰り返す画像には使えない

ある画像の連続パターンを表示することで、背景にしきつめる、というような表現をする場合、background-repeatプロパティを使いますが、これを使うと他の用途の画像まで表示されてしまうので、使うことができません。

CSS Spriteに使えるのは、単体の幅と高さが決まっている画像のみです。

画像を修正した場合手間がかかる

必要があって、後から個々の画像の大きさを変えた場合には、CSSのbackground-positionプロパティで指定した座標がずれてしまうので、再度、CSSを修正しなければなりません。

テキストを表示させる部分には使えない

例えば、メニューの文字の背景に表示させる画像を、CSS Spriteで表示させる場合、文字の大きさによって画像を表示する高さと幅が決まるので、必ず同じ高さ・幅が確保されるとは限りません。

文字の大きさ

上のように、文字が小さければ画像は下まで表示されません。

文字の大きさ

文字が大きすぎると画像をはみだしてしまいます。

ブラウザの設定で、文字のサイズは変更できますし、変更できない設定にしておいても、ブラウザの種類によって若干大きさが異なる場合があります。

※ブラウザで文字のサイズを変更できないように、CSSのfont-sizeプロパティでサイズをピクセルで指定することは、ユーザビリティの観点からは望ましくないとされています。

関連リンク

よく読まれている記事

UpDate:2010-7-8