問2 CSSスプライト

CSSスプライトは、複数の画像を1つのファイルにまとめる仕組みのこと。画像の読込み回数を減らし、Webページの表示速度の向上が期待できるよ。

例えば、50pxの正方形を2つ表示する場合、2枚の画像ではなく1枚の画像を用意する。

上の画像を使って、CSSスプライトの実装をしてみたよ。

See the Pen Untitled by ねこたろう (@neko03) on CodePen.

background-imageプロパティにURLを渡すことで、画像を表示している。

widthとheightで画像の表示範囲を指定している。

background-positionプロパティで表示位置を指定している。つまり、「square1」の「background-position : 0px 0px ;」は、左から0px、上から0pxを表示するという意味になる。同じように、「square2」の「background-position : 50px 0px ;」は、左から50px、上から0pxを表示するという意味だよ。

そのため、複数の画像を1つのファイルにまとめる、Webページの表示速度の向上が期待できる、表示位置の調整はbackground-positionプロパティで行うの3つが正解。