新・見出しに画像を使いたい

CGとかFLASHのサイトを作っているなら、ページのタイトルがテキストと罫線だけなんてありえませんよね？
凝ったフォントとデザインで、目を引くタイトル画像を入れたくなります。
でも、CSSでページを作るって決めたら、見出しはテキストで示さないといけません。

方法としては、HTML上はテキスト、CSSで背景画像として画像を指定するわけですが、問題は、画像を見せてテキストを見せない方法をどうするか？　です。
通常なら、画像とテキストが重なって表示されてしまいます。
（↓こんな感じ）

考えられる方法は
1.　テキストを小さく、または背景と同色にして隠す。
2.　テキストの位置を画面外に指定する
3.　テキストの上に画像を重ねる

まず、1.は、最近、検索エンジンが不正な方法として認識するようになってきました。
この方法でテキストを隠していることが検索ロボットに解析されると、不正にアクセス向上を図っているサイトとして、検索結果の順位を下げられてしまうのです。

また、1.　と　2.　は、ユーザがブラウザの設定で画像表示をオフにしている場合、見出しを見ることができません。（表示の高速化のため、画像表示をオフにしている人は意外に多いものです）

これに対し、3.　の方法は、画像表示をオフにすると下のテキストを見ることができます。
マウスで選択もできるのです。

そこで、3.　の方法を実現する方法を紹介します。
これは「スタイルシートスタイルブック」という書籍で紹介されている方法です。

まず、H1 のCSSです。

h1 {
font-family: "ＭＳ ゴシック", "Osaka－等幅";
font-weight: bold;　（←見出しらしい大きさ、ウェイト、色を指定する）
font-size: 20px;　（←見出しらしい大きさ、ウェイト、色を指定する）
color: #000000;　（←見出しらしい大きさ、ウェイト、色を指定する）
margin: 10px;　（←テキストが画像からはみ出さないように）
height: 50px;　（←タイトル画像の大きさに合わせる）
width: 400px;　（←タイトル画像の大きさに合わせる）
}
h1 span {
background-image: url(title.jpg);　（←タイトル画像）
background-repeat: no-repeat;　（←繰り返さない）
position: absolute;　（←絶対位置指定）
top: 0px;
left: 0px;
height: 50px;　（←タイトル画像の大きさ）
width: 400px;　（←タイトル画像の大きさ）
}

そして、HTMLで次のように指定します。

＜Ｈ１＞＜ＳＰＡＮ＞＜／ＳＰＡＮ＞見出しのテキスト＜／Ｈ１＞

（↓結果）

カラクリがお分かりになるでしょうか？
H1タグ内に置いた SPANタグに画像を指定することで、テキストの上に画像が重なります。
H1の背景ではなく、H1の中にある、SPANという別の要素の背景として画像を指定しているので、テキストの上に重なるわけです。

SPANタグの代わりに他のタグを使っても同じことができると思いますが、他のタグではデフォルトで表示に何らかの影響を及ぼしますので工夫が必要です、SPANタグを使うのが一番簡単です。

SPANタグの位置指定には position : absolute を使っています。
これを使うと、画面上のH1の位置を正確に割り出して位置を決めなければならないのではないか？　と思われる方がいるかもしれませんが、そんな必要はありません。
H1は、画面上のどこにあっても大丈夫です。
なぜなら、absolute は、親要素の位置から自分の位置を割り出すからです。
つまり、親要素である H1 の位置から自分の位置を割り出すので、

position : absolute、left = 0px、top = 0px

で、H1の左上に正確に画像が重なります。

画像表示をオフにしている場合も、レイアウトが崩れることなく見出しに位置にテキストが表示されます。
（↓実際は違いますが、こんな感じです）

注意点としては、

・H1タグの width、height指定を画像と同じにしておくこと
・画像は透過GIFにしないこと

です。

もうひとつ、注意点があります。
Macintosh版IE では、H1につづく段落にfloat属性が指定されていると、テキストが見えてしまうというバグがあるようです。（詳細は未確認です）

----------

ただ、この方法がいつまで正当な方法として通用するかは私にはわかりません。

今回は、いつまでも過去の技術に頼らず、常に情報を収集することがとっても大事なんだと痛感させられました。