リストマークの位置

2009/11/21 2022/04/04

【パソコン】【パソコン】［ＦＡＱ］ 0 0

リストマーク

リストマークに画像を指定する場合､設定方法は２つある｡

（１）list-style-imageプロパティでリストマークに画像指定する方法
（２）backgroundプロパティでリストマークに画像指定する方法

リスト内容が複数行に亘って表示される場合､リストマーク画像の位置が
ズレる事がある｡その場合は（２）の指定方法を使うと調整出来る｡

参考サイト：msn相談箱リストに指定したマークの位置がずれてしまいます

（１）の形式
書式：list-style-image: url(画像URL);
list-style-positionプロパティ（outside,inside）の指定は出来るが
これは先頭マーカーとリスト内容の位置関係を指定する場合に使用する｡
・ outside … マーカーがリスト内容の領域の外側に表示され､
　マーカー以外の部分がインデント（字下げ）された形になる｡
・ inside … マーカーがリスト内容の領域の内側に表示され､
　マーカーとマーカー以外の部分の高さが揃う｡

（２）の形式
書式：background: url(画像URL) no-repeat **px **px;
１．リストの既定マークを表示しないようにする為､<ul>タグの
　list-style-type プロパティに none を指定する｡　　　　

ul{
　list-style-type:none;
　}

２．表題の書式で画像指定
　no-repeat は画像は1度表示するだけで繰り返さない指定
　px は画像が表示される領域の左上からの距離を横方向と縦方向の順で指定
３．今回のポイント画像位置の調整
　リスト項目の行数（高さ）と画像の大きさに合わせ位置調整するのに
　padding-left プロパティを設定する｡

《最終的な設定例》　　　