【レスポンシブWebデザイン】CSSスプライト

CSSスプライトとは

• サイトの表示を高速化するために使われるテクニックの１つ
• 複数の画像を1つにまとめて背景画像とし、CSSで表示位置を指定することによって表示する
• 画像ファイルをまとめることで、サーバへのリクエスト回数をへらすことができる
• ファイルサイズが大きいため、繰り返し使用するアイコンやボタンに向いている

実装方法

background-positionプロパティで表示位置の設定を行う。

1つ目の値が水平方向、2つ目の値が垂直方向の位置を指定する。