list-style-position

list-style-positionは、リストマーカーの位置を指定するスタイルです。

解説

リストマーカーの表示位置をリスト領域の内側か外側のどちらに表示するかを指定できます。

構文は以下になります。

list-style-position: 値;

list-style-positionには以下の値が指定できます。

値	説明
outside	リスト領域の外側にリストマーカーを表示する（初期値）（例）list-style-position:outside;
inside	リスト領域の内側にリストマーカーを表示する（例）list-style-position:inside;

太字の値は初期値です。


.sample01 {
  list-style-position:inside;
}


<ul class="sample01">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

分かりやすくするため、liタグに枠線を表示しています。


.sample01 {
  list-style-position:outside;
}


<ul class="sample01">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

分かりやすくするため、liタグに枠線を表示しています。