以下のように、ナンバリングのリストを入れ子で作成しているものを見たことがありますでしょうか？

See the Pen
by ゆーじろー (@yujiron)
on CodePen.

よくプライバシーポリシーやご利用規約などの説明を主にするページで使われています。

今回は、CSSでナンバリングのリストを入れ子で作成する方法について紹介します！

【CSS】ナンバリングのリストを入れ子で作成する方法

コピペして使うことが出来るので、是非参考にしてみてください。

HTML

<ol class="ol-parent">
    <li>テキストが入ります
      <ol>
        <li>テキストが入ります</li>
        <li>テキストが入ります</li>
      </ol>
    </li>
    <li>テキストが入ります</li>
</ol>

olタグはordered listの略で順序のあるリストを実装する際に使われます。

入れ子にして階層を深くするために、liの中にもolを入れておきましょう！

CSS

ol.ol-parent, ol.ol-parent ol {
    counter-reset: cnt;
  }
  
  ol.ol-parent > li {
    text-indent: -1em;
    margin-left: 1em;
    margin-bottom: 10px;
  }
  
  ol.ol-parent li::before {
    counter-increment: cnt;
    content: counter(cnt) ".";
    color: red;
  }
  
  ol.ol-parent > li::before {
    text-indent: 0;
    width: 2em;
    display: inline-block;
  }
  
  ol.ol-parent > li > ol {
    margin: 10px;
  }
  
  ol.ol-parent > li > ol > li{
    text-indent: -3em;
    margin-left: 3em;
    margin-bottom: 10px;
  }
  
  ol.ol-parent > li > ol > li::before{
    width: 2em;
    display: inline-block;
    text-indent: 0;
    content: "(" counter(cnt) ")";
  }

まず親のolであるol-parentに対して、「counter-reset」を指定してカウンターをリセットします。

次に、子要素のliに対して、「counter-increment」を指定して、liが増える度に数字がナンバリングされるようにします。

numberの部分の名前は自由に決めてOK。

そして同じくliに「content: counter()」を指定することで、liタグが増えるたびに数字がナンバリングされてブラウザに表示されるようになります。

もしナンバリングされた数字の後ろや前後に何か表示したい場合は、「””」の間に値を書きましょう。

最後に、liの中に入っているolに対しても同じようにスタイリングしてあげればOKです。

まとめ

以上が、「CSSでナンバリングのリストを入れ子で作成する方法」でした。