【初心者向け】CSSスプライトとはなんのこと？

ざっくりですが、ページ内で使用する複数の画像をまとめ、CSSで表示を調整することで、HTTPリクエスト数の軽減させるテクニックのことを言います。

CSSスプライトを使ってみる
まとめ

CSSスプライトを使ってみる

それぞれ、仕様が違いますが、すべてCSSスプライトを使っています。確認してみましょう。

hover｜背景の移動
hover｜imgの移動
アニメーション

hover｜背景の移動

ホバーしたら背景画像が入れ替わる仕様にしてみます。その際使う画像は1つです。

ペンギンをみる
シロクマをみる

仕組みと図解

各リストの後ろに疑似要素でスペースをつくり、背景位置を移動させています。

幅を考え画像を作成する。

今回は、幅101px高さ103pxの画像｜隙間があるので少し大き目

見えているエリアを指定する。


<div id="penginkuma">
	<ul class="flex">
		<li><a href="#">ペンギンをみる</a></li>
		><a href="#">シロクマをみる</a></li>
	</ul>
</div>

divにid名でpenginkumを使いました。

続いてCSSです。CSSスプライトとは関係ない装飾については省略しています。
疑似要素で画像がみえるエリアを作成したあとに、hoverの指定をしています。


#penginkuma li a::after{
	content: "";
	display: inline-block;
	width: 45px;
	height: 50px;
	vertical-align:bottom;
	background: url(penginkuma.png) no-repeat;
}
#penginkuma li:first-child a::after{/*ペンギンのエリア背景位置*/
	background-position: 0 0;
}
#penginkuma li:first-child a:hover::after{/*hover時のペンギンのエリア背景位置*/
	background-position: 0 -50px;
}
#penginkuma li:last-child a::after{/*シロクマのエリア背景位置*/
	background-position: -47px 0;
}
#penginkuma li:last-child a:hover::after{/*hover時のシロクマのエリア背景位置*/
	background-position: -47px -50px;
}

cssスプライトのイメージ
hoverされた時ペンギンのエリアは、このように動いています。基準は画像左上となります。
background-position: x方向（右へ） y方向（下へ）;の指定となり、マイナス値ではそれぞれ左、上への移動となります。

hover｜imgの移動

次は、背景としてではなくimg要素として入れてみます。imgで入れることでリンクバナーとしても活用できます。今回はおためしということで、画像を少し明るくして入れ替わったことがわかる様にしています。

仕組みと図解

仕組みは先ほどの背景と同じく、みえるエリアを指定し、overflow:hidden;でその他を見えなくしています。
画像についても背景で使う時同様に見えるエリアを考え作成します。

<div id="banner">
		<a href="リンク先"><img src="bannerAll.jpg" alt="リンクバナー"></a>
</div>

素材バナー画像

今回は画像600px×1200px1つ用意しました。600px×600pxのバナーを想定

続いてCSSです。


#banner {
  position: relative;　基準とする。
  overflow: hidden;	エリア外を隠す。
  width: 600px;
  height: 600px;
}
#banner img {
  position: absolute;
}
#banner img:hover {
  bottom: 0;
}

親のdivに対してposition: relative;で基準とし、みえるエリアをバナーサイズの600px×600pxにしています。
子のimgをposition: absolute;とし、hover時に、bottom: 0;で下に用意した画像を見えるように動かしています。
今回はabsoluteを使いましたが、translateを使って動かしてもよいと思います。

アニメーション

アニメーションを１つの画像でやってみましょう。素材を作るのは面倒ですが、仕組みは単純です。

仕組みと図解

コマ撮りのアニメーションのような動きに見えますが、１枚の画像を横に動かしているだけです。

１コマ幅を考え、使いたいコマ数の幅で画像を作成する。

今回は、1コマ幅90px高さ165pxが18コマ分｜幅1620pxの画像
見えているエリア（クラスpoo）を１コマ分のエリアに指定する。
```
<div class="poo"></div>
```
divにクラス名でpooを使いました。複数の場所に同じアニメーションを入れるためにクラスを使っています。
続いてCSSです。幅、高さの指定のあとに、アニメーションの指定をしています。
アニメーションについては、HTMLの教科書285ページ参照。CSSスプライトとは関係ない装飾については省略しています。
```
.poo {pooさんがみえるエリア
    width: 90px;
    height: 165px;
    background: url(画像へのパス) no-repeat;
    animation: アニメーション名 3.5s steps(18) infinite;
} 
@keyframes アニメーション名 {
to {background-position: -1620px 0;}
}
}
```
このようにbackgroundが-1620px左方向に移動しているだけです。
右へ動かす場合は正の値にするとよいでしょう。縦画像の場合は上下移動なので、Y軸方向への移動と変わります。

まとめ

最後まで見ていただきありがとうございました。
CSSスプライトは昔の手法ではありますが、サイトに何度も出てくるような「アイコン」や「アニメーション」などにCSSスプライトを使用することで、画像の読み込みを減らし、サイトの読み込みが速くなるので効率的に使うことができます。
デメリットとしては、サイズ変更や更新の際に手間がかかります。変更がかからない素材などに使ってみるといいかもしれませんね。