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
関連情報
symbols
記述子は@counter-style
アットルールの中で使用されます。list-style
,list-style-image
,list-style-position
symbols()
, 無名のカウンタースタイルを生成する関数記法url()
関数