CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ

「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS

[kitokitoki]

非表示化

[vanish_l2]

蔵がＯＫというならＯＫな手法って認識だなー＞テキスト飛ばし

[uenoantenna]

うーん

[sakuragaoka]

<span></span>の気持ち悪さを我慢するか、画像offでCSSがonの環境を取るか・・のトレードオフってことなのかな。。

[t32k]

- Tags: #CSS

[tsukkee]

やっぱり空のspanタグがどうにもだめな気がする

[gaochao]

「text-indent:-9999px;」や「display:none;」で悩んだ時にはこれ

[webmarksjp]

css

[lordkf]

でも、このサイトは「-9999px」を使っている。

[miracle1998]

どっちがいいんだろぉ～？(>_<)

[Naoki1]

画像置換方法テクニック

[wims_Tea]

画像置換方法テクニック

[shinobine]

もう画像でaltのみにしろってことなのか…？

[suiii]

css 画像置換

[yoshiii]

「外枠のh5を画像のサイズにして、中身のテキスト部分の後ろに空のspanを埋め込み、それをblock要素にして背景画像を表示し、position: absoluteで外枠のh5の左上に合わせ、widthとheightを100%にして、略、かなりトリッキーな、」

[kurobuchi]

css表示で画像off時に出ないからか。かといって空spanも抵抗あるなぁ。

[irohiroki]

画像置換

[mrnoon]

「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥

[ludens-ken]

CSS Tips

[as365n2]

テキストのかわりに背景画像を見せる手法。CSS有効/画像非表示の場合、なにも出なくなってしまう。

[inopie]

[[CSS]display:noneやoff-leftの代わりになる手法

[rcorco]

なるほど・・・

[Luelue]

なるほど・・・

[mallowlabs]

ロゴを画像で置換する方法。賛否両論。

[minasera]

　やっぱ「-9999px」ってなんか嫌だよねえ。

[Trino-o-niku]

でゅはぁっ

[nshash]

コメントで指摘されているとおり、img要素+補完CSSでの対処が無難ですね。

[leva]

コメントで指摘されているとおり、img要素+補完CSSでの対処が無難ですね。

[yakonyan]

<span></span>はない…