ウェブランサー

list-style-position - マーカーの表示位置を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 li要素 (display: list-item; が指定された要素)
継承 する

list-style-positionプロパティは、リストマーカーの表示位置を指定する際に使用します。リスト要素のボックスの領域に対して、マーカーを内側に含むか外側に出して表示するかをコントロールすることができます。

list-style-positionに与えられる値

list-style-position: inside;
マーカーがリスト内容の領域の内側に表示され、マーカーとマーカー以外の部分の高さが揃います。
list-style-position: outside;
マーカーがリスト内容の領域の外側に表示され、マーカー以外の部分がインデント(字下げ)された形になります。

list-style-positionの使用サンプル

CSS
.sample01 {
 list-style-type: disc;
 list-style-position: inside;
 list-style-image: url(images/sample_list_marker.png);
 margin: 0px 0px 10px 50px;
}
.sample02 {
 list-style-type: disc;
 list-style-position: outside;
 list-style-image: url(images/sample_list_marker.png);
 margin: 0px 0px 0px 50px;
}
XHTML
<ul class="sample01">
<li>リストサンプル01</li>
<li>リストサンプル02</li>
<li>リストサンプル03</li>
</ul>

<ul class="sample02">
<li>リストサンプル01</li>
<li>リストサンプル02</li>
<li>リストサンプル03</li>
</ul>
表示確認
  • リストサンプル01
  • リストサンプル02
  • リストサンプル03
  • リストサンプル01
  • リストサンプル02
  • リストサンプル03

list-style-positionに関連するCSSプロパティ

リスト(list)関連
list-style リストマーカーに関する指定をまとめて行う
list-style-image リストマーカーに画像を指定する
list-style-position リストマーカーの表示位置を指定する
list-style-type リストマーカーの種類を指定する
marker-offset リストマーカーとの間隔を指定する