国民宿舎はらぺこ 大浴場

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

↑このサイト、tb も飛ばせないしコメントも書き込めないので言及するのも正直バカバカしいのだが。←とか書きつつダメモトで tb 飛ばしたらエラーにならなかった。慌てて訂正 ((((((((((((/;^^)/

外枠のh5を画像のサイズにして、中身のテキスト部分の後ろに空のspanを埋め込み、それをblock要素にして背景画像を表示し、position:absoluteで外枠のh5の左上に合わせ、widthとheightを100%にしてh5の要素を被ってしまうというかなりトリッキーなことやってますね。一応ほとんどのブラウザに対応。問題としては、MacのIEだけ文字を拡大すると画像からはみ出てしまうのと、背景が透明な画像は使えないことぐらいかと。後は空のspanが気持ち悪いってところが難点だが、アクセシビリティの問題は解決している。

前回言及したときにも感じたことだが、この人とおいらの HTML に対する基本的なスタンスは、どうやら相容れないようだ。あるいは Web デザイナーという職に属する人というのは得てしてこのような考え方になってしまうものなのだろうか。もちろん、それでも多用なケースでの利便性や SEO 的な観点に関心を寄せられるだけマシだと考えるべきなのかもしれないが。

そもそも、タイトルなどの heading として画像を見せたいのであれば、素直に <img> タグを記述すべきなのだ。それなのに、多くの人が、タイトルに画像を使用するために、スタイルシートを用いて、背景画として設定しようとする。そこがまず間違いなのだ。

なぜ背景画として設定したがるのか?

ブログツールなどでは、ブログタイトルに HTML タグを指定できないのが一般的である。しかし、CSS は自由に弄れることが多いので、CSS を利用して画像を見せちゃおう、ということになった。で、それが流行って広まっていくうちに、気がついたら heading の画像は背景画として設定、が常識になってしまった。

つまり、動機自体がそもそも tricky であり、bad know-how なのである。最初からブログツールがタイトルに代替画像を使用する機能を備えていたならば、こんな回りくどいインチキテクが流行ることなどありえなかったはずだ。

SEO を心配する声もあるかもしれないが、キミタチはそんなに Google を信用できないのか? と問いたい。alt 属性を適切に設定していれば、検索ロボットはそこに記述されたフレーズを適切に扱ってくれるだろう。仮に今はそうでは無いにしても、記述様式として十分に普及すれば Google だってそれに対応せざるを得なくなるはずだ。

heading 要素に <img> 要素を含めることは許されるのか?

まったく問題ない。仕様勧告を見れば分かるとおり、heading 要素は配下に 0 ないし複数の inline 要素を含むとしている (もちろんXHTML においても同様 - DTD を参照せよ)。そして inline 要素には special 要素として <img> 要素も含まれている。

では、どう書くべきなのか?

当然、以下のように書けばよい。

<h1>    <!-- 記事タイトル -->
  <img src="(画像のURI)"
       alt="(記事タイトル)"
       width="(横幅)" height="(高さ)" />
</h1>

超簡素なサンプルと、このサンプルを、画像を表示しない設定にした各種ブラウザで表示した結果の画像を用意した。それぞれに個性が認められるのが面白い。IE ではタイトルの文字自体は小さく表示されてしまうので強調表現としてはいまいちだが、画像が存在する場合の配置レイアウトを忠実に再現してくれると言う利点もある。Gecko (Firefox) は代替テキストをそのままテキストとして表示してくれる。テキストと同様にコピペすることも可能 (ちなみに Firefox では普通に画像が表示されている場合でも、画像を含む文章をコピーしてテキストエディタに貼り付けると、画像があった場所に代替テキストをそのまま挿入してくれる)。Opera は見た目は Firefox に似ているが、操作上はあくまで画像としての扱いになっている。

Firefox や Opera などにおいて配置が崩れるのを心配するならば、それこそ CSS を用いて配置を厳密に設定すればよいのである。