symbols

symbols は CSS の記述子で、指定されたカウンターシステムがカウンター表現を構築するために使用する記号を指定するために使用します。

構文

symbols 記述子は、 1 つ以上の <symbol> で指定します。

値

<symbol>

そのカウンターシステムで使用される記号を表します。これは以下のデータ型のうちの一つである必要があります。

  • <string>
  • <image> (注: この値は「リスクあり」であり、仕様書から削除されるかもしれません。これはまだ実装されていません。)
  • <custom-ident>

解説

記号は文字列、画像、識別子の何れかで指定することができます。これは @counter-style アットルールの中で使用されます。

css
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("first.svg") url("second.svg") url("third.svg");
symbols: indic-numbers;

symbols 記述子は、 system 記述子の値が cyclic, numeric, alphabetic, symbolic, fixed の何れかである場合に指定する必要があります。 additive システムを使用する場合は、 symbols を指定する代わりに additive-symbols を使用してください。

公式定義

関連するアット規則@counter-style
初期値n/a (required)
計算値指定通り

形式文法

<symbol>+

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>

例

カウンター記号の設定

HTML

html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

css
@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

結果

仕様書

Specification
CSS Counter Styles Level 3
# counter-style-symbols

ブラウザーの互換性

BCD tables only load in the browser

関連情報