【CSS Modules】@counter-styleアットルールの使い方

Copy
1/*
2 * @counter-styleルールは、カスタムのカウンタスタイルを定義します。
3 * これにより、リストマーカーなどのカウンタの外観を柔軟にカスタマイズできます。
4 */
5@counter-style custom-image-list {
6  /*
7   * `system: symbols`は、指定されたシンボルのリストを循環して使用するカウンタシステムを定義します。
8   * これは、リストアイテムの数に応じて、定義されたシンボルが順番に繰り返し表示されることを意味します。
9   */
10  system: symbols;
11
12  /*
13   * `symbols`プロパティは、カウンタとして使用するシンボルをリストで指定します。
14   * ここでは、3つの異なる画像URLを指定しています。
15   * リストの各項目は、このリストの画像が順番に割り当てられ、リストの最後を超えると最初の画像に戻ります。
16   * 注: 実際の使用では、これらのURLを自身の画像パスに置き換えてください。
17   */
18  symbols: url("https://www.example.com/icon-star.png")
19           url("https://www.example.com/icon-circle.png")
20           url("https://www.example.com/icon-square.png");
21
22  /*
23   * `suffix`プロパティは、各カウンタ値の後に表示される内容を定義します。
24   * ここでは、画像マーカーとリストアイテムのテキストの間に半角スペースを挿入し、
25   * 視覚的な区切りを提供します。
26   */
27  suffix: ' ';
28}
29
30/*
31 * 定義したカスタムカウンタスタイルをHTML要素に適用します。
32 * この例では、`ul`（順序なしリスト）要素の`list-style-type`プロパティに、
33 * 上で定義したカウンタスタイル名 (`custom-image-list`) を指定しています。
34 * `padding-left`は、リストマーカーが適切に表示されるように確保するスペースです。
35 */
36ul {
37  list-style-type: custom-image-list; /* カスタム画像カウンタスタイルを適用 */
38  padding-left: 2.5em;                 /* マーカー表示のための左パディング */
39}

CSSの@counter-styleルールは、ウェブページのリストマーカーなど、カウンタの表示形式を自由に作成できる機能です。このルール自体には、特別な引数や戻り値は定義されていません。

提供されたサンプルコードでは、「custom-image-list」という名前のカスタムカウンタスタイルを定義しています。このスタイル内でsystem: symbolsを設定することで、複数のシンボル（この場合は画像）を順番に循環させて使用するカウンタシステムを指定しています。symbolsプロパティでは、カウンタとして表示したい星、丸、四角の画像URLを具体的に指定しており、リストの各項目にはこれらの画像が最初のものから順に繰り返し割り当てられます。例えば、1つ目のリスト項目には星、2つ目には丸、3つ目には四角の画像が表示され、4つ目の項目には再び星の画像が割り当てられるといった動作です。また、suffix: ' 'は、表示される画像マーカーとリスト項目のテキストの間に半角スペースを挿入し、読みやすさを向上させる役割を果たします。

定義したカスタムカウンタスタイルを実際に適用するには、ul要素のようなリスト要素のlist-style-typeプロパティに、作成したスタイル名「custom-image-list」を指定します。これにより、通常の記号や数字の代わりに、指定した画像がリストマーカーとして表示されます。padding-leftプロパティは、マーカーがテキストと重ならないよう適切な表示スペースを確保するために設定します。このように、@counter-styleルールを活用することで、標準のカウンタスタイルでは実現できない、独自の視覚表現を持つリストをデザインできます。

Copy
1/*
2 * @counter-style: カスタムカウンタースタイルを定義します。
3 * このルールは、リストのマーカー（例: 箇条書きの記号）を独自の記号や絵文字に
4 * カスタマイズするために使用されます。システムエンジニアを目指す初心者の方向けに、
5 * 既存のリストマーカー（disc, circle, squareなど）にとらわれずに、
6 * 独自のリスト表示を作成する方法を示します。
7 */
8@counter-style custom-emoji-list {
9  /*
10   * system: カウンターがsymbolsで指定された記号をどのように生成するかを定義します。
11   * 'cyclic' は、symbolsで指定された記号を順番に繰り返し使用することを示します。
12   * 他にも 'fixed', 'numeric', 'alphabetic' などがあります。
13   */
14  system: cyclic;
15
16  /*
17   * symbols: リストマーカーとして使用する記号を順番に指定します。
18   * ここでは絵文字を使用しています。リストアイテムの数に応じてこれらの記号が
19   * 順番に、そして循環して表示されます。
20   */
21  symbols: "👍" "👏" "🎉";
22
23  /*
24   * suffix: 各マーカーの記号の後に付加する文字列を定義します。
25   * ここでは半角スペースを追加し、記号とリストアイテムの内容との間に
26   * 読みやすい間隔を設けています。
27   */
28  suffix: " ";
29}
30
31/*
32 * ul.my-custom-list: HTML内で 'my-custom-list' クラスが適用された
33 * 順序なしリスト (<ul>) 要素に対するスタイルを定義します。
34 */
35ul.my-custom-list {
36  /*
37   * list-style-type: リストマーカーの種類を指定します。
38   * ここでは上で定義したカスタムカウンタースタイル 'custom-emoji-list' を
39   * 値として指定し、独自のマーカーを適用しています。
40   */
41  list-style-type: custom-emoji-list;
42
43  /*
44   * padding-left: リストアイテムの内容の左側に余白を追加し、
45   * マーカーとテキストが重ならないように、また読みやすくするために設定します。
46   */
47  padding-left: 2em;
48}

CSSの@counter-styleは、リストのマーカー（箇条書きの記号など）を独自にカスタマイズするためのルールです。このルールを用いることで、既存のdiscやcircleといったスタイルにとらわれず、絵文字や任意の文字列などをマーカーとして使用できるように定義します。このルール自体には特定の引数や戻り値はありません。

サンプルコードでは、custom-emoji-listという名前のカスタムカウンタースタイルを定義しています。system: cyclic;は、symbolsで指定された記号を順番に繰り返し使用することを示します。symbols: "👍" "👏" "🎉";では、リストアイテムの数に応じて「👍」「👏」「🎉」の絵文字が順番に、そして循環してマーカーとして表示されます。suffix: " ";は、各マーカーの記号の後に半角スペースを追加し、記号とリストアイテムの内容との間に適切な間隔を設ける役割を果たします。

その後、ul.my-custom-listというセレクタで、HTMLの<ul>要素にmy-custom-listクラスが適用された場合に、このカスタムスタイルを適用しています。list-style-type: custom-emoji-list;と記述することで、上で定義した独自のカウンタースタイルが実際に使用されます。padding-left: 2em;は、リストアイテムの左側に余白を追加し、マーカーとテキストが重ならずに読みやすくなるように調整しています。これにより、システムエンジニアを目指す初心者の方も、標準のスタイルでは実現できない表現豊かなリスト表示を作成できるようになります。