Oddwit

FIRというテクニックがもてはやされたのは少し前のことだ。これは<h1>などの文字要素を、見た目をキレイにしたいがためにCSSを使って画像に置き換えるテクニックだ。音声読み上げソフトに読まれない、画像がOFFのときにまったく何も表示されないなどの問題を抱えていたためいくつかの派生版が登場した。

今回紹介するのは、そのような派生版のひとつだ。

僕の知る限りすべての派生版に共通して言えることは、CSSをOFFにすると画像が出ないということ。ロゴなどの画像ならばCSSのOn/Offに関わらず表示させたい場合もあるはずだ。

そこでこのプチテクの登場。

特徴

• CSSのOn/Offに関わらず画像が表示される
• CSSがOnの場合は文字が隠れる
• 音声読み上げOK
• z-index を使う

サンプル
→サンプル

HTMLコード

<div id="header">
    <h1>
        <a href="index.html">
            <img src="logo.jpg" id="mir_cover" alt="ロゴ" />
            Image Replacement
        </a>
    </h1>
</div>

CSSコード

#header { height:60px; position:relative; }

h1 { height:60px; width:300px;
       /* \*/ overflow:hidden; /* */ }

h1 a   { position:absolute; top:0px; left:0px; z-index:1; }
#cover { position:absolute; top:0px; left:0px; z-index:2; }

簡単に言うと画像とテキストを並べて置き、画像をずらして文字の上に重ねるだけだ。

まずロゴを包括する要素に position:relative を指定する。これによって、その中で position:absolute を指定したときの基準位置が #header の四隅になる。

次に h1 だが、これは画像と同じ幅・高さを指定しておく。overflowは文字が画像の下から見えてしまわないようにするためだ。なお、MacIEでoverflow関連のバグがあり、要素がまったく表示されなかったりするらしいので、MacIEにだけ読ませないようハックしてある。

最後に h1 a と画像 #cover を重ね合わせてできあがり。

こういうテクニックを扱っているサイトを見ているとHTMLに手を加えずに実現するのが良いことだとされているようだが、残念ながらこのやり方ではその嗜好にはそぐわない。CSSが無効なときにどうこうしようという趣旨だからそこは勘弁してほしい。

関連リソース
アクセシビリティを更に高めるFIR
背景画像の上にテキストリンクを載せるFIR。

Image Replacement Tests
CSS画像置換テクのサンプルがイパーイ。

Image replacement decision grid
CSS画像置換テクの比較表。