【CSS Modules】counter-resetプロパティの使い方
counter-resetプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
counter-resetプロパティは、Webページ内で自動的に番号を振るための「CSSカウンタ」を初期化または特定の値に設定するためのプロパティです。このプロパティを使用することで、たとえば章番号やリスト項目番号など、連続した数値をWebページ上に表示する仕組みを制御できます。
counter-resetプロパティには、リセットしたいカウンタの名前と、そのカウンタの初期値を指定します。初期値が省略された場合、カウンタは自動的に0に設定されます。複数のカウンタを同時にリセットしたい場合は、スペースで区切って複数のカウンタ名と値を記述することが可能です。
このプロパティは、通常counter-incrementプロパティと組み合わせてカウンタを増減させ、contentプロパティのcounter()またはcounters()関数を用いてその値を表示することで、より複雑な番号付けを実現します。これにより、HTMLの構造を変更することなく、CSSだけで柔軟なナンバリングを実現できるため、Webページのレイアウトとコンテンツの分離を促進し、保守性の高いコード作成に貢献します。
たとえば、新しい章が始まるたびに章番号カウンタをリセットし、その章内のセクション番号カウンタも同時にリセットするといった応用が可能です。このように、counter-resetはWebコンテンツの視覚的な整理と構造化において重要な役割を果たします。
公式リファレンス: counter-reset
構文(syntax)
1counter-reset: section 1;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません