このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

@counter-style”ルール~“additive-symbols”ディスクリプタCSS3で追加

記事Jan. 31st,2022
“@counter-style”ルールで定義するカウンター・スタイルでリスト・マーカーを表現するための記号を指定するディスクリプタ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

概要

additive-symbols”ディスクリプタはsystem”ディスクリプタの値がadditiveである場合にリスト・マーカーを生成するアルゴリズムが使用する記号を指定します。

@counter-style”ルールsystem”ディスクリプタの値がadditiveである場合は有効な“additive-symbols”ディスクリプタを含まなければなりません。

説明
<integer> <symbol> 指定された<symbol>”値と位の量を使用してリスト・マーカーを生成します (負の<integer>”値は無効です。)

値の指定方法

additive-symbols”ディスクリプタの値は<symbol>”値とその<symbol>”値を使用する位の量を表す<integer>”値の組をコンマ(“,”)で区切って必要なだけ記述します。

複数の<symbol>”値<integer>”値の組を記述する場合は<integer>”値が大きい順に記述します。大きい順に記述されていない場合は“additive-symbols”ディスクリプタは無効となり、無視されます。

@counter-style sample-counter {
system: additive;
additive-symbols: 〚1個目の記号の位の量〛 〚1個目の記号〛,〚2個目の記号の位の量〛 〚2個目の記号〛,〚3個目の記号の位の量〛 〚3個目の記号〛,...;
...
}

リスト・カウンターの値は位の量を足し合わせることで表現され、それぞれの位の量に対応する<symbol>”値を組み合わせてリスト・マーカーを表現します。

使用例

ol { list-style-type: sample-counter;}

@counter-style sample-counter {
system: additive;
additive-symbols: 90 "\3288\3289", 80 \3287\3289, 70 \3286\3289, 60 \3285\3289, 50 \3284\3289, 40 \3283\3289, 30 \3282\3289, 20 \3281\3289, 10 \3289, 9 \3288, 8 \3287, 7 \3286, 6 \3285, 5 \3284, 4 \3283, 3 \3282, 2 \3281, 1 \3280;
/* 90 U+3288U+3289(“㊈㊉”), 80 U+3287U+3289(“㊇㊉”), 70 U+3286U+3289(“㊆㊉”), 60 U+3285U+3289(“㊅㊉”), 50 U+3284U+3289(“㊄㊉”), 40 U+3283U+3289(“㊃㊉”), 30 U+3282U+3289(“㊂㊉”), 20 U+3281U+3289(“㊁㊉”), 10 U+3289(“㊉”), 9 U+3288(“㊈”), 8 U+3287(“㊇”), 7 U+3286(“㊆”), 6 U+3285(“㊅”), 5 U+3284(“㊄”), 4 U+3283(“㊃”), 3 U+3282(“㊂”), 2 U+3281(“㊁”), 1 U+3280(“㊀”) */
range: 1 99;
}
  1. 東京スカイツリー
  2. 対馬オメガ局送信用鉄塔
  3. 硫黄島ロランC主局(初代)
  4. 硫黄島ロランC主局(2代)
  5. 南鳥島ロランC局(初代)
  6. 東京タワー
  7. NHK川口送信局
  8. あべのハルカス
  9. 明石海峡大橋
  10. 横浜ランドマークタワー
  11. 虎ノ門ヒルズ森タワー
  12. りんくうゲートタワービル
  13. 大阪府咲洲庁舎
  14. おおたかどや山標準電波送信所
  15. 依佐美送信所
ol { list-style-type: sample-counter;}

@counter-style sample-counter {
system: additive;
additive-symbols: 1000 \1D544, 900 \2102\1D544, 500 \1D53B, 400 \2102\1D53B, 100 \2102, 90 \1D54F\2102, 50 \1D543, 40 \1D54F\1D543, 10 \1D54F, 9 \1D540\1D54F, 5 \1D54D, 4 \1D540\1D54D, 1 \1D540;
/* 1000 U+1D544(“𝕄”), 900 U+2102U+1D544(“ℂ𝕄”), 500 U+1D53B(“𝔻”), 400 U+2102U+1D53B(“ℂ𝔻”), 100 U+2102(“ℂ”), 90 U+1D54FU+2102(“𝕏ℂ”), 50 U+1D543(“𝕃”), 40 U+1D54FU+1D543(“𝕃𝕏”), 10 U+1D54F(“𝕏”), 9 U+1D540U+1D54F(“𝕀𝕏”), 5 U+1D54D(“𝕍”), 4 U+1D540U+1D54D(“𝕀𝕍”), 1 U+1D540(“𝕀”) */
range: 1 3999;
}
  1. 東京スカイツリー
  2. 対馬オメガ局送信用鉄塔
  3. 硫黄島ロランC主局(初代)
  4. 硫黄島ロランC主局(2代)
  5. 南鳥島ロランC局(初代)
  6. 東京タワー
  7. NHK川口送信局
  8. あべのハルカス
  9. 明石海峡大橋
  10. 横浜ランドマークタワー
  11. 虎ノ門ヒルズ森タワー
  12. りんくうゲートタワービル
  13. 大阪府咲洲庁舎
  14. おおたかどや山標準電波送信所
  15. 依佐美送信所
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク