（11）文字サイズを縮小したら背景画像が切れてしまった！

■11
テクニック54

文字サイズを縮小したら背景画像が切れてしまった！

→ 背景画像に合わせて「最低の高さ」を確保しておこう

たとえば画像をリストマーカーとして使用する際、本来はliststyle-imageプロパティで指定すべきなのだが、デザイン再現上の理由から背景画像として配置するケースはよくあることだ。

ところが1行に収まるような短い文章の背景に画像を配置していると、行の高さが画像よりも低くなったときに欠けて表示されてしまう。IEの初期状態（文字サイズ「中」）では問題がなくても、文字サイズを「最小」に変更した途端に欠けることもあるので要注意だ。

これを防ぐには、該当のブロックにあらかじめmin-heightプロパティを使って「高さの最小値」を指定しておけばよい。ただしmin-heightプロパティはIE 6で無視されてしまうため、ちょっとした工夫が必要となる。

JavaScriptのライブラリを使う方法もあるが、ここでは「Min-Height Fast Hack」と呼ばれるシンプルな方法を紹介する。
文＝千貫理子（KICKS Web）


文字サイズ「中」での表示


文字サイズを「最小」にしたら背景画像の下部が切れてしまった


赤字の部分に、確保したい「高さの最小値」（画像の高さ）を記述する


min-heightプロパティ適用後は、文字サイズにかかわらず背景画像の高さを保持している

　　



本記事は『web creators』2008 vol.74からの転載です
月刊『web creators』掲載記事号の情報はこちら！>>>