CSSのcounter-resetでカウンターを初期化し、リストや項目の番号付けをカスタマイズする方法をわかりやすく解説

2024.09.14
スポンサーリンク

counter-resetプロパティは、HTML要素のカウンタを初期化するために使用されます。このプロパティとcounter-incrementプロパティを組み合わせることで、カスタムカウンタをリストなどに適用し、任意の番号からカウントを開始することができます。

スポンサーリンク

counter-resetプロパティの値とその効果

  • none: カウンタのリセットは行われません。
  • カウンタ名: 指定されたカウンタをリセットします。デフォルトのリセット値は0です。
  • カウンタ名 数値: 指定された数値でカウンタをリセットします。

注意点と関連情報

counter-resetプロパティは、リストや番号付きの要素のカウンタを初期化するために使用されます。通常はcounter-incrementと組み合わせて使用し、contentプロパティと一緒に使用して、カウンタの現在の値を表示することができます。リセットのタイミングを適切に指定することで、リストの各セクションに異なる番号を付与できます。

counter-resetプロパティが効かない時の原因と対策

カウンターが使用されていない

counter-resetはカウンターを初期化するプロパティですが、カウンターが使用されていない場合、初期化の効果が確認できません。カウンターがないと、counter-resetの役割が果たせません。
対策: カウンターを使用する場合は、counter-incrementと組み合わせてカウンターを増加させるか、contentプロパティでカウンターを表示させるようにしましょう。擬似要素（::beforeや::after）でカウンターを表示させることが一般的です。

counter-incrementと組み合わせていない

counter-resetでカウンターを初期化しても、カウンターの値がcounter-incrementで増加されていなければ、効果が現れません。
対策: counter-resetと一緒に、カウンターを増加させるためにcounter-incrementを正しく使用しているか確認しましょう。これにより、カウンターが意図通りに動作します。

カウンター名が不一致

counter-resetで初期化するカウンター名と、counter-incrementやcontentプロパティで使用されるカウンター名が一致していない場合、カウンターが正しく機能しません。
対策: カウンター名が一致しているか確認してください。同じカウンター名をcounter-resetとcounter-increment、およびcontentで使用する必要があります。

初期値が正しく設定されていない

counter-resetで初期値が適切に設定されていない場合、カウンターが期待した値から開始されないことがあります。デフォルトでは0からカウントが始まりますが、カスタムの初期値を指定したい場合があります。
対策: 必要に応じて、counter-resetに適切な初期値を指定しましょう。例えば、カウンターを1から開始したい場合、初期値を明示的に設定します。

共通するCSSコード

.css-sample-container {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    margin: 50px auto;
    border: 1px solid #000;
    font-size: 18px;
    color: #333;
    x-sizing: border-box;
}

counter-reset: section

counter-reset: sectionは、カウンタを0にリセットします。この例では、リスト項目ごとに「Section 1」「Section 2」… と自動的に番号が付けられます。

HTMLコード

<ol class="css-sample-counter">
    <li>最初の項目</li>
    <li>二番目の項目</li>
    <li>三番目の項目</li>
</ol>

CSSコード

.css-sample-counter li {
    counter-increment: section;
}

.css-sample-counter li::before {
    content: "Section " counter(section) ". ";
    font-weight: bold;
}

表示結果

  1. 最初の項目
  2. 二番目の項目
  3. 三番目の項目

counter-reset: section 5

counter-reset: section 5は、カウンタを5にリセットし、カウントを開始します。この場合、リスト項目は「Custom Section 6」「Custom Section 7」… という形で表示されます。リセットをする1についてのみcounter-resetを指定します。以下の例では:first-childで指定しています。

HTMLコード

<ol class="css-sample-counter-reset2">
    <li>最初の項目</li>
    <li>二番目の項目</li>
    <li>三番目の項目</li>
</ol>

CSSコード

.css-sample-counter-reset2 li {
    list-style: none;
    counter-increment: section;
}
.css-sample-counter-reset2 li:first-child {
    counter-reset: section2 5;
}
.css-sample-counter-reset2 li::before {
    content: "Custom Section " counter(section2) ". ";
    font-weight: bold;
}

表示結果

  1. 最初の項目
  2. 二番目の項目
  3. 三番目の項目

まとめ

counter-resetプロパティは、カウンタの初期化に使用され、リストやカスタムカウンタの制御に便利です。counter-incrementと組み合わせてカウンタを増加させ、contentプロパティを使用してカウンタの値を表示することができます。カウンタをリセットするタイミングや値を調整することで、さまざまなカスタマイズが可能です。

スポンサーリンク