CSSの画像置換についてコメントまとめ

以前書いた画像置換に関して、はてなの方でもいろいろとコメントをいただいたので、気になるものをピックアップしてみました。

・yakonyan：<span></span>はない…
・sac3937：前半言ってる事はわかるけど<span></span>っていうのは生理的に嫌な感じ。と思ったらそういう人も多いみたいで安心。
・chaperatta：CSSの画像置換で、画像OFFのときに文字が消えない方法（だけど空タグを使うのがあまり納得できない？？
・urajima：text-indent:-9999pxは確かに使いたくないがかといって空タグはもっと使いたくないなぁ、もうちょっと他の方法探してみよ。
・makitani：んで空タグを推奨ってのは変でないかい？
・monochromebox：何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。
・rusica：「画像置換」は必須別に必須ではないと思う。それと空のspan要素はありえない。
・webmugi：<span></span>はやっぱり気持ちよくない

いろんな意見がありますが、やはり空のspanへの嫌悪感が強いみたいですね。確かに空のspanは文法的にも間違ってるし、気持ち悪いのは確かです。

・infoblog：”「CSS有効で画像は非表示」で見ている環境”の人もいるんだろうけど、希少なケースだと思われるので、正直切り捨てていいと思われる。画像置換はよく使っているので禁じ手になるとキツい。
・kits：「欠陥」を重大と捉えるかどうか。携帯端末に対してはmedia属性で振り分け可能では。

また、「CSS有効で画像は非表示」というのは携帯電話だけでなく回線の遅いモバイルPCなども考えられるので、携帯用のCSSのみでは対処しきれない場合もあるのでは、と思いますがどうなんでしょう。

・leva：コメントで指摘されているとおり、img要素+補完CSSでの対処が無難ですね。
・masakanou：普通にimg要素使いますが。
・retlet：Image Replacement について云々。使いたい場合は空span要素で画像を被せましょうという話。小規模サイトだと普通にimg要素使った方がメンテナンスしやすかったりするけどね。
・monochromebox：何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。
・kana-kana_ceo：もう、おとなしく、img と alt でいいんぢゃないの？
・inazuma2073：携帯用CSSを用意すればいいんじゃないかな。空のspan使うくらいならimgでいきたい

テキスト要素を「画像」として表示したいのであれば、imgタグを使えばいい。これは文法的にも何も間違ってはいないというか、これが本来の使い方です。これはもうほんとにおっしゃる通り。

画像置換を採用すべきかどうかは、その長所と短所をしっかり踏まえたうえで、慎重に検討されるべきです。コンテンツとして有意な画像、文字情報を含んでいる画像については、CSS側から表示を制御するよりも、img要素として（適切なalt属性値とともに）マークアップしたほうが、アクセシビリティ的には好ましいでしょう。（画像置換という手法 | Web標準Blog | ミツエーリンクス）

それでも現状では画像置換を使用せざるを得ない場合もあるのではと思っています。SEO最優先だったり、短納期で素材が決まらず枠組みだけ先に作るみたいな場合とか（制作者サイドの泣き言ですかね…）。

とりあえず「text-indent:-9999px」や「dispay:none」はアクセシビリティに問題がある、Guilde/Lebin Methodは、空のspanがhtmlの文法的におかしい、など手法の問題点を十分把握しておかなければ、と思ってのエントリーではありました。

・hxxk :before擬似要素を用いる手法（拙著内にて解説）では、「CSS有効で画像は非表示」でも情報が伝えられます。IE様が対応していないという関係でまだまだ最適解ではないのですが。/もしくは素直にimg要素でマークアップ。

hxxkさんの「:before擬似要素」を使うという手法ですが、IEが対応してないんですよね。実際には以下のようなソースになるのかと。ソースはシンプルで済みますね。

h6:before {
content:url(ir_test.gif);
display:block;
}
h6{
width:150px;
height:50px;
overflow:hidden;
}
<h6>SITE TITLE</h6>

結局正解なのはimgを使えってことなのかもしれませんが、よりよい最適解があるのならば探していきたいですね。「実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips」はまだ未読ですが勉強のために読んでみようかなと思います。

実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips

posted with amazlet on 07.03.20

市瀬 裕哉 福島 英児 望月 真琴
九天社 (2007/02)
売り上げランキング: 910

Amazon.co.jp で詳細を見る