CSS3: list-style-position プロパティ - リスト・マーカーの表示位置

■ 概要

項  目説  明
記述形式 セレクタ {list-style-position: }
値 の形式 insidehangingoutside
初 期 値 outside
対応ブラウザー C1+ / e4+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 <ul>, <ol>, <li> などのリストアイテム要素
display プロパティの値が list-item である要素)
継  承 する

■ 解説

list-style-positionプロパティ は,リスト・マーカーの表示位置 を指定します。

指定できる値の形式は,以下のとおりです。

説  明
inside ::marker 擬似要素 は リスト項目のボックスの中で ::before 擬似要素 の直前に置かれたインライン・ブロック要素になり,それに要素のコンテンツが続きます。
hanging リスト項目またはその子要素の最初のテキストまたは空白(significant whitespace)の直前に ::marker 擬似要素 が置かれることを除いて,inside と同様です。 マーカーにリスト項目が ぶら下がった形 になります。
outside ::marker 擬似要素 の静的な水平位置が,マーカーの終端をリスト項目の親要素の開始端に揃えるように決められることを除いて,hanging と同様です。 (初期値)

■ 使用例( list-style-position プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
   div.sample {
      width: 20em;
      margin: 10px;
      padding: 5px;
      border: 2px solid #8c8c8c ;
   }
   .lsp1 { list-style-position: outside; }
   .lsp2 { list-style-position: hanging; }
   .lsp3 { list-style-position: inside; }
-->
</style>
HTML
<body> ~ </body>
<div class="sample">
   <ul class="lsp1">
      <li>項目1(通常の <li> 要素)</li>
      <li>項目2(通常の <li> 要素)</li>
      <li class="lsp1">項目3(lsp1クラスの <li> 要素)</li>
      <li class="lsp2">項目4(lsp2クラスの <li> 要素)</li>
      <li class="lsp3">項目5(lsp3クラスの <li> 要素)</li>
   </ul>
</div>
<div class="sample">
   <ul class="lsp2">
      <li>項目1(通常の <li> 要素)</li>
      <li>項目2(通常の <li> 要素)</li>
      <li class="lsp1">項目3(lsp1クラスの <li> 要素)</li>
      <li class="lsp2">項目4(lsp2クラスの <li> 要素)</li>
      <li class="lsp3">項目5(lsp3クラスの <li> 要素)</li>
   </ul>
</div>
<div class="sample">
   <ul class="lsp3">
      <li>項目1(通常の <li> 要素)</li>
      <li>項目2(通常の <li> 要素)</li>
      <li class="lsp1">項目3(lsp1クラスの <li> 要素)</li>
      <li class="lsp2">項目4(lsp2クラスの <li> 要素)</li>
      <li class="lsp3">項目5(lsp3クラスの <li> 要素)</li>
   </ul>
</div>

ブラウザー 表示例
  • 項目1(通常の <li> 要素)
  • 項目2(通常の <li> 要素)
  • 項目3(lsp1クラスの <li> 要素)
  • 項目4(lsp2クラスの <li> 要素)
  • 項目5(lsp3クラスの <li> 要素)
↑ {list-style-position: outside; } の表示
  • 項目1(通常の <li> 要素)
  • 項目2(通常の <li> 要素)
  • 項目3(lsp1クラスの <li> 要素)
  • 項目4(lsp2クラスの <li> 要素)
  • 項目5(lsp3クラスの <li> 要素)
↑ {list-style-position: hanging; } の表示
  • 項目1(通常の <li> 要素)
  • 項目2(通常の <li> 要素)
  • 項目3(lsp1クラスの <li> 要素)
  • 項目4(lsp2クラスの <li> 要素)
  • 項目5(lsp3クラスの <li> 要素)
↑ {list-style-position: inside; } の表示

■ 備考

【参考ページ】