【CSS】counter-resetを使用して任意の数字からカウントを開始する方法

CSSのcounter-resetプロパティを使用すると、リストや要素のカウンターを制御し、デフォルトの0以外の数字からカウントを開始することができます。この記事では、カウンターを任意の数字から始める方法について解説します。

counter-resetとは?

counter-resetは、要素にカウンターをリセットするためのプロパティです。通常、カウンターは0から始まりますが、数値を指定することで任意の値からカウントを開始できます。この機能を活用することで、カウントの順番を自由に制御することが可能です。

カウンターを任意の数字から始める方法

次に、リストのカウントを5から開始する例を見てみましょう。

ol {
  counter-reset: list-counter 5; /* カウンターを5から開始 */
}

li {
  list-style: none;
  counter-increment: list-counter;
}

li::before {
  content: counter(list-counter) ". ";
}

このコードを適用することで、リストのカウントが6から始まります。

counter-reset
counter-resetはカウンターの初期値を設定するプロパティです。この例ではlist-counterという名前のカウンターを5にリセットし、次の項目から6として表示されるようにしています。

counter-increment
li要素が生成されるたびにカウンターを1ずつ増加させるために、counter-incrementを使用します。このプロパティは、カウンターを進める役割を持っています。

content
li::beforeは擬似要素で、counter(list-counter)を使用してカウンターの現在の値を表示します。後ろに”. “を追加することで、リスト番号にピリオドを付けることができます。

出力結果

上記のCSSを適用した結果、リストは次のように表示されます。

6.項目1
7.項目2
8.項目3

このように、カウンターが6からスタートし、項目ごとに増加していきます。

応用例

さらに応用して、ページ内の異なるセクションごとにカウンターの開始値を変更することも可能です。たとえば、あるセクションでは10から始めるなど、状況に応じて自由にカウンターをリセットすることができます。

section {
  counter-reset: section-counter 10;
}

h2::before {
  content: "セクション " counter(section-counter) ": ";
  counter-increment: section-counter;
}

このように、異なるカウンターを設定することで、さまざまなカウントのパターンを作り出せます。

まとめ

counter-resetプロパティを使用すると、カウンターを任意の数字からスタートさせることができ、リストや要素の順序を自由に制御できます。カスタムカウンターを使用すれば、より見やすく、整ったデザインを実現することが可能です。