2012/03/19

Tag :

CSSスプライトでサイトを高速化

ロールオーバーを円滑にしてくれるCSSスプライトについて、いまさらながらメモる。そもそも、CSSスプライトとはなにかというと、ロールオーバ時とそうでない時の2パターンの画像をひとつにまとめて、CSSでポジションを指定することによりロールオーバーを表示させるCSSのテクニック。ひとつのロールオーバーだけだと2画像が1画像になるだけなので、それほどメリットはないが、複数のロールオーバーの画像をまとめることでより効果があります。画像の数を減らすことにより、サイトの表示を速めることもできます。
自分的には、2画像でロールオーバーを実装した場合、ロールオーバー時にその画像を読み込むため一瞬白くなるのが嫌いなので、ロールオーバーに画像を使う場合はCSSスプライトを使っております。

では、サンプルとして一つの画像でロールオーバーを三種類作ってみます。

まず、画像を用意。

サンプルでは、ボタンの大きさを「150px x 60px」にしたので、それを基準に
・ ロールアウト時(通常時)
・ ロールオーバーその1
・ ロールオーバーその2
・ ロールオーバーその3
をまとめて画像を作成します。

html

<ul class="sample">
	<li><a class="BottomLeft">Sample 1</a></li>
	<li><a class="TopRight">Sample 2</a></li>
	<li><a class="BottomRight">Sample 3</a></li>
</ul>

css

ul.sample{
	_zoom: 1;
	overflow:hidden;
	}
	ul.sample li{
		float: left;
		margin-right: 10px;
		}
		ul.sample li a{
			width: 150px;
			height: 60px;
			display: block;
			background: url(images/css_sprite_sample.jpg);
			cursor:pointer;
			text-align:center;
			line-height: 60px;
			}
			ul.sample li a.BottomLeft:hover{
				background-position:left bottom;
				}
			ul.sample li a.TopRight:hover{
				background-position:right top;
				}
			ul.sample li a.BottomRight:hover{
				background-position:right bottom;
				}

 

Leave a Reply

Back to Top