CSSのlist-styleでリストのマーカーや配置をカスタマイズする方法をわかりやすく解説

CSSのlist-styleプロパティは、リスト要素に表示されるマーカーやその配置方法を設定するために使用されます。リストスタイルをカスタマイズすることで、リストのデザインが大きく変わり、視覚的に整ったページを作成できます。

list-styleプロパティの値とその効果の一覧

disc – デフォルトの丸いマーカーが表示されます。
circle – 空の円マーカーが表示されます。
square – 四角いマーカーが表示されます。
none – マーカーが表示されません。

注意点や関連情報

list-styleプロパティは、マーカーの種類だけでなく、位置や画像の使用もカスタマイズ可能です。list-style-positionやlist-style-imageを組み合わせることで、さらに詳細なリストスタイルの設定が可能です。デザインによっては、noneを使用してマーカーを非表示にし、リストのレイアウトをより自由にコントロールすることもあります。

list-styleが効かない時の原因と対策

list-styleが親要素に適用されている

list-styleはリストの子要素である<li>に対して適用されるプロパティですが、親要素（<ul>や<ol>）に設定されることがあります。

対策: list-styleをリスト要素（<li>）に適用するか、親要素（<ul>や<ol>）でスタイルを管理します。

list-style-positionがinsideになっている

list-style-positionがinsideになっている場合、リストアイテムのインデントが消えてしまい、list-styleが視覚的に機能しないように見えることがあります。

対策: list-style-positionをoutsideに変更して、リストアイテムのマーカーが適切に表示されるようにします。

共通するCSSコード

.css-sample-container {
      width: 100%;
      margin: 20px 0;
    }

    .css-sample-item {
      width: 300px;
      background-color: #f0f8ff;
      padding: 10px;
      margin: 10px auto;
    }

list-style-type: disc;

デフォルトの丸いマーカーが表示されます。

HTMLコード

<div class="css-sample-container">
      <ul class="css-sample-item css-sample-list-style-disc">
        <li>リストアイテム 1</li>
        <li>リストアイテム 2</li>
        <li>リストアイテム 3</li>
      </ul>
    </div>

CSSコード

.css-sample-list-style-disc {
      list-style-type: disc;
    }

表示結果

リストアイテム 1
リストアイテム 2
リストアイテム 3

list-style-type: circle;

空の円マーカーが表示されます。

HTMLコード

<div class="css-sample-container">
      <ul class="css-sample-item css-sample-list-style-circle">
        <li>リストアイテム 1</li>
        <li>リストアイテム 2</li>
        <li>リストアイテム 3</li>
      </ul>
    </div>

CSSコード

.css-sample-list-style-circle {
      list-style-type: circle;
    }

表示結果

リストアイテム 1
リストアイテム 2
リストアイテム 3

list-style-type: square;

四角いマーカーが表示されます。

HTMLコード

<div class="css-sample-container">
      <ul class="css-sample-item css-sample-list-style-square">
        <li>リストアイテム 1</li>
        <li>リストアイテム 2</li>
        <li>リストアイテム 3</li>
      </ul>
    </div>

CSSコード

.css-sample-list-style-square {
      list-style-type: square;
    }

表示結果

リストアイテム 1
リストアイテム 2
リストアイテム 3

list-style-type: none;

マーカーが表示されません。

HTMLコード

<div class="css-sample-container">
      <ul class="css-sample-item css-sample-list-style-none">
        <li>リストアイテム 1</li>
        <li>リストアイテム 2</li>
        <li>リストアイテム 3</li>
      </ul>
    </div>

CSSコード

.css-sample-list-style-none {
      list-style-type: none;
    }

表示結果

リストアイテム 1
リストアイテム 2
リストアイテム 3

まとめ

list-styleプロパティは、リストのマーカーの種類を設定します。
標準的なdiscやcircle、squareの他、noneでマーカーを非表示にできます。
リストスタイルのデザインは、見やすさやページ全体のスタイルに影響を与えます。