こんにちは、Ryohei（@ityryohei）です！

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で要素に自動で番号を付与するのご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら