| 整理されていない |
危険度：★★ |
03 リストマーカーと個条書きのバランスが悪いのを解決
文＝境祐司
個条書き（リスト定義）は、ul要素、li要素でマークアップするだけで、リストマーカーが表示され、周辺に適度な余白を確保してくれる。商用サイトなどは、他の要素と見栄えをそろえるため、リストマーカーを画像で表現する場合が多い。list-style-imageプロパティで簡単に指定できるが、ブラウザによってはテキストとズレてしまうことがある。項目とのずれを避けるためには、list-style-imageではなく背景画像として表示させよう。
【1】まず、「ul { list-style:none; }」でリストマーカーを非表示にする。続けて「ul li { background: #fff url（navi_icon.gif）left center no-repeat; }」で背景画像を指定。その他、バランスを整えたり、ユーザビリティを高めるために余白やロールオーバーの処理などを指定する。
XHTML
【2】リストマーカーの画像表示は、装飾目的なのでXHTMLには要素を追加しない。その際、classなどは必要に応じて加えてもよい。
CSS
【3】list-style-imageプロパティで、「list-style-image:url(icon.gif);の」ように記述して画像を指定すると、簡単に表示できる。しかし、上図のようにずれてしまうことがある。
［INDEX］
●整理されていない
>>> 03 リストマーカーと個条書きのバランスが悪いのを解決
>>> 04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決
●やぼったい
>>> 33 表の背景がきれいに表示されないのを解決
>>> 34 写真を入れると文章が読みにくいのを解決
●平凡でつまらない
>>> 41 長方形のボックスにインパクトが足りないのを解決
>>> 42 枠にとらわれたデザインになるのを解決
●メリハリがない
>>> 75 画像とテキストの上辺の位置がそろわないのを解決
>>> 76 テキストリンクがパッとしないのを解決
