[CSS]CSS Spritesに利用できる画像置換の実装例いろいろ
Post on:2008年3月28日
sponsors
複数の画像を一枚にまとめて、スタイルシートで背景画像として指定するCSS Spritesに利用できる画像置換の実装例の紹介です。
画像置換する際には、CSSオフ時・画像オフ時・印刷時・音声ブラウザ対応・空タグ使用などを考慮する必要があります。
備考
- コードは、参考サイトからサイズ指定などを変更しています。
- 画像置換元は、全てH3要素になっています。
H3は、テキスト(見出しのテキスト)もしくは画像(印刷用の見出し画像)です。 - ブラウザに「背景画像」が表示されていれば、期待通りの動作です。
- 使用している画像は、次の通りです。
- 名称は、Revised Image Replacementを参考にしています。
サンプル:01 -Classic FIR
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample01"><span>見出しのテキスト</span></h3> </textarea> |
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> #sample01{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 0; } #sample01 span{ display:none; } </textarea> |
サンプル:02 -Single-pixel <img> Replacement
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample02"><img src="dot_blank.gif" alt="ダミー画像：オルトには見出しのテキストを記述" /><span>見出しのテキスト</span></h3> </textarea> |
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> #sample02{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -50px; } #sample02 span{ display:none; } </textarea> |
サンプル:03 -Radu Method
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample03">見出しのテキスト</h3> </textarea> |
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="css" cols="60" rows="5"> #sample03{ width:2300px; height:50px; background:url('bg-01.gif') -100px -100px; margin-left:-2000px; } </textarea> |
サンプル:04 -Leahy/Langridge Method
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample04">見出しのテキスト</h3> </textarea> |
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> #sample04{ width:300px; padding:50px 0 0 0; overflow:hidden; background:url('bg-01.gif') no-repeat 0 -150px; height:0px !important; height/**/:50px; } </textarea> |
サンプル:05 -Phark Method
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample05">見出しのテキスト</h3> </textarea> |
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="css" cols="60" rows="5"> #sample05{ width:300px; height:50px; overflow:hidden; background:url('bg-01.gif') no-repeat 0 -200px; text-indent:-1000em; } </textarea> |
サンプル:06 -Phark Revisited
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample06">見出しのテキスト</h3> </textarea> |
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="css" cols="60" rows="5"> #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250px; text-indent:-99999px; } </textarea> |
サンプル:07 -Dwyer Method
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample07"><span>見出しのテキスト</span></h3> </textarea> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<textarea name="code" class="css" cols="60" rows="5"> #sample07{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -300px; } #sample07 span{ display:block; width:0; height:0; overflow:hidden; } </textarea> |
サンプル:08 -Gilder/Levin Metho
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample08"><span></span>見出しのテキスト</h3> </textarea> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<textarea name="code" class="css" cols="60" rows="5"> #sample08{ position:relative; width:300px; height:50px; } #sample08 span{ position:absolute; width:100%; height:100%; background:url('bg-01.gif') no-repeat 0 -350px; } </textarea> |
サンプル:09 -Lindsay Method
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample09">見出しのテキスト</h3> </textarea> |
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="css" cols="60" rows="5"> #sample09{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -400px; font-size:1px; color:white; } </textarea> |
サンプル:10 -Shea Enhancement
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample10" title="見出しのテキスト"><span></span>見出しのテキスト</h3> </textarea> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<textarea name="code" class="css" cols="60" rows="5"> #sample10{ position:relative; width:300px; height:50px; } #sample10 span{ position:absolute; width:100%; height:100%; background:url('bg-01.gif') no-repeat 0 -450px; } </textarea> |
サンプル:11
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample11"><img src="heading-print.gif" alt="印刷用の見出し画像" /></h3> </textarea> |
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="css" cols="60" rows="5"> #sample11{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -500px; text-indent:-99999px; } </textarea> |
サンプル:12
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample12"><img src="heading-print.gif" alt="印刷用の見出し画像" /></h3> </textarea> |
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> #sample12{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -550px; } #sample12 img{ visibility:hidden; } </textarea> |
サンプル:13
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample13"><a href="#">見出しのテキスト<span></span></a></h3> </textarea> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<textarea name="code" class="css" cols="60" rows="5"> #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; } </textarea> |
サンプル:14
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h3 id="sample14"><a href="#"><img src="heading-print.gif" alt="印刷用の見出し画像" /></a></h3> </textarea> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<textarea name="code" class="css" cols="60" rows="5"> #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; } </textarea> |
参考サイト
sponsors
