CSSのcounter-incrementでカウンターを増加させ、リストや項目の番号付けをカスタマイズする方法をわかりやすく解説

counter-incrementプロパティは、リストや項目の番号を自動的に増加させるために使用されます。HTMLリストやカスタムカウンタと組み合わせて、カウンタの増加ステップを指定できます。

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

• none: カウンタを増加させません。
• カウンタ名: カウンタを指定された名前でインクリメントします（デフォルトは1ずつ増加）。
• カウンタ名 数値: 指定された数値でカウンタを増加させます。

注意点と関連情報

counter-incrementプロパティは、counter-resetプロパティと組み合わせて使用します。counter-resetでカウンタを初期化し、counter-incrementでカウンタを増加させます。通常、リストや番号付きの要素に対して使用され、カスタマイズした番号付けが可能です。contentプロパティと共にcounter()関数を使うと、カウンタの現在の値を表示できます。

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

カウンターが初期化されていない

counter-incrementは、カウンターを増加させるプロパティですが、カウンターが初期化されていない場合、このプロパティの効果は現れません。counter-resetでカウンターを初期化する必要があります。
対策: counter-incrementを使用する前に、counter-resetプロパティでカウンターを初期化しているか確認しましょう。これにより、カウンターが正常に動作し始めます。

カウンターが表示されていない

counter-incrementはカウンターの値を増加させますが、カウンターが表示されていないと効果が確認できません。カウンターの値は、contentプロパティを使って表示する必要があります。
対策: 擬似要素（::beforeや::after）でcontentプロパティを使用してカウンターの値を表示し、カウンターが正しく機能しているか確認しましょう。

カウントの増加値がゼロまたは無効な値

counter-incrementプロパティに指定された増加値が0または無効な値になっていると、カウンターは増加しません。
対策: 増加値を適切に設定しているか確認しましょう。特定のステップで増やしたい場合は、正しい数値を指定する必要があります。例えば、カウンターを1ずつ増やすか、任意の値で増加させるように設定します。

スコープが誤っている

counter-incrementで増加させるカウンターのスコープが、親要素や他のコンテキストで異なっている場合、期待通りにカウントされないことがあります。
対策: カウンターのスコープが正しく設定されているか確認し、counter-resetとcounter-incrementが同じスコープで使用されていることを確認してください。要素階層に応じた適切なスコープ管理が重要です。

共通するCSSコード

    ol {
        counter-reset: section;
    }

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

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

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

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

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

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

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

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