counter-incrementでカウンターの値が増えない場合の対処法！
counter-incrementはCSSでカウンターを加算する時に利用されるプロパティですが、counter-incrementを使ってもカウンターの値が増えない場合があり、その対処法をサンプルコード付きで解説します。
counter-incrementでカウンターの値が増えない問題
counter-incrementを使うとCSSで連番のカウンターを作成することが出来ます。連番を使って箇条書きに番号を振ったり、ランキング形式にすることが出来ます。
しかし時に、counter-incrementをちゃんと設定しているのに、うまくカウンターの値が増えていかない、つまりcounter-incrementが効かないといったケースがあります。
そこで今回はcounter-incrementしているのにカウンターが増えない場合の対処法を解説していきます。
counter-incrementでカウンターの値が増えない場合の対処法
counter-resetされているかどうかを確認
まず該当のカウンターで、counter-incrementの前にcounter-resetがされているかを確認します。counter-resetは指定した値でカウンターの値を初期化するプロパティです。
一部のブラウザではcounter-resetをしていないと正常にカウンターが動作しない場合があるため、必ずcounter-resetをするようにしましょう。
counter-resetをしているセレクタを確認する
上記のcounter-resetをちゃんとしているのに上手くcounter-incrementが動作しない場合はcounter-resetをしているセレクタを確認しましょう。
counter-resetは::beforeや::afterの疑似要素の中でスタイルを定義すると上手くいかない場合があります。
必ずclassやidのセレクタやbodyなど要素のセレクタの中でcounter-resetするようにしましょう。
それでも解決しない場合
その他counter-incrementが動かない原因として考えられるのは
- counter関数、counter-incrementプロパティなどで指定しているカウンターの名前が違う
- CSSの文法エラー
前者は今一度ソースコードを確認してカウンターの名前があっているか確認しましょう。後者の文法は以下のサイトでCSSの文法チェックが出来ますので、文法エラーが発生していないか一度確認してみましょう。
特に複数のカウンターの設定を行っている場合のミスや、全角スペースなど全角の記号などが入っている文法ミスはよくある問題です。一度確認してみるようにしましょう。
