はじめに
こんにちは、クラスメソッド株式会社の野中です。
HTTPリクエスト削減テクニックの紹介に入り、前回の『リクエスト数削減テクニック1：インラインイメージ編』では、インラインイメージについて紹介しました。本記事では「CSS Sprite」の基本的な知識と使い方、使いどころについて解説します。すでに定番のテクニックとなっていますが、何となく使っていることが多いと思います。初学者の方にも理解していただけるよう詳しく解説します。
対象者
対象者は主にコーダー、フロントエンドエンジニアです。
デザインとコーディングを合わせて担当するWebデザイナーも対象です。
- コーダー・フロントエンドエンジニア
- Webデザイナー
- Webディレクター
- Web担当者
CSS Spriteとは
Webサイトではアイコンやナビゲーションなどに多くの画像が使われ、サイトによっては20個30個とたくさんのアイコンが使われています。これらの画像を一つ一つリクエストしていると同時接続数の制限によりブロックされるため、遅延の原因です。CSS Spriteは複数の画像を1つにまとめて配信することで、リクエスト数を大きく削減できるテクニックです。
CSS Spriteで使われる、いくつかの画像を1つにまとめたものをSprite画像と呼びます。代表的なSprite画像の例は、Youtubeで使われているこちらの画像でしょう。
CSS SpriteはこのようなSprite画像を背景画像とし、CSSを使って一部分だけ見せるテクニックです。
1. CSS Spriteの仕組み
初学者向けにCSS Spriteの仕組みについて、もう少し詳しく解説したいと思います。分かりやすいように、ナビゲーションイメージを用意しました。
このナビゲーションは1つのボタンが横幅160pxに縦幅85pxです。
このボタンはマウス操作によって反応させたいので通常・マウスオーバー・クリック・現在の場所を表す4つの違ったスタイルを用意します。6つのボタンに4つのスタイルがあり6×4=24個の画像が必要になります。CSS Spriteを使わない場合、24回のHTTPリクエストが行われるわけですが、少ない数字ではありませんね。このような画像にCSS Spriteのテクニックを使えば、1回のリクエストにまとめられるというわけです。
この24個の画像を1つのSprite画像にまとめたものが、以下の画像になります。
このSprite画像は、CSSプロパティのbackground-imageとbackground-positionを使って表示位置を制御します。
下記の図のようにSprite画像の左上を始点に、表示したい要素の左上を終点として背景画像の移動距離を計算します。
この始点からの移動距離がbackground-positionの座標です。
2. 高精細ディスプレイ（Retina Display）の場合
昨今、スマートフォンの普及に伴い、PCの表示よりスマートフォンへの対応を優先することも多いと思います。
高精細ディスプレイに対応させるには、基本的な仕組みは同じですが気をつけるポイントが2つあります。
- 高精細ディスプレイに対応する高解像度画像を用意する
- background-sizeプロパティを使い背景画像の表示サイズを指定する
background-sizeとは、背景画像を任意の表示サイズにするためのプロパティです。
このプロパティを指定することで、Sprite画像の座標指定を解像度を意識する必要がなくなります。
3. CSS Spriteの作業と流れ
実際に1つの要素に対してCSS Spriteを使う場合、主な行程は以下のとおりです。
-
Sprite画像の作成（高精細ディスプレイの場合は解像度ごとに作成します）
- Sprite画像化する画像を選定する
- Sprite画像用のデザインファイルを作る
- 個々の画像の配置場所を考える
- それぞれの座標をメモする
- Sprite画像を書き出す
-
CSSの指定
- background-imageプロパティにSprite画像を指定する
- background-positionプロパティで座標指定を行う
-
Retinaディスプレイの場合（オプション）
- Media Queriesを使い、デバイスサイズに合わせた背景画像を指定する
- background-positionプロパティを使い、背景画像のサイズを指定する
実際にやってみると分かりますが、これを手作業で行うのはとても手間がかかります。後ほど簡単に紹介しますが、CSS Spriteを自動化できるツールを活用した方が良いでしょう。
