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

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

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

備考

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

サンプル:01 -Classic FIR

デモページ

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

デモページ

サンプル:03 -Radu Method

デモページ

サンプル:04 -Leahy/Langridge Method

デモページ

サンプル:05 -Phark Method

デモページ

サンプル:06 -Phark Revisited

デモページ

サンプル:07 -Dwyer Method

デモページ

サンプル:08 -Gilder/Levin Metho

デモページ

サンプル:09 -Lindsay Method

デモページ

サンプル:10 -Shea Enhancement

デモページ

サンプル:11

デモページ

サンプル:12

デモページ

サンプル:13

デモページ

サンプル:14

デモページ

参考サイト

top of page

©2017 coliss