LINEで現役エンジニアに直接質問してみよう!登録無料

CSSのみで連番を自動生成してカウンタ表示をつける方法

今までは、ランキング表示などでナンバリングを行う時には、HTMLかJavaScriptでしか行うことが出来ませんでした。しかし、CSS3でcounter-incrementというのが追加され、CSSのみでカウンタを作ることができるようになりました。

CSSで連番を生成する方法

カウンタ表示するには、カウンタ表示する親要素にcounter-incrementに指定します。

ul li {
  counter-increment: 〇〇;
}
ul li::before {
  content: counter(〇〇);
}

ちなみに、「〇〇」の部分は英数字だったらどんな名前でもOKです。

  • counter-increment: rank;
  • counter-increment: title;

などなど。但し、counter-incrementcontentの名前は揃えるようにしてくだいね!

連番自動生成の例

実際にこの方法を使って連番生成してみました。下記のソースコードと例を確認してみてください。

<ul>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>
ul li {
  counter-increment: number;
}
ul li::before {
  content: counter(number);
}

counter-incrementの使い方応用

ここまでの基礎ができれば、「第〇〇回」「No.〇〇」など様に「文字列 + 連番」の形でカウンターを作ることも出来ます。

HTMLは先程と同じものですが、CSSのcontentをこのように変えると文字列も変化します。

ul li {
  counter-increment: number;
}
ul li::before {
  content: "No. "counter(number);
}

このように変化します。注意点として、文字列は"(ダブルクオート)か'(シングルクオート)で囲んでください。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。