【list-style-position】リストマークの表示位置を指定

list-style-positionプロパティでは、リスト項目のマーク(マーカー)の表示位置を指定することができます。 マークの表示位置はリスト項目のボックスに対する位置となります。

値にoutsideでマークをリスト項目のボックスの外側、insideで内側に配置というように、リスト項目のボックスのどの位置に表示するか指定します。

書式

  • list-style-position : ……… リストのマークの表示位置を指定

★:outside、inside、inherit

outside
マークをリスト項目のボックスの外側に表示します。(初期値)
inside
マークをリスト項目のボックスの内側先頭に表示します。

使用した時の例

.sample1 {list-style-position: outside;}
.sample2 {list-style-position: inside;}

li {background:#F48282;}
<ul class="sample1">
  <li>outside(ボックスの外側に配置)</li>
  <li>outside(ボックスの外側に配置)</li>
  <li>outside(ボックスの外側に配置)</li>
</ul>

<ul class="sample2">
  <li>inside(ボックスの内側先頭に配置)</li>
  <li>inside(ボックスの内側先頭に配置)</li>
  <li>inside(ボックスの内側先頭に配置)</li>
</ul>

ブラウザ上の表示例

  • outside(ボックスの外側に配置)
  • outside(ボックスの外側に配置)
  • outside(ボックスの外側に配置)
  • inside(ボックスの内側先頭に配置)
  • inside(ボックスの内側先頭に配置)
  • inside(ボックスの内側先頭に配置)

※リスト項目のボックスの領域が分かりやすいように、liに背景を設定しています。

対応ブラウザなどのデータ

初期値 outside 値の継承 継承する
適用可能な要素 li,「display:list-item」が指定されてる要素(ul,olに対し指定した場合は、内容のliに継承)
メディア visual / list
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報