Greensleeves 2.0 / Archive / 2007-03 / 140158

たとえば h1 要素にロゴ画像を表示させたい場合、ただ CSS の background-image プロパティにロゴ画像を指定したのでは、テキストがロゴの上に被さって邪魔になってしまいます。かといって h1 要素は SEO 等を行う際、重要な位置を占めるタグなので中身に img 要素を使うのもなんだかもったいない気がする。

そこで CSS の Tips の一つに要素内のテキストを画像に置き換える（置き換えているように見せる）方法を使ったりするわけですが、僕の知ってる限り、やり方には幾つか方法があります。それを少しまとめてみました。

---

text-indent -9999px を使う方法

単純明快。背景画像を設定して、文字をブラウザ窓の遥か彼方まで吹き飛ばす方法。

(X)HTML

<p class="text-indent">text-indent で置き換えるよ。</p>

CSS

p.text-indent {
   width: 300px;
   height: 85px;
   text-indent: -9999px;
   background: url(img/logo.png) no-repeat left top;
}

• text-indent -9999px を使う方法 のサンプル

しかしこれには欠点があって、仮に画像オフで見た場合吹っ飛んだテキストは当然表示されません。つまりその場合閲覧者が h1 要素の中身を見ることが出来なくなってしまいます。

z-index を使う方法

テキストのレイヤーを一番下まで下げて見えなくする方法。

(X)HTML

<p class="z-index"><span>z-index を使うよ。</span></p>

CSS

p.z-index {
   width: 300px;
   height: 85px;
   background: url(img/logo.png) no-repeat left top;
}

p.z-index span {
   position: absolute;
   z-index: -1;
}

• z-index を使う方法 のサンプル

欠点は text-indent を使用したときと全く一緒。画像を OFF にしても中身は見えません。

::before 擬似要素を使用する方法。

Lucky bag::blog: :before 疑似要素を使ってテキストを画像に置換で詳しく述べられています。これなら画像 OFF でもちゃんと閲覧できるのですが、一部ブラウザ（シェアは大部分）で置換されません。

空の span 要素と z-index を使う方法

span 要素のレイヤーを最上面に上げ、親要素の幅いっぱいに広げて、そこに背景画像を指定する。当然画像 OFF だと透過するので下のテキストが見える。という寸法です。

(X)HTML

<p class="span_and_z-index"><span></span>span と z-index を使うよ。</p>

CSS

p.span_and_z-index {
   position: relative;
   width: 300px;
   height: 85px;
}

p.span_and_z-index span {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   background: transparent url(img/logo.png) no-repeat left top;
}

• 空の span 要素と z-index を使う方法のサンプル。

これなら、画像 OFF でも要素の中身のテキストは見えます。しかし、Strict 厨としては空っぽの要素入れるなんて何か負けた気がする。だけど javascript で span 要素を挿入すればこれはこれでありなのかなぁ・・・？

こうやってまとめて見ると、現在 CSS のみで画像置換を行おうとすると、ある程度 Strict から外れるか、アクセシビリティとバーターか、もしくは一部（シェアでは大部分）ブラウザの切捨てを行うことでしか実現できないんですね。うーむ。