Stylesheet Stylebook - サポート & コミュニティーサイトをOperaで見ていたら、あれれ、と不思議に思いました。普段はタイトル画像なのに、画像表示をoffにすると、"Stylesheet Stylebook"というテキストのタイトルが表示されます。
調べてみると、CSSか画像表示をoffにすると、テキストが表示されて、両方ともonにすると、タイトル画像が表示されるようです。アクセシビリティのことを考えると、テキストの表示はないと困りますし、このやり方なら、CSSの実装が不十分だったりなかったりするPDAや携帯電話でもうまくいきそうです。便利そう。
さっそく、HTMLのソースをのぞいてみると、
<h1 class="logo"><span></span>Stylesheet Stylebook</h1>
とあります。CSSのファイルを見ると、h1をposition: relativeにし、一方、h1 span（h1要素内のspan）ではposition: absoluteにし、大きさを指定して、背景画像を指定していました。こうすることで、文字の上に画像をかぶせているようです。
同じようなことがどれくらいできるのか、実験してみました。
まずひとつめ。上でかかれたことが実際にできるかどうか、やってみました。ソースはリンク先のファイルを直接見てみてください。
[ひとつめの実験]
WindowsのIEやOperaではうまくいくようです。CSSか画像表示をoffにすると、"画像でタイトル"というテキストになり、CSSと画像表示が両方onだと、"画像でタイトル"と書かれた背景画像がテキストを覆い隠します。h1要素のフォントサイズは、画像からはみ出ないように、ピクセル（px）で指定しています。
次に、テキストタイトルが、下のp要素内に書かれたspanの背景画像でかぶせることができるかどうか、がふたつめです。
[ふたつめの実験]
同じように、うまくいくようです。画像を貼るためのspanはどこにおいてもいいようですね。
ここまでは、空span（中に何もテキストを書いていないspan）を使っていました。空spanはちょっと気持ち悪いなあ、と思い、今度は、下のp要素をdivでくるみ、そのdivにposition: absoluteを指定し、背景画像を書いてみました。divには、タイトル画像の大きさだけ、padding-topを指定しています。
[みっつめの実験]
あ、divにwidthを指定していないため、IEなんかで見ると画像が途切れてしまっています。適宜、width="100%"のように指定しましょう。
[よっつめの実験]
これで、HTMLのソースも比較的気持ち悪くなく、かつ、h1要素のテキストの上に画像を貼り付けることができました。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/53
NN4対策してませんでしたね、ボロボロでした。
自分用メモ：IE6ではなんでもabsoluteにすればいいのではなく、うまくいかない場合がけっこうある。原因特定できず。
初めまして。興味津々な内容で楽しく拝見していますが、各実験のソースでpositionのスペルミスを発見したとき、特に問題なく画像が被さって表示をしているのでrelativeにする理由は何だろう？と疑問に思い投稿させて頂きました。
ご指摘ありがとうございます。どういうときにうまくいかなくなるのか、まだよくわかっていないのですが、スペルミスしたのにうまくいっているところを見ると、少なくとも今回のサンプルではrelativeにする必要はなさそうですね。恥ずかしいので消しておきます（笑）
面白いですね。自分のサイトでもやってみようと思ったのですが、ふと気になったことが・・・。これって、検索エンジンスパムに該当しませんでしょうか？ 恐らく大丈夫なんでしょうが、画像もスタイルシートも見られるようにしているユーザーには見え方と内容が違うわけですし。気にしすぎですかね。
ありがとうございます。検索エンジンスパムとして悪用は可能です。http://adp.daa.jp/archives/000194.html でも書きましたが、検索エンジンスパムかどうかは一概には言えない例だと思います。空のspanはあやしいですが、後半のやり方ならば、機械的に判断するのは難しいと思います。もちろん、悪用しましょうといっているわけではないです。
ここでわざわざ背景画像にする理由は何でしょうか？
の上にをかぶせても同じような気がしますが・・・。
あ、ちょっとミスしました。
「見出し」の上に「img画像」をかぶせても、ってことです。
ご質問ありがとうございます。img要素を上にかぶせる場合、(1)alt属性に何を記述するか (2)SEO的には背景画像のほうが有利 (3)携帯電話対応を考えるとやらないほうがいい という点に気をつける必要があります。逆に、（IE6の基本設定で）印刷したときにロゴが出てほしい、というときには、背景画像を使うと印刷されないので、img要素を上にかぶせたほうがいいです。