[CSS]背景画像を使用しないCSSスプライトのテクニック

サイト構築 -CSS

背景画像を使用せずに、img要素に直接配置した画像でCSSスプライトを実装するテクニックを紹介します。

CSS Sprites w/out Using Background Images
デモ

画像にマウスホバーをすると、表示画像が変わります。

右の画像にマウスホバーしたキャプチャ

デモでは上記の画像二つはimg要素で配置されています。

HTML

※簡略化しています。

<div class="affiliates">
	<a href="#"><img src="rokkan.gif" alt="" /></a>
	<a href="#"><img src="designcubicle.gif" alt="" /></a>
</div>

使用している画像（右）は、マウスホバー時とあわさった一枚の画像です。

使用している画像

CSSではCSSスプライトは背景画像の位置変更ではなく、「overflow: hidden;」を使用しています。

CSS

正確なwidthとheightの値が必要で、初期表示のために「margin-top」を使用します。

.affiliates a {
	width: 204px; height:182px;
	overflow: hidden;
	float: left;
}
.affiliates img {
	border: none;
}
.affiliates a:hover img {
	margin-top: -182px;
}

また、上記のものにCSS3のtransitionを使用し、スライドするエフェクトを加えたテクニックも紹介されています。
対応ブラウザはChrome, Safari, Operaで、Firefoxは4で対応予定です。

CSS3版のキャプチャ

CSS：CSS3版

スタイルシートは、L.8-11が追加された箇所です。

.affiliates a {
	width: 204px; height:182px;
	overflow: hidden;
	float: left;
}
.affiliates img {
	border: none;
	margin: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.affiliates a:hover img {
	margin-top: -182px;
}