CSSスプライトで画像を円滑に表示させる

CSSスプライト

CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます。以前よりYoutubeなどに使用されているので、その名前を一度は聞いたことがあるかもしれません。ここではCSSスプライトを使用したメニュー画像の作り方を紹介します。


CSSスプライトを使うデメリット

メリットは上記にあるとおり、サイトの高速化が期待できます。ではデメリットとは?

  • alt属性が使えない
  • 背景画像のリピート表示ができない
  • 更新する時に手間がかかる(サイズを変えるとCSSも変えなければいけないため)

以上をふまえて、私はいつもメニューの背景やボタンなど、マウスオーバー時に変化する画像のみCSSスプライトを使用しています。ということで、早速作ってみましょう!

CSSスプライトを使ったボタン画像の作り方

サンプル

サンプルボタン。こんな感じです。

See the Pen CSS sprite by Mana (@manabox) on CodePen.

1. 通常時の画像を作る

Photoshopを開いて、マウスオーバーする前の画像を作ります。サンプルの画像のサイズは横140px、縦40px。

マウスオーバー前の画像

2. マウスオーバー時の画像を作る

続いて、マウスオーバーした時に表示させたい画像を同じサイズで作ります。

マウスオーバー時の画像

3. 2つの画像をひとつにする

新規ファイルを開いて、横のサイズはそのまま、縦のサイズを2倍に設定。この場合は横140px、縦80pxに設定します。

2つの画像をひとつにする

実際に使う画像はこんな感じ↓。上に通常時の、下にマウスオーバー時の画像をそれぞれ配置します。

実際に使用する画像

4. HTMLコーディング

HTMLコーディングはいたってシンプル。aタグにクラスをつけ、CSSで背景画像を設定します。

<a class="sample_spritemenu" href="#">サンプル</a>

5. CSSコーディング

通常時では上半分(40px)のみ表示し、マウスオーバーすると下半分を表示するようCSSで設定します。

CSSスプライトの原理


  • display:block;を入れることで、画像全体がリンク範囲となります。
  • heightは画像の高さの半分の値。サンプルではpadding-top:10px;を使用しているため、画像の高さ(40px)からpadding-top(10px)を引いた値(30px)と設定されています。
  • background-position:left bottom;で、マウスオーバー時に下の画像が表示されます。
	a.sample_spritemenu{
		background: url(images/sprite-menu.jpg);
		width:140px;
		height:30px;
		display: block;
		cursor:pointer;
		padding-top:10px;
		text-align:center;
		color:#fff;
		}

		a.sample_spritemenu:hover{
		background-position:left bottom;
		}

参考になれば幸いです!

シェアする

コメント