“@counter-style”ルール

“@counter-style”ルール

“@counter-style”ルールはリスト・アイテムのリスト・カウンターの値をどのようにしてリスト・マーカーとして表現するかを定めたカウンター・スタイルを定義します。

カウンター・スタイルは“@counter-style”ルールの中に含まれる“system”ディスクリプタと“symbols”ディスクリプタもしくは“additive-symbols”ディスクリプタの組み合わせによってそのアルゴリズムが指定されます。

“@counter-style”ルールによって定義されたカウンター・スタイルは“@counter-style”ルールが含まれる文書全体で使用可能になります。

“@counter-style”ルールの構文

“@counter-style”ルールは“@counter-style”に続く、カウンター・スタイルの名前(“<counter-style-name>”)と宣言リスト(“<declaration-list>”)を含む“{”と“}”で囲まれたブロックからなります。

“<counter-style-name>”は“none”と一致しない“<custom-ident>”として定義します。なお、“decimal”、“disc”、“square”、“circle”、“disclosure-open”と“disclosure-closed”のキーワードは有効な“<counter-style-name>”ですが、“@counter-style”ルールでカウンター・スタイルの名前を付ける時には使用することはできず、使用した場合は“@counter-style”ルールは無効となります。

“<counter-style-name>”は大文字と小文字が区別されますが、仕様書にあるカウンター・スタイルの名前はパース時には小文字に揃えられます。

同じ“<counter-style-name>”で定義された“@counter-style”ルールが複数あって競合する場合は通常のカスケードの規則に則って1個だけ“@counter-style”ルールが選択されます。“@counter-style”ルールが競合した場合、カスケードによって選ばれた“@counter-style”ルールの設定のみが使用され、他の“@counter-style”ルールの設定は使用される“@counter-style”ルールに含まれない設定も含めて完全に上書きされます。

カウンター・スタイルは“@counter-style”ルールの中に含まれるディスクリプタによって定義されます。

“@counter-style”ルールはそれぞれ明示されているか否かに関係なくすべてのディスクリプタの値を指定します。明示的に値が指定されていないディスクリプタの値には仕様書で定義されているディスクリプタの初期値が設定されます。“@counter-style”ルールの中に同じディスクリプタが複数含まれている場合は一番最後に記述されているものの値が使用され、それよりも前に記述されているものの値は無視されます。

ディスクリプタは“@counter-style”ルールの中でだけ意味を持ち、文書の要素には適用されません。また、ディスクリプタがどの要素に適用され得るのかや子要素へ継承されるのか否かについての決まりはありません。

不明なディスクリプタや文法上の誤りがあるディスクリプタは無視されますが、それによって“@counter-style”ルール自体が無効になることはありません。また、“@counter-style”ルールはCSSの前方互換性の要件を満たすため、“@counter-style”ルールを認識できないユーザー・エージェントはエラーを出さずに“@counter-style”ルールを無視します。

“@counter-style”ルールのディスクリプタ

“additive-symbols”ディスクリプタは“system”ディスクリプタの値が“additive”の場合に使用し、それ以外の場合は“symbols”ディスクリプタを使用します。ただし、“system”ディスクリプタの値が“extends”の場合は“symbols”ディスクリプタと“additive-symbols”ディスクリプタは使用できません。

“<symbol>”値

“<symbol>”値は“symbols”ディスクリプタや“additive-symbols”ディスクリプタなどでリスト・マーカーを表現するために使用される記号(文字)を指定するために使用されます。

“<symbol>”値は以下の3種類の構文で指定することができます。

“<string>”値や“<custom-ident>”値で指定される文字は1文字である必要はなく、1個の“<symbol>”値を複数の文字で構成することもできます。

特殊な記号や絵文字などあらゆる文字が“<symbol>”値として使用可能ですが、文書を表示するのに使用可能なフォントにその文字が含まれていない場合にはリスト・マーカーが正しく表示されないので注意が必要です。

使用例

<ol>

<li>東京スカイツリー</li>
<li>対馬オメガ局送信用鉄塔</li>
<li>硫黄島ロランC主局（初代）</li>
<li>硫黄島ロランC主局（2代）</li>
<li>南鳥島ロランC局（初代）</li>
<li>東京タワー</li>
<li>NHK川口送信局</li>
<li>あべのハルカス</li>
<li>明石海峡大橋</li>
<li>横浜ランドマークタワー</li>
<li>虎ノ門ヒルズ森タワー</li>
<li>りんくうゲートタワービル</li>
<li>大阪府咲洲庁舎</li>
<li>おおたかどや山標準電波送信所</li>
<li>依佐美送信所</li>

</ol>

1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

仕様書

定義されている仕様書

@counter-style

system
negative
prefix
suffix
range
pad
fallback
symbols
additive-symbols
speak-as