ここ最近、ホームページのレイアウトは流行？のXHTML + CSSで行うことに努めている。 それを行うことのメリットはいろいろあって省略しますが、とにかくこの業界は今、そうみたい。 だからといって何でもそうすりゃいいのかと言えば、そうではないけれど。
今回よくあるサイトのレイアウトをXHTML + CSSでやってたんだけど、 画像ボタンを背景画像にして、テキストをtext-indext:-5000pxとかあり得ない設定にしてテキストを隠してしまう方法がよく使われてるんですが、
このやり方だと、Windows版のIE5.0..では背景画像も消えてしまう。 アクセス解析なんかで調べると、以外と使われてるんですよ、Win版IE5.0。
そこでうちにあったCSSレイアウトの本で調べると、それに対する対応策みたいなのが載ってました。
例えば・・・
<div id="button">
<h1>ここはボタン</h1>
</div>
上記が基本形として、<div>タグ部分が画像ボタンにしたい場合、スタイルシートは、
#button {
width:200px;
height:50px;
background-image: url(img/button.gif);
background-repeat: no-repeat;
}
#button h1{
text-indent:-5000px;
}
と、やってましたが、
<div id="button">
<h1><span></span>ここはボタン</h1>
</div>
と<span>の空タグ？を追加してやり、スタイルシートでは、
#button {
width:200px;
height:50px;
position:relative;
}
#button h1 span {
width:100%;
height:100%;
position: absolute;
background-image: url(img/button.gif);
background-repeat: no-repeat;
}
と、こんな風にやるんです。結局<span>タグの背景画像で文字を覆い隠す感じなんです。
だからMacのブラウザでテキストを拡大すると画像のしたから「こんにちは」状態ですが、Winは文字を固定するとブラウザでもいらえないのでま、い〜か！ということになります。
しかし、この方法にも欠点がありました！
それは・・・
ボタンなので、やっぱりリンクを貼るんですが、
<div id="button">
<h1><a xhref="next.html"><span></span>ここはボタン</a></h1>
</div>
スタイルシートは、
#button {
width:200px;
height:50px;
position:relative;
}
#button h1 a{
width:200px;
height:50px;
display:block;
}
#button h1 span {
width:100%;
height:100%;
position: absolute;
background-image: url(img/button.gif);
background-repeat: no-repeat;
}
こうやってリンク貼っても、Mac IE5だけリンクしないんですわ。ブラウザの下のステータスバーにはリンク先だけ表示されるんですが・・・とほほですわ。
そこで、いろいろ調べて遂に発見しましたっ！・・・（次回につづく）