【保存版】CSSのdisplay-listitemプロパティ：網羅的な解説

• リストアイテム間のスペース
  リストアイテム間に行間が空きます。
• インデント
  リストアイテムがインデントされます。
• マーカーの表示
  デフォルトでリストマーカー（黒丸など）が表示されます。

従来、これらのスタイルは li 要素に対して直接設定していましたが、display-listitem プロパティを使うことで、より簡潔でわかりやすい記述が可能になります。

例

ul, ol {
  list-style: none; /* デフォルトのマーカーを非表示にする */
}

li {
  display: list-item; /* リストアイテムとして表示 */
  list-style-type: circle; /* マーカーの種類を丸に変更 */
  list-style-position: inside; /* マーカーをインデント内側に配置 */
}

この例では、ul と ol 要素のマーカーを非表示にし、li 要素に対して display-listitem プロパティを設定することで、リストアイテムとしてのスタイルを適用しています。

display-listitem の利点

• 将来的に新しいリストアイテムスタイルが追加されても、それに対応できる
• リストアイテムとしてのスタイルを一括で設定できる
• コードが簡潔になり、読みやすくなる

display-listitem の注意点

• 古いブラウザではサポートされていない場合がある

代替手段

古いブラウザでは、display-listitem プロパティがサポートされていない場合があります。その場合は、以下の方法でリストアイテムとしてのスタイルを個別に設定することができます。

li {
  list-style-type: circle; /* マーカーの種類を丸に変更 */
  list-style-position: inside; /* マーカーをインデント内側に配置 */
  padding-left: 20px; /* インデントを設定 */
  margin-bottom: 5px; /* リストアイテム間のスペースを設定 */
}

---

基本的な例

この例では、ul 要素の子要素である li 要素に対して display-listitem プロパティを設定し、デフォルトのマーカーを表示します。

<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

ul {
  list-style: none;
}

li {
  display: list-item;
}

マーカーの種類を変更する

この例では、list-style-type プロパティを使用して、マーカーの種類を丸に変更します。

<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

ul {
  list-style: none;
}

li {
  display: list-item;
  list-style-type: circle;
}

マーカーの位置を変更する

この例では、list-style-position プロパティを使用して、マーカーの位置をインデント内側に変更します。

<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

ul {
  list-style: none;
}

li {
  display: list-item;
  list-style-type: circle;
  list-style-position: inside;
}

画像のマーカーを使用する

この例では、list-style-image プロパティを使用して、画像をマーカーとして使用します。

<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

ul {
  list-style: none;
}

li {
  display: list-item;
  list-style-type: none;
  list-style-image: url('marker.png');
}

リストアイテムごとにスタイルを変更する

この例では、個々のリストアイテムに対してスタイルを異なる設定します。

<ul>
  <li class="item1">アイテム1</li>
  <li class="item2">アイテム2</li>
  <li class="item3">アイテム3</li>
</ul>

ul {
  list-style: none;
}

.item1 {
  display: list-item;
  list-style-type: circle;
  list-style-position: inside;
  color: red;
}

.item2 {
  display: list-item;
  list-style-type: square;
  list-style-position: outside;
  color: blue;
}

.item3 {
  display: list-item;
  list-style-type: none;
  list-style-image: url('marker.png');
  color: green;
}

---

代替方法

1. 個別設定
   

   各 li 要素に対して、以下のプロパティを個別に設定します。

   • list-style-type: マーカーの種類を設定
   • list-style-position: マーカーの位置を設定
   • padding-left: インデントを設定
   • margin-bottom: リストアイテム間のスペースを設定

   例：

   li {
       list-style-type: circle; /* マーカーの種類を丸に変更 */
       list-style-position: inside; /* マーカーをインデント内側に配置 */
       padding-left: 20px; /* インデントを設定 */
       margin-bottom: 5px; /* リストアイテム間のスペースを設定 */
   }
   

2. 擬似要素を利用
   

   li 要素に ::before 擬似要素を定義し、マーカーを生成します。

   li::before {
       content: ''; /* マーカーのコンテンツを空にする */
       display: block; /* マーカーをブロック要素にする */
       width: 10px; /* マーカーの幅を設定 */
       height: 10px; /* マーカーの高さ */
       background-color: black; /* マーカーの色を設定 */
       margin-right: 10px; /* マーカーとテキストの間隔を設定 */
   }
   
   li {
       padding-left: 20px; /* インデントを設定 */
   }
   

3. ライブラリを利用
   

   Normalize.css や Reset CSS などの CSS リセットライブラリを利用することで、古いブラウザにおけるリストアイテムのスタイルを標準化することができます。

• ライブラリを利用する場合は、意図したスタイルに影響を与えないように注意する必要があります。
• 複雑なリストスタイルの場合は、擬似要素を利用する方法が適切です。
• 代替方法によって、見た目や挙動が若干異なる場合があります。

• 将来的には、ブラウザのサポート状況が改善されることが期待されます。
• display-listitem は、インライン要素に対しては適用されないことに注意が必要です。