symbols

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

構文

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
symbols

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

関連情報