【HTML/CSS】counterを利用して要素に自動で番号を付与する

CSSのcounter関数とcounter-incrementプロパティを利用して要素に連続した番号を表示する方法をご紹介します！

counterを利用することで、以下デモのサイドバーに表示されている「No.1～5」のような番号が表示できるようになります。

Demo

counterとは

counterはCSS2で追加された自動ナンバリングを実装する関数になります。counterの値は疑似要素のbefore、afterにcontentにて表示します。

以下、counterの基本的な使い方になります。

HTML

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

  ul {
    counter-reset: count;
    list-style-type: none;
  }
  li:before {
    counter-increment: count;
    content: "No." counter(count);
  }

上記のサンプルを記述すると以下のように表示されます。counter()にカウンタ名を指定することで機能します。

See the Pen CSS - Counter by Ryohei (@intotheprogram) on CodePen.

counter-reset

counter-resetはcounterの値をリセットするプロパティです。counter-resetが指定された要素が出現する度に値がリセットされます。上記サンプルではリスト（ul）にcounter-resetを指定しているため、新しいリスト（ul）を追加すると、追加されたリストには再び1～5までの番号が割り当てられます。

See the Pen CSS - counter-reset by Ryohei (@intotheprogram) on CodePen.

counter-increment

counter-incrementはcounterの値を1ずつ増加させるプロパティになります。こちらのプロパティに指定されたカウンタ（上記の場合はcount）が1ずつ増えていきます。増加する値を変更する場合は、カウンタ名の後に半角スペースを入れて整数値を指定します。

  ul {
    counter-reset: count;
    list-style-type: none;
  }
  li:before {
    counter-increment: count 2;
    content: "No." counter(count);
  }

See the Pen CSS - counter-increment by Ryohei (@intotheprogram) on CodePen.

counterを利用することで自動で連続した番号を追加することができます。

人気記事のカスタマイズや売れ筋商品のランキング等をより目立たせたい場合等に有効ですね！

以上、CSSのcounterで要素に自動で番号を付与するのご紹介でした！