[CSS]CSS Spritesに利用できる画像置換の実装例いろいろ

複数の画像を一枚にまとめて、スタイルシートで背景画像として指定するCSS Spritesに利用できる画像置換の実装例の紹介です。

画像置換する際には、CSSオフ時・画像オフ時・印刷時・音声ブラウザ対応・空タグ使用などを考慮する必要があります。

備考

コードは、参考サイトからサイズ指定などを変更しています。
画像置換元は、全てH3要素になっています。
H3は、テキスト(見出しのテキスト)もしくは画像(印刷用の見出し画像)です。
ブラウザに「背景画像」が表示されていれば、期待通りの動作です。
使用している画像は、次の通りです。
名称は、Revised Image Replacementを参考にしています。

サンプル:01 -Classic FIR

<h3 id="sample01"><span>見出しのテキスト</span></h3>

#sample01{
	width:300px;
	height:50px;
	background:url('bg-01.gif') no-repeat 0 0;
}
#sample01 span{
	display:none;
}

サンプル:02 -Single-pixel <img> Replacement

デモページ

<h3 id="sample02"><img src="dot_blank.gif" alt="ダミー画像：オルトには見出しのテキストを記述" /><span>見出しのテキスト</span></h3>

#sample02{
	width:300px;
	height:50px;
	background:url('bg-01.gif') no-repeat 0 -50px;
}
#sample02 span{
	display:none;
}

サンプル:03 -Radu Method

デモページ

<h3 id="sample03">見出しのテキスト</h3>

#sample03{
	width:2300px;
	height:50px;
	background:url('bg-01.gif') -100px -100px;
	margin-left:-2000px;
}

サンプル:04 -Leahy/Langridge Method

デモページ

<h3 id="sample04">見出しのテキスト</h3>

#sample04{
	width:300px;
	padding:50px 0 0 0;
	overflow:hidden;
	background:url('bg-01.gif') no-repeat 0 -150px;
	height:0px !important;
	height/**/:50px;
}

サンプル:05 -Phark Method

デモページ

<h3 id="sample05">見出しのテキスト</h3>

#sample05{
	width:300px;
	height:50px;
	overflow:hidden;
	background:url('bg-01.gif') no-repeat 0 -200px;
	text-indent:-1000em;
}

サンプル:06 -Phark Revisited

デモページ

<h3 id="sample06">見出しのテキスト</h3>

#sample06{
	width:300px;
	height:50px;
	background:url('bg-01.gif') no-repeat 0 -250px;
	text-indent:-99999px;
}

サンプル:07 -Dwyer Method

デモページ

<h3 id="sample07"><span>見出しのテキスト</span></h3>

#sample07{
	width:300px;
	height:50px;
	background:url('bg-01.gif') no-repeat 0 -300px;
}
#sample07 span{
	display:block;
	width:0;
	height:0;
	overflow:hidden;
}

サンプル:08 -Gilder/Levin Metho

デモページ

<h3 id="sample08"><span></span>見出しのテキスト</h3>

#sample08{
	position:relative;
	width:300px;
	height:50px;
}
#sample08 span{
	position:absolute;
	width:100%;
	height:100%;
	background:url('bg-01.gif') no-repeat 0 -350px;
}

サンプル:09 -Lindsay Method

デモページ

<h3 id="sample09">見出しのテキスト</h3>

#sample09{
	width:300px;
	height:50px;
	background:url('bg-01.gif') no-repeat 0 -400px;
	font-size:1px;
	color:white;
}

サンプル:10 -Shea Enhancement

デモページ

<h3 id="sample10" title="見出しのテキスト"><span></span>見出しのテキスト</h3>

#sample10{
	position:relative;
	width:300px;
	height:50px;
}
#sample10 span{
	position:absolute;
	width:100%;
	height:100%;
	background:url('bg-01.gif') no-repeat 0 -450px;
}

サンプル:11

デモページ

<h3 id="sample11"><img src="heading-print.gif" alt="印刷用の見出し画像" /></h3>

#sample11{
	width:300px;
	height:50px;
	background:url('bg-01.gif') no-repeat 0 -500px;
	text-indent:-99999px;
}

サンプル:12

デモページ

<h3 id="sample12"><img src="heading-print.gif" alt="印刷用の見出し画像" /></h3>

#sample12{
	width:300px;
	height:50px;
	background:url('bg-01.gif') no-repeat 0 -550px;
}
#sample12 img{
	visibility:hidden;
}

サンプル:13

デモページ

<h3 id="sample13"><a href="#">見出しのテキスト<span></span></a></h3>

#sample13{
	width:300px;
}
#sample13 a{
	width:300px;
	height:50px;
	display:block;
	position:relative;
	cursor:pointer;cursor:hand;
}
#sample13 span{
	width:100%;
	height:100%;
	background:url('bg-01.gif') no-repeat 0 -600px;
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
}

サンプル:14

デモページ

<h3 id="sample14"><a href="#"><img src="heading-print.gif" alt="印刷用の見出し画像" /></a></h3>

#sample14{
	float:left;
}
#sample14 a{
	width:300px;
	height:50px;
	background:url('bg-01.gif') no-repeat 0 -650px;
	display:block;
	text-decoration: none;
	cursor:pointer;

}
#sample14 a img{
	overflow:hidden;
	width:0;
	height:0;
	text-indent:-99999px;
}