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

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


↑私が10年以上利用している会計ソフト!

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;
		}

参考になれば幸いです!

シェアする

コメント

“CSSスプライトで画像を円滑に表示させる” への10件のフィードバック

  1. […] これにはいろんなやり方があります。以前書いたCSSスプライトもその一つ。今回は2枚の画像を使ったやり方を紹介します。まずはdivにマウスオーバー時に表示される画像を背景画像として指定。その中に通常時の画像を置きます。そしてvisibility: hidden;でマウスオーバーしたときに通常時の画像を隠します。 […]

  2. wat より:

    ちょっとややこしいですが、img要素を使ってできる方法もありますよ縲怐I
    自分も背景画像を使う方法しか知らなかったんですが、Googleのトップページ(検索バーの下にアイコンが並んでいた頃)のソースを見て発見しました。
    内容としては、img要素の親のa要素などにwidth、heightとoverflow:hidden、position:relativeを指定し、
    img要素にはposition:absoluteで画像の位置を指定します。img:hoverでマウスオーバー時の指定もしておきます。
    親要素のoverflow:hiddenがミソです。
    CSSの記述が若干多くなるのとIE6と7でa要素以外に:hover指定が効かない(csshover.htc等で対応可)のが難点ですが、オフレフトをしたくない場合にはオススメです。

  3. Webクリエイターボックス より:

    おお、そのやり方は知りませんでした!勉強になります!ありがとうございます!

  4. […] cssスプライトという方法を使います。簡単にいえば、オンマウスとオンマウスでない画像が二つくっついた画像を用意して、背景画像を変えるのではなく、背景の位置を変えてやります(Webクリエイターボックス様に詳しい解説あります)。 ※余談ですが、mixiのテンプレートはcssスプライトのオンパレードです。 […]

  5. Math-for より:

    タイトルのデザインを変えてみた。…

     GIMPで作った絵を使用。キーボードをイメージした。 CSSスプライトでホバー時に電源マークがオレンジになるようにした。サスペンド状態のつもり。 CSSスプライトに関してはこちらを参考にした。  うん、少しカッコよくなった。気がする。…

  6. […] 2011/04/10/ ねぎメモ Check軽量マウスオーバーであるCSSスプライトのまとめ。 やり方はWebクリエイターボックスの記事から教わりました。CSSスプライトとは何ぞや?という人は、ちゃんと元記事読んでください。 でもここに書いてあるやり方だけだと、なんだか自分自身わかりずらかったのでまとめてみました。まあやりやすい方でやってください。 CSSはこんな感じ […]

  7. […] 2011/04/10/ Web関連 Check軽量マウスオーバーであるCSSスプライトのまとめ。 やり方はWebクリエイターボックスの記事から教わりました。CSSスプライトとは何ぞや?という人は、ちゃんと元記事読んでください。 でもここに書いてあるやり方だけだと、なんだか自分自身わかりずらかったのでまとめてみました。まあやりやすい方でやってください。 CSSはこんな感じ […]

  8. […] ブラウザは画像の数に応じて、何度もリクエストを投げて繰り返し読み込みを行います。この回数が多いほど、時間がかかりますが、画像を一つにまとめておいて、CSSで画像を表示する範囲を操作することで読み込みを早くする技術をCSSスプライトといいます。 >> CSSスプライトについてあれこれ。 >> CSSスプライトで画像を円滑に表示させる […]

  9. […] CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス http://www.webcreatorbox.com/tech/css-sprite/ […]

  10. […] CSS Spriteの詳しいやり方についてはWebクリエイターボックスさんのCSSスプライトで画像を円滑に表示させるをご覧ください。 […]

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)