WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： マークアップ >CSS

「リストに連番を振りたいけどそれぞれに直書きは管理が大変」
「数字だけならlist-styleでもいいけど、連番の前に文字を入れたい」
「JSを使わずにCSSだけで完結させたい」
こういった場面のために、今回はJSを使わずCSSのみでゼロ埋めの連番を実装する手順をご紹介します。

実装コード

See the Pen
入力とチェックボックスの同期 by k-k-0707 (@k-k-0707)
on CodePen.

リストを事前に用意しておき、そのリスト毎にCSSでゼロ埋めの連番が入るよう実装しています。

それでは実装した内容について解説をしていきます。

HTML

まずはHTMLです。今回はliタグ内のh2タグに付与する形で用意しましたが、どのようなタグでも同様の実装が可能です。

<ul class="count_list">
  <li>
    <h2>番号付きサンプル</h2>
    <p>テキストが入ります。テキストが入ります。</p>
  </li>
</ul>

CSS

続いてCSSです。ここでゼロ埋めを含む連番を実装します。疑似要素で配置しているため、CSSによる装飾も同時に実装及び管理が可能です。

.count_list li {
  counter-increment: examples; //①
}
.count_list li h2:before {
  content: "Part" "0" counter(examples); //②
}
.count_list li:nth-of-type(9) ~ li h2:before {
  content: counter(examples); //③
}

1. 連番の繰り返し表示する要素にcounter-incrementを用意します（今回は「examples」という名前にしていますが、ここで指定する名前は何でもOKです）
2. 実際に連番表示したい要素（今回はh2タグ）のbeforeに content: “Part” “0” counter(examples); を指定します。最初にPartと0を表示しつつ、その後ろにcounter-incrementで用意した連番数字が表示されます。
3. 2桁である10以降の数字に0は不要のため、:nth-of-type(9) ~ で0を除いた連番を改めて指定します。

まとめ

今回はCSSのcounter-incrementを使用して、ゼロ埋めの自動連番を実装する方法についてご紹介しました。番号を直接記述やJSで実装などやり方は様々あるので用途にあった使い分けをしていきましょう。