2008年12月25日

背景画像の設定について

Merry Christmas!
溝上です。

今回は、以前ご紹介した「ロールオーバー画像の実現方法」の内容を詳しく掘り下げていこうと思います。

前回のロールオーバー画像の実現方法を紹介した際のCSSサンプルはこのようになっています。
(cssサンプル)
.rollover02 a {
display:block;
width:126px;
height:28px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
text-decoration:none;
outline:none;
}
この方法はリンクテキストをボタンのように表示する以外にも、テキストの背景を画像にしてタイトルとして表示するなどの応用方法もあり私もよく使います。

ただ、このサンプルでは指定している内容が多いと感じられるのではないでしょうか。
私も

「なぜfont-sizeを1pxにしているんだろう?」

とか

「line-heightに1pxを指定しているには何かわけがあるのだろうか」

などと疑問に思いました。
そこで先輩社員に聞いてみたところ、

指定している内容が多い理由はブラウザ対応の為

と答えが返ってきました。

例えばfont-sizeを1pxにしている理由はInternet Explorerでの表示崩れの対応だといわれ、
さっそくサンプルを作ってみました。

(cssサンプル)
.title {
display:block;
width:455px;
height:15px;
background:url(images/title.gif) no-repeat left top;
font-size:20px;
text-indent:-9999px;
text-decoration:none;
outline:none;
}
▼Internet Explorerの場合▼

Internet Explorer

▼FireFoxの場合▼

FireFox


Internet Explorer6でサンプルを確認して見たところ、二つのタイトルの間に空きが出来ています。
FireFoxではぴったりとくっついていることが確認できました。

これはInternet Explorerでは指定したheightよりフォントが大きくなるとボックスの大きさを調整してしまうからとのことでした。
line-heightも同じ理由でheight以上の数値になるとボックスが大きくなり、下に空きができてしまいます。

もしタイトルやリンクのテキストを画像化した際、paddingやmarginをつけていないのに空きが出来てしまっている場合などは一度font-sizeを確認されると、解決するかもしれません。
 

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 19:56 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。