【CSS Modules】counter-incrementプロパティの使い方

counter-incrementプロパティは、CSSカウンタの値を増減させるための設定を保持するプロパティです。CSSカウンタとは、ウェブページ内で自動的に番号付けや連番を管理するためにCSSが提供する仮想的な数値システムのことです。例えば、HTMLのリスト要素に標準の番号ではなく、独自のフォーマットで番号を振りたい場合や、見出しに自動で章番号を付けたい場合などに利用されます。

このプロパティを使用することで、特定のHTML要素が表示されるたびに、指定したカウンタの値を増やしたり減らしたりする振る舞いを設定できます。具体的な記述方法は、counter-increment: カウンタ名 数値;となります。カウンタ名は開発者が任意で設定できるカウンタの識別子であり、数値はそのカウンタをどれだけ増減させるかを指定する整数です。数値の指定を省略した場合、デフォルトで1ずつ増える動作になります。負の値を指定することで、カウンタの値を減らすことも可能です。

通常、counter-incrementプロパティは、counter-resetプロパティと組み合わせて使用されます。counter-resetでカウンタを初期化（リセット）し、その後にcounter-incrementで値を増加させることで、柔軟なカスタム連番の生成が可能です。これにより、ウェブページのデザインにおいて、リスト、章、節、図表などの項目に独自の自動的な番号付けを実装することができます。また、counter-increment: none;と指定することで、カウンタの増減を行わないように設定することもできます。このプロパティは、動的なコンテンツ管理やユーザーインターフェースの改善に役立ちます。

Copy
1counter-increment: chapter 1;

引数なし

引数はありません

戻り値なし

戻り値はありません