CSS Nite Vol.5と、画像置換について考えたこと

しごと場から会場が結構近かったので、CSS Nite Vol.5を見に行ってみました(実は前回も見に行ってたり)。いろいろと興味深い話を聞けました。

Vol.8のゲストは森田雄さん、Vol.10のゲストは神崎正英さんに決定したそうで、今後も楽しみにしてます。

* * *

さてそのCSS Niteの中で、鷹野さんにより画像置換《image replacement》についてのプレゼンテーションがありました。ここでの画像置換というのは、HTMLでは文字《テキスト》になっている部分を、スタイルシートにより画像に置き換えて表示させる技術のことです。spanタグを間に入れて display:none; としてみたり、或いは text-indent:-9999px; とかしたりするアレです。その利点と欠点を(自分なりの解釈で)述べてみると、以下のようになるでしょうか。

利点
HTMLから(装飾のための)画像情報を分離できる。
欠点
ブラウザをスタイルシート有効・画像無効に設定した場合、テキストが読めない。

プレゼンテーションでは、画像置換には利点も欠点もあることを述べつつ、img要素を使ってもalt属性により代替テキストを提示できることから、アクセシビリティの観点からは「画像は使ってもいいんです」という意見を紹介し、「どちらかというと敬遠される方向」ということで、やや否定よりな感じでまとめられていました。

ただ、画像に情報としての意味がある場合(写真とかグラフとか)であればimg要素を使うことに否やはないのですが、装飾的な画像、例えば見出しに入れるサイト内共通のロゴ画像とかは、できればスタイルシートで指定した方がよいように思うのです。その方がHTML文書もすっきりしますし。

そこで、なぜ現状の画像置換に問題があるかを考えてみたところ、

  1. 現状の画像置換では、テキストを背景画像と置き換える必要がある。
  2. 背景画像のみを見せるには、その前面に表示されるテキストを隠す必要がある。

ということではないかと思いました。

であれば、背景画像ではなく前景画像、つまりテキストより更に前面に表示させる画像を指定するようなスタイルシートのプロパティ、言うなれば foreground-image があれば良いのでは、と思い至りました。これなら、テキストを消す手間をかけることなく画像に置き換えて表示できそうだし、また画像無効の環境でも代替となるテキストを表示できそうです。

同じことを考えた人が他にいないかと探してみたところ、HTMLayoutという(Windows用の?)HTMLレンダリングコンポネントを見つけました。これはforeground image関連のCSSプロパティを独自に実装しているようです。Demo applicationsでは、背景画像 + テキストのボタン画像に、半透明部分のある前景画像を重ねて表示するデモを見ることができます。

* * *

……というようなことをつらつらと考えつつ、CSSに foreground-image があるといいんじゃないかなと思い始めた昨日の夜でありました。

追記(2006年2月17日)

Motohikoさんによると、CSS3ではcontentプロパティが拡張され、通常の要素にも適用できるようになるとのこと。なるほどそちらの方が良さそうですね。しかもテキストからテキストにも置き換えられるとはすごい。