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
画像置換に関する考え方
画像置換に関する考え方 WEB標準からみるに最近では、画像置換に関して、『alt属性が必要な画像はimg要素で記述』『alt属性必要でない画像は画像置換を使う』という考えが主流になりつつあるようです。 どういうことかというと、『text-indent:-9999px』の記述は避けるべきだろうとの考えからだと思います。 なぜ、このような考え方にいたったのでしょうか？ 画像置換の利点・欠点など複数の視点から画像置換について考察していきたいと思います。 なぜ画像置換という技術が普及したのか? 画像置換が重宝されているのは JavaScriptを使わずにロールオーバーを実装することが可能な為であります。 これによりJavaScriptがOFFの環境でもロールオーバーを体感することが可能になりました。 画像置換の欠点は? CSSでテキストを非表示にして背景画像を表示している為、CSSがONで画像の表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://yluurnia.blog57.fc2.com/blog-entry-123.html