マメ知識：CSSスプライト（CSS Sprites）

CSS スプライトとは

基本的には、数多く使用するアイコン画像などを1枚の画像にまとめ、各画像を表示する際は、バックグラウンドにcssでpositionを指定して表示して使い回します。利点は、webページの表示速度を上げることができます。

CSS スプライトを使用する際のデメリットは、

• 通常のimgと違って、リピート表示させることが難しい。
• バックグラウンドに利用するので、ユーザビリティ的に推奨されているalt属性が使えない。
• 更新の際に、画像サイズが変わったりすると、CSSそのものを書き直す必要があって面倒。

CSS スプライトのサンプル

CSSのbackgroundプロパティ指定サンプル

右の画像「css_sprites.png」から、表示させる
画像部分の座標をbackgroundプロパティで指定します。サンプルcssは「PDF」と書かれた画像に対して。

.csssp5	{
  width: 28px; /*画像の幅*/
  height: 16px; /*画像の高さ*/
  background:
  url(../img/css_sprites.png); /*画像のパス*/
  background-repeat: no-repeat;
  background-position: -88px -35px; }

画像の左上起点にして、右へ（x軸方向）88px、
下へ（y軸方向）35pxが取り出す画像の開始点。

css_sprites.png 個別に取り出した画像

CSS スプライトを利用したロールオーバーボタン

バックグラウンド画像

半透明のPNGをベースに利用し、バックグラウンドの色を変えて表現しています。オンマウスの時に、PNGのポジションを切り替えているため、これもCSSスプライトの一種と考えられています。
このボタンの詳しい説明はCSSでロールオーバー（３）へ

しかし、こちらの場合は、同じ半透明のPNGをベースにしていますが、ポジションを切り替えをするための複数の画像を一枚のPNGに収めていないので、CSSスプライトとは呼ばれません。