【CSS】counter – CSSだけで連番を振る – カウンタで番号付きの箇条書きリストを作成する方法

今回はCSSの疑似要素を使った「CSSだけで連番を作成する」方法についてご紹介させていただきます。

HTMLに直接記載してもよいのですが、項目が追加になった場合など、番号がずれてしまい、修正箇所が多岐におよぶ可能性もあります。

CSSで実装しておくと、上記の場合でも番号が動的に振られてくれるためとても便利です。

連番を付与するためのCSSプロパティ

実際にどのように指定するか例を用いて実装していきます。

以下のリストについている番号はCSSで制御しています。

<ol class="list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
  <li>WordPress</li>
  <li>WoWordPress</li>
</ol>

<style>
    html {
      font-size: 24px;
    }

    .list {
      background-color: #f9f9f9;
      font-size: 1rem;
      padding: 1em;
      width: 300px;

      /* numという名前のカウンタの値を初期化 */
      /* カウンタの名前はなんでもOK（わかりやすい単語で） */
      counter-reset: num 0;
    }

    .list li {
      margin-bottom: .5em;
      text-align: left;
      font-weight: bold;
    }

    .list li::before {
      /* numの値を+1する指定 */
      counter-increment: num 1;

      /* counter(num)でカウンタの値を出力 */
      content: counter(num) ' ';
    }
</style>

使用するCSSプロパティ

counter-reset

counter-resetプロパティではカウンタの値を初期化します。

counter-reset: num 0;

numはわかりやすい名前でよいですが、番号なのでnumberと記載しても問題ありません。

こちらのプロパティは連番を付けたいリストの親要素に対して指定します。

liタグに連番を付与したい場合は、olタグに指定するといったイメージです。

counter-increment

counter-incrementプロパティではカウンタの値を増加させます。

疑似要素（::beforeや::after）に指定します。

以下のように指定することで、値を１ずつ増加させることができます。

counter-increment: num 1;

numを記載しておりますが、こちらはcounter-resetプロパティで指定しているカウンタ名と合わせる必要があります。

カウンタを出力　counter(カウンタ名)

counter-incrementと合わせて、疑似要素でカウンタが出力されるように指定します。

content: counter(num) '';

疑似要素のcontentプロパティの値として指定します。

以下のようにすることで前後に文字も付けることが可能です。

content: '0' counter(num) '）';

さいごに

今回はCSSで連番を付与する方法についてご紹介させていただきました。

HTMLに直接記載しても同じ見栄えにすることは可能ですが、メンテナンス性を考えると、CSSで制御しておいた方が後々良かったということも多数あります。

特に後から修正や追加を行うような箇条書きのリストについてはCSSで実装することをオススメします！

今回の記事が少しでも参考になりましたら幸いです。