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