CSSスプライトとは？

サイトの読み込みを最適化するために「CSSスプライト」というものが使われることがあります。実際どのように使うのか理解しておくと、便利なこともあるかもしれません。今回はこのCSSスプライトについて紹介します。

CSSスプライトとは

CSSスプライトは、サイトの読み込みを速くする目的で使われているCSSの技法です。具体的には、「サイト内の複数の画像をなるべく一枚の画像にまとめ、CSSで表示範囲を指定することによって表示させる」ことで画像の読み込みを減らし、サイトの読み込みが速くなるという仕組みです。

CSSスプライトを使うことで、サイトの読み込みが速くなるというメリットがあります。逆にデメリットは、サイズを変更したり画像を追加したいときの更新に手間がかかってしまうことです。

CSSスプライトを使ったアイコン

アイコンの場合は、アイコン画像をひとつにまとめた一枚画像を使い、画像の読み込みを最適化します。

一枚の画像にアイコンをまとめ、ボックスの幅や高さを表示させたい画像に合わせて指定し、background-positionでずらして画像を表示します。こうすることで、複数の画像の読み込みが一回で済むため、表示がしやすくなります。

YouTubeなどの動画サイトや、読み込む内容が多いため少しでもサイトの読み込みを効率的に行いたいときに利用されていることが多いです。

CSSスプライトを使ったロールオーバー

ロールオーバーの場合は、hover時の画像の位置を変えることで、表示する画像を切り替えます。

簡単にですが、書き方をご紹介します。

まず、このように通常時の画像とhover時の画像を並べた画像を用意します。今回は400px×300pxの画像を400px×600pxの画像に並べました。

次に「background:」で画像を表示させ、表示したい領域のボックスを「width:」と「height:」で指定します。

左上にHTMLに記述した「ロゴ」というテキストが残ってしまうので、「text-indent:100%;」でインデント量をその要素の幅分（100%）にします。インデントで押し出されたテキストが改行しないように「white-space:nowrap;」で改行を禁止して要素からはみ出させます。「overflow:hidden;」ではみ出たテキストを非表示にします。

最後にhover時の「background-position:」を縦に300pxずらして、２枚目の画像を表示させます。

まとめ

CSSスプライトについてご紹介しましたが、サイト内の画像すべてにCSSスプライトを使えばいいというわけではありません。サイトに何度も出てくるような「アイコン」や「ボタン」、「マーク」などにのみ使用することで、CSSスプライトをより効率的に使うことができます。