【CSS Modules】counter-setプロパティの使い方
counter-setプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
counter-setプロパティは、CSSで定義するカスタムカウンタの値を設定または初期化するためのプロパティです。このプロパティを使用することで、ウェブページ内の特定の要素に対して、独自の番号付けやカウントシステムを柔軟に構築できます。
具体的には、counter-setプロパティは、指定された名前のカウンタに対して、特定の数値を設定する役割を担います。もしその名前のカウンタがまだ存在しない場合は、新しくカウンタが作成され、指定された値で初期化されます。既にカウンタが存在している場合は、そのカウンタの現在の値が、counter-setで指定された新しい値に上書きされます。これにより、カウンタの開始値を自由に変更したり、途中でリセットして別の値から再開したりすることが可能になります。
例えば、counter-set: chapter 1; と記述することで、「chapter」という名前のカウンタを「1」に設定できます。その後、別の要素でcounter-increment: chapter;を使用すれば、このカウンタを1ずつ増やすことができます。これは、順序リスト（ol要素）のデフォルトの番号付けとは異なり、複数のカウンタを同時に管理したり、特定の階層構造を持つコンテンツに複雑な番号付けを適用したりする場合に非常に有効です。
counter-resetプロパティもカウンタを初期化するために使用されますが、counter-resetが常にカウンタの値を0にするのに対し、counter-setは任意の整数値に設定できる点で異なります。この柔軟性により、counter-setはコンテンツの構造に応じた高度な番号付けを実装する際に不可欠なツールとなります。システムエンジニアとしてウェブフロントエンド開発に携わる際、動的なリストや階層構造の表示において、ユーザーエクスペリエンスを向上させるための重要な機能として活用できるでしょう。
構文(syntax)
1counter-set: my-counter 0;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません