背景に画像を使った例。一見、問題なさそうでも…… 背景色(#990000)と文字色(#CC0000)のようにとても似た色だと、リンク部分の文字色(青色または紫色)も背景色がこの色ではとても読みにくいでしょう。
次の問題点があります。
背景画像の読み込みが完了するまでは、文字が読めない。 背景画像が読み込まれなかった場合は、文字も読めないまま。 上記の場合、使っている背景画像が445KBあります。 そこそこファイルサイズの大きな画像です。 高速回線を使って閲覧している方々はあまり気にならなかったかもしれませんが、表示完了までには少し待ち時間が必要です。 その間、ボックス内の文字はさっぱり読めません。 このように、「文字が表示されているのに読めない」という状態は、閲覧者をイライラさせてしまうでしょう。
画像の読み込みが完了するまでは文字も読めない……という事態を防ぐためには、背景画像と同時に背景色も指定しておきましょう。 背景画像と同時に背景色を指定していれば、たとえ画像が表示されなくても、見せることができます。
背景色として淡い黄色(#FFFFCC)を指定したなら、画像が表示されるのを待たなくても、文字を読むことができます。
背景画像と同時に背景色を指定するには、スタイルシートで以下のように記述します。 例えば、※画像ファイルが「bksakura.jpg」で、背景色を淡い黄色(#FFFFCC)にしたい場合。 background-image: url("bksakura.jpg"); background-color: #FFFFCC;
背景画像を指定する background-image プロパティと同時に、背景色を指定する background-color プロパティも使って背景色を指定しておくだけです。 このように並べて記述しておけば、背景画像が表示されるまでの間は、指定した背景色が表示に使われます。
※背景画像が表示された後でも、画像内に透過部分があれば、そこには指定した背景色が使われます。また、背景画像の表示領域を限定するよう記述した場合は、背景画像のない領域にも背景色が使われます。
猫の手 代表 高室(たかむろ)
|