letter-spacing を使って背景画像置換

CSS でテキストを画像に置換するテクニックとして、当サイトでは text-indent を使用していますが、「And all that Malarkey」で letter-spacing を使った方法「MIR image replacement」が紹介されていたのでメモ。

拙い英語力なんで、解釈間違っているかも知れませんが、例として以下の物を使い、「Movable Type 3.151-ja」の部分を画像にする場合として説明してみます。

<dl>
<dt>powered by</dt>
<dd title="Movable Type 3.151-ja">Movable Type 3.151-ja</dd>
</dl>

んでもって、実際にやってみた詳細とサンプルIE5 で見てもらえばわかるのですが、text-indent を使った方法だと、画像がうまく表示されません。一方、 letter-spacing を使った方は、IE5 でも問題なく画像表示されます。

And all that Malarkey で言われている、text-indent を使った場合にはいくつかのブラウザで水平スクロールバーが出てしまうってのは、いまいち分からなかったんですが、取りあえず IE5 にも対応させたいって場合は、「MIR image replacement」を使ってみても良いかもしれませんね。ちなみに、こういった「image replacement」って、日本では一般的にはどう言う呼称なんでしょう、背景画像置換?

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/193

パソコンのページ - 画像の置き換え (2007年7月10日 21:06)

CSSでテキストを画像に置き換える という技術 (すでに2004年ごろから公開されている技術です) text-indent:-9999pxとか使... 続きを読む

Comments

Neo said:

初めまして、Neoと言います。
これからも宜しくお願いします。

こちらはWinXP・IE6なのですが、
「MIR: Malarkey Image Replacement」の方を見ると、
バナー画像の上に「M」の字が乗っかっています。
これは、ブラウザのバグなのでしょうか?

e-luck said:

Neo さん、はじめまして。
ご報告ありがとうございます。
僕の環境 XP SP2 では見えないですねー。
Neo さんも SP2 でしょうか?
つか、関係ないか…

Neo said:

はい、私もSP2です。
解像度の問題なのでしょうか。私は1024×768です。
見えるのは私だけなのでしょうか…?
何か怖いですなぁ(笑)

今発見しました。
文字を「大」か「最大」にすると見えなくなります。
また、文章をドラックしたりすると、中途半端に消えたりしています…

e-luck said:

あー、見えました(笑)
ウィンドウサイズを広げたりすると、消えたりもしますねー。
結構、バギーな感じですね。
昨日までは全然見えていなかったのに、一回見えたら、キャッシュをクリアしようが、毎回見えるようになりました(笑)
And all that Malarkey では、引き続きテストを行っていて、これに関して新たな記事を書くらしく、それに期待した方が良いかも知れませんね。

Neo said:

あら、見えましたかww
新しい記事が楽しみですね。

あや said:

e-luckさん、はじめまして!
かなり昔の話題のようですが検索で見つけて、興味深く拝見しました。
でもやっぱりうちのIE6だと最初の1文字が表示されてしまい、ダメでした…、
それで調べてたら、こんなのが出てきたんですが↓
http://www.skyzyx.com/archives/000123.php
いかがでしょうか??
私はあんまり英語に長けてないんですが(苦笑)、
このページは検証しながら順を追って書いてるようなので、
一番最後に示されてるコードでやってみました。
まだ詳しく検証してないですが、
とりあえずWin IE6,Opera7.53,Mozilla1.7.3, Mac IE5で見てみたら平気でした。
お時間のあるときに試してみてください!☆

e-luck said:

あや さん、情報ありがとうございます。
後で見させて頂きますね。