2007年07月06日

テキストと画像の置き換え

今回は、htmlで書いたテキストを画像に置き換える方法をご紹介します。


このテクニックは、グローバルナビやサイドメニューなどに使用されている
ロールオーバー画像の実現にも大きく関わるものです。
いかにテキストの表示を消すかがポイントです。

私からは、下記の3パターンご紹介させていただきます。

display:noneを使用するパターン
positionを使用するパターン(off-left)
text-indextを使用するパターン(おすすめ)
 
「display:noneを使用するパターン」
(htmlコーディング)
<div class="substitution01">
<span>テキスト</span>
</div>
(cssサンプル)
.substitution01 {
width:140px;
height:56px;
background-image:url(images/back.gif);
}
.substitution01 span {
display:none;
}
この方法は、テキストをdisplay:noneすることで
見えなくする方法ですが、
substitutionにdisplay:noneをつけると
画像自体が消えてしまうため、
テキストをさらにspanなどで囲む必要があります。

また、音声ブラウザなどの音声環境に対応しておらず、
読まれなくなってしまうようです。

アクセシビリティの観点からも、あまりおすすめはできませんが、
テクニックとして知っておくと使う機会があるかも知れません。
 
「positionを使用するパターン(off-left)」
(htmlコーディング)
<div class="substitution02">
<span>テキスト</span>
</div>
(cssサンプル)
.substitution02 {
width:140px;
height:56px;
background-image:url(images/back.gif);
}
.substitution02 span {
position:absolute;
left:-9999px;
}
この方法は、テキストをpositionで画面外に移動させ、見えなくする方法です。
最初にご紹介したdisplay:noneを使ったパターンと違い、
こちらは音声環境にも対応しているようです。

ですが、こちらの方法もsubstitutionに直接指定すると、
画像自体が消えてしまうため、 テキストをさらにspanなどで囲む必要があります。

このテクニックは「off-left」と呼ばれています。
 
「text-indextを使用するパターン」
(htmlコーディング)
<div class="substitution03">
テキスト
</div>
(cssサンプル)
.substitution03 {
width:140px;
height:56px;
background-image:url(images/back.gif);
font-size:1px;
line-height:1px;
text-indent:-9999px;
}
この方法は、テキストをtext-indentで画面外に出してしまい、見えなくする方法です。

この方法だと、テキストのみを画面外へ出すため、
substitution自体はその場に残ります。
よって、今までの方法の様にテキストをspanなどで囲む必要がなく、
htmlのソースはすっきりします。

ただし、テキストをbrタグで改行すると、
改行した後のテキストは表示されてしまうので、ご注意ください。
こちらも音声環境に対応しているようです。
 
テキスト置換のテクニックひとつ採り上げてみても、方法は数パターンあるものですね。
今回の例の3パターンを見てみると、

display:noneを使用
   ↓ 音声環境に対応
positionを使用
   ↓ 無駄なタグ(span)を省きたい
text-indentを使用

という、cssコーディングの進歩の過程を勝手に想像し、

「見知らぬ先輩方、ありがとう。
私も、新たなテクニックを生み出せるよう、精進します。」

という気持ちになります。
私だけですか?

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 17:24 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。