CSS/@counter-style

@counter-style

@counter-styleルールは、カスタムリストスタイル（カウンタースタイル）を定義するために使用されます。このルールを利用することで、番号付きリストや箇条書きリストの表示を柔軟にカスタマイズできます。

書式

@counter-styleルールの基本的な書式は以下の通りです：

@counter-style <名前> {
  system: <値>;
  symbols: <記号のリスト>;
  suffix: <接尾辞>;
  /* その他のプロパティ */
}

<名前>: カウンタースタイルの名前。リストやカウンターで指定するための識別子です。
system: カウンタースタイルの生成方法を指定します（例：numeric, alphabeticなど）。
symbols: 使用する記号や文字をリスト形式で定義します。
suffix: 各カウンターの後に付加される文字列（例：.や)）。

使用例

以下は、カスタムカウンタースタイルの定義例です：

@counter-style custom-counter {
  system: cyclic;
  symbols: 🌟 🟠 🔵;
  suffix: " ";
}

ul {
  list-style: custom-counter;
}

この例では、custom-counterという名前のカウンタースタイルを定義し、🌟や🟠といった絵文字をリストの記号として使用しています。

systemプロパティ

systemプロパティは、カウンターの生成方法を指定します。以下の値が使用可能です：

cyclic
symbolsのリストを循環的に使用します。
numeric
数値を使用します（例：1, 2, 3, ...）。
alphabetic
アルファベットを使用します（例：a, b, c, ...）。
fixed
symbolsのリストを固定的に使用します。それ以外の値は表示されません。
symbolic
記号を順番に使用しますが、繰り返しはしません。
additive
記号のリストと数値の組み合わせでカウンターを生成します（高度な用途）。

symbolsプロパティ

symbolsプロパティには、カウンターで使用する文字や記号を指定します。例えば：

symbols: ◉ ◌ ● ○;

suffixプロパティ

suffixプロパティを使うと、カウンター記号の後に付ける文字列を指定できます。一般的な例：

suffix: ".";

注意事項

カスタムカウンタースタイルを適用するには、list-styleやcounter()で明示的に指定する必要があります。
カウンタースタイルを定義しても、それが即座に適用されるわけではありません。リストや要素に明示的にスタイルを適用してください。

使用例（応用）

以下は、複数のカスタムスタイルを定義する例です：

@counter-style star-counter {
  system: cyclic;
  symbols: ★ ☆;
  suffix: ") ";
}

@counter-style roman-counter {
  system: numeric;
  symbols: I V X L C D M;
  suffix: ".";
}

ol.star-list {
  list-style: star-counter;
}

ol.roman-list {
  list-style: roman-counter;
}