今の時期、どしゃぶりの雨でせっかくのさくらが散ってしまう…。という寂しい思いより
花粉が流れ落ちてヤッホウ。という思いの方が強くなってしまいました、ioriです。
なんと恐ろしきかな花粉の威力。季節の情緒すらも奪い去ってしまうとは侮れません。
さて恒例？のCSSメモ。
今回はliの背景画像についてです。
■横並びリスト時にli背景画像を設定するならIE対策は必須。
WEBページを作っていると、リストの先頭に中黒点や黒丸（・や●）などがついたリストの制作なんてのに、わりと頻繁に出くわすと思います。
中黒点やら黒丸やらならリストタグがほぼデフォルトで持っているスタイルなのでCSSで味付けしなくても大丈夫ですが、例えばハートマークだったり、ヒゲッチ社長の顔アイコン
だったりするとさすがにCSSを使わないわけにはいきません。
リストの先頭飾りを画像にするのに私はいつもliに対して背景画像を指定するやり方を取っています。「list-style:」よりこちらの方が文章に対しての位置を調節しやすいかなと思います。
で。
リストが縦並びならそれほど問題はないんですが、（IEに関しては、liに背景を指定したリストをフロートさせると、背景画像がふと消えたり出てきたりと勝手気ままな動きをする事があるのでこの点は要注意）
display: inline
↑を使ってリストを横並びにさせる時は、幅との相談が絶対不可欠です。
一行に収まりきる時は大丈夫、でも途中改行される時は必ずIE対策を取りましょう。
IE8は未検証ですが、IE６と７に関しては、横並びリストの背景に画像指定をしていて且つそれが途中改行されている場合、設定した背景画像が行方不明になります。
途中改行されてる部分だけいなくなります、他は大丈夫。
これを解決するためには、IE6と７にこのおまじないをかけてあげると解決するようです。
「zoom: 1;」
zoomについての説明は後日に改めて。
横並びリスト（背景画像・改行あり）でお悩みの場合は是非このおまじないを口ずさんでみてください。なんとなくニュース番組のタイトルっぽくてかっこいい気がしなくもないです。あ、もちろん言うだけじゃなくて記述もしてくださいね。
コメントする