Sample
画像置換を用いた見出しの表示サンプル (Firefox 3.5)
実際に動くサンプルは コチラ にあります。
CSS オン、画像表示の環境なら大抵のブラウザで問題なく表示されると思います。
(X)HTML 文書の中には文字列で書いておいて、ブラウザでの表示時には CSS により画像に置き換える手法 ―― いわゆる画像置換を用いて見出しに画像を用いる方法です。
画像の置換方法ですが、置換を行う要素の ::before 擬似要素に、CSS の content プロパティで画像を設定するという方法をとっています。 要素の width、height を画像のサイズに合わせておくことで、元の文字は画像に押し出されて表示領域外に出て行きます。 画像が非表示設定の場合は押し出されずに文字が表示領域に残ります。
また、content プロパティを使えない Internet Explorer の 6 や 7 に対しては、list-style-image プロパティを利用した方法で対応しています。
実際に動くサンプルは コチラ にあります。
CSS オン、画像表示の環境なら大抵のブラウザで問題なく表示されると思います。
ソースコードの説明は準備中です。 サンプルから動作を読み取っていただければと思います。
| Firefox 3.5 | 期待通りの動作 |
|---|---|
| Firefox 3 | 期待通りの動作 |
| Opera 10 | 期待通りの動作 |
| Opera 9.6 | 期待通りの動作 |
| Safari 4 | 期待通りの動作 |
| Safari 3 | 期待通りの動作 |
| IE8 | 期待通りの動作 |
| IE7 | 期待通りの動作 |
| IE6 | 期待通りの動作 |
| IE5.5 | このままでは期待通りには動作しない. IE5.5 用の CSS を書くことで、似たような動作をさせることが可能. ただし画像非表示の場合に何も表示されない. また、もともと画像置換を行わないような CSS を書くことも可能. 好みで選択. |
| NetFront (PSP 搭載ブラウザ) | 画像置換が行われない. 文字は表示され、通常通りリンクとして機能 |
モダンブラウザでは問題なく表示されます。 IE6 と IE7 も対策をしていますので一応期待通りの動作をします。
古いブラウザや機能が限定的なブラウザでは画像置換が行われない可能性がありますが、その場合でも文字が表示され、問題なくブラウジングできると思います。