CSS3

：

CSS関数

：

counter()

　 編集：2022.07.13 by T.A.

[Edge]△。→●、mdn

名前付きカウンター。

counter(<counter-name>[, <counter-style>]?)

[CSS21] における list-style-type プロパティと［counter()／counters()］記法は、何らかの定義済みカウンター スタイルを識別するような、様々なキーワードを受容する。

<counter>
＝<counter()> | <counters()>
<counter-name> ●
カウンター名。<custom-ident> として表現する。キーワード none は不可。
<counter-style> ●
＝<counter-style-name> | <symbols()>;

<counter-style-name> が既存のカウンタスタイルを指していない場合、decimal カウンター スタイルと一致するように動作するものとする（が、算出値は decimal にはならない）。

<counter-style-name>
→定義済みカウンター スタイル

ASCII 大小無視で none に合致しない <custom-ident> であり、カウンター スタイルの 名前 を与える。<counter-style-name> は、ツリー視野な名前を与える。

以下のCSSが組み込んであります： 

<OL class=Test>
 <LI>LI1
 <LI>LI2
 <LI>LI3
 <LI>LI4
</OL>

以下のCSSが組み込んであります： 

<H4 class=Test>H4</H4>
<H5 class=Test>H5</H5>
<H5 class=Test>H5</H5>
<H5 class=Test>H5</H5>

単純な各種 定義済みカウンター スタイル

下に示すスタイルシートが利用する @counter-style 規則は、CSS 2／CSS 2.1 にて定義された すべてのカウンター スタイルを定義し直す。このスタイルシートは、規範的であり、ユーザー エージェント は、自身の ユーザー エージェント スタイルシートに含めるものとする（または、そうであったかのように動作するものとする）。

数量カウンター スタイル
decimal
西欧十進数
1、2、3、 、98、99、100
decimal-leading-zero
頭部がゼロで pad される十進数
01、02、03、 、98、99、100
arabic-indic
アラビア インド数字による付番
١‎、٢‎、٣‎、٤‎、 、٩٨‎、٩٩‎、١٠٠
‎
armenian、
upper-armenian
伝統的な大文字アルメニア語による付番
Ա、Բ、Գ、 、ՂԸ、ՂԹ、Ճ
lower-armenian
小文字アルメニア語による付番
ա、բ、գ、 、ղը、ղթ、ճ
bengali
ベンガル語による付番
১、২、৩、 、৯৮、৯৯、১০০
cambodian、
khmer
カンボジア語／クメール語による付番
១、២、៣、 、៩៨、៩៩、១០០
cjk-decimal
漢字による十進数
一、二、三、 、九八、九九、一〇〇
devanagari
デヴァーナーガリーによる付番
१、२、३、 、९८、९९、१००
georgian
伝統的なグルジア語による付番
ა、ბ、გ、 、ჟჱ、ჟთ、რ
gujarati
グジャラート語による付番
૧、૨、૩、 、૯૮、૯૯、૧૦૦
gurmukhi
グルムキー文字による付番
੧、੨,、੩、 、੯੮、੯੯、੧੦੦
hebrew
伝統的なヘブライ語による付番
א‎、ב‎、ג‎、 、צח‎、צט‎、ק
¶以下省く

decimal カウンター スタイルは、最終的なフォールバック スタイルとして常に可用になるようにするため、@counter-style 規則で上書きしないものとする。

これらの定義済みカウンター スタイルの規範的な定義は、次のスタイルシート片で供される： 

@counter-style decimal {
  system: numeric;
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
}

@counter-style decimal-leading-zero {
  system: extends decimal;
  pad: 2 '0';
}

@counter-style arabic-indic {
  system: numeric;
  symbols: "\660" "\661" "\662" "\663" "\664" "\665" "\666" "\667" "\668" "\669";
  /* ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩ */
}

¶省く 

@counter-style cjk-decimal {
  system: numeric;
  range: 0 infinite;
  symbols: \3007  \4E00  \4E8C  \4E09  \56DB  \4E94  \516D  \4E03  \516B  \4E5D;
  /* 〇 一 二 三 四 五 六 七 八 九 */
  suffix: "\3001";
  /* "、" */
}

¶省く

実装は、少なくとも上の @counter-style 規則で指定される範囲の hebrew を実装するものとするが、より広い範囲で実装してもよい。そうする場合、対応する range 記述子も実装された範囲を反映するものとする。

アルファベット式カウンター スタイル
lower-alpha、
lower-latin
小文字 ASCII 普通字
a、b、c、 、z、aa、ab
upper-alpha、
upper-latin
大文字 ASCII 普通字
A、B、C、 、Z、AA、AB
lower-greek
小文字古典ギリシア文字
α、β、γ、 、ω、αα、αβ
hiragana
辞書順序による平仮名 lettering
あ、い、う、 、ん、ああ、あい
hiragana-iroha
いろは順の平仮名 lettering
い、ろ、は、 、す、いい、いろ
katakana
辞書順序による片仮名 lettering
ア、イ、ウ、 、ン、アア、アイ
katakana-iroha
いろは順の片仮名 lettering
イ、ロ、ハ、 、ス、イイ、イロ

これらの定義済みカウンター スタイルの規範的な定義は、次のスタイルシート片で供される： 

@counter-style lower-alpha {
  system: alphabetic;
  symbols: a b c d e f g h i j k l m n o p q r s t u v w x y z;
}

@counter-style lower-latin {
  system: extends lower-alpha;
}

@counter-style upper-alpha {
  system: alphabetic;
  symbols: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z;
}

@counter-style upper-latin {
  system: extends upper-alpha;
}

@counter-style lower-greek {
  system: alphabetic;
  symbols: "\3B1" "\3B2" "\3B3" "\3B4" "\3B5" "\3B6" "\3B7" "\3B8" "\3B9" "\3BA" "\3BB" "\3BC" "\3BD" "\3BE" "\3BF" "\3C0" "\3C1" "\3C3" "\3C4" "\3C5" "\3C6" "\3C7" "\3C8" "\3C9";
  /* α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω */
}

@counter-style hiragana {
  system: alphabetic;
  symbols: "\3042" "\3044" "\3046" "\3048" "\304A" "\304B" "\304D" "\304F" "\3051" "\3053" "\3055" "\3057" "\3059" "\305B" "\305D" "\305F" "\3061" "\3064" "\3066" "\3068" "\306A" "\306B" "\306C" "\306D" "\306E" "\306F" "\3072" "\3075" "\3078" "\307B" "\307E" "\307F" "\3080" "\3081" "\3082" "\3084" "\3086" "\3088" "\3089" "\308A" "\308B" "\308C" "\308D" "\308F" "\3090" "\3091" "\3092" "\3093";
  /* あ い う え お か き く け こ さ し す せ そ た ち つ て と な に ぬ ね の は ひ ふ へ ほ ま み む め も や ゆ よ ら り る れ ろ わ ゐ ゑ を ん */
  suffix: "、";
}

@counter-style hiragana-iroha {
  system: alphabetic;
  symbols: "\3044" "\308D" "\306F" "\306B" "\307B" "\3078" "\3068" "\3061" "\308A" "\306C" "\308B" "\3092" "\308F" "\304B" "\3088" "\305F" "\308C" "\305D" "\3064" "\306D" "\306A" "\3089" "\3080" "\3046" "\3090" "\306E" "\304A" "\304F" "\3084" "\307E" "\3051" "\3075" "\3053" "\3048" "\3066" "\3042" "\3055" "\304D" "\3086" "\3081" "\307F" "\3057" "\3091" "\3072" "\3082" "\305B" "\3059";
  /* い ろ は に ほ へ と ち り ぬ る を わ か よ た れ そ つ ね な ら む う ゐ の お く や ま け ふ こ え て あ さ き ゆ め み し ゑ ひ も せ す */
  suffix: "、";
}

@counter-style katakana {
  system: alphabetic;
  symbols: "\30A2" "\30A4" "\30A6" "\30A8" "\30AA" "\30AB" "\30AD" "\30AF" "\30B1" "\30B3" "\30B5" "\30B7" "\30B9" "\30BB" "\30BD" "\30BF" "\30C1" "\30C4" "\30C6" "\30C8" "\30CA" "\30CB" "\30CC" "\30CD" "\30CE" "\30CF" "\30D2" "\30D5" "\30D8" "\30DB" "\30DE" "\30DF" "\30E0" "\30E1" "\30E2" "\30E4" "\30E6" "\30E8" "\30E9" "\30EA" "\30EB" "\30EC" "\30ED" "\30EF" "\30F0" "\30F1" "\30F2" "\30F3";
  /* ア イ ウ エ オ カ キ ク ケ コ サ シ ス セ ソ タ チ ツ テ ト ナ ニ ヌ ネ ノ ハ ヒ フ ヘ ホ マ ミ ム メ モ ヤ ユ ヨ ラ リ ル レ ロ ワ ヰ ヱ ヲ ン */
  suffix: "、";
}

@counter-style katakana-iroha {
  system: alphabetic;
  symbols: "\30A4" "\30ED" "\30CF" "\30CB" "\30DB" "\30D8" "\30C8" "\30C1" "\30EA" "\30CC" "\30EB" "\30F2" "\30EF" "\30AB" "\30E8" "\30BF" "\30EC" "\30BD" "\30C4" "\30CD" "\30CA" "\30E9" "\30E0" "\30A6" "\30F0" "\30CE" "\30AA" "\30AF" "\30E4" "\30DE" "\30B1" "\30D5" "\30B3" "\30A8" "\30C6" "\30A2" "\30B5" "\30AD" "\30E6" "\30E1" "\30DF" "\30B7" "\30F1" "\30D2" "\30E2" "\30BB" "\30B9";
  /* イ ロ ハ ニ ホ ヘ ト チ リ ヌ ル ヲ ワ カ ヨ タ レ ソ ツ ネ ナ ラ ム ウ ヰ ノ オ ク ヤ マ ケ フ コ エ テ ア サ キ ユ メ ミ シ ヱ ヒ モ セ ス */
  suffix: "、";
}
記号的カウンター スタイル
disc
次に似たベタ塗りの丸： 「•」U+2022 BULLET 。
circle
次に似た中空の丸： 「◦」U+25E6 WHITE BULLET 。
square
次に似たベタ塗りの方形： 「◾」U+25FE BLACK MEDIUM SMALL SQUARE 。
disclosure-open、
disclosure-closed
DETAILS 要素などの、開/閉状態をとり得る開閉式ウィジェットを指示するために適切な記号。

disc カウンター スタイルは、@counter-style 規則で上書き可能にならないものとする ― list-style-type プロパティの初期値が、ユーザー エージェントにきちんと既知になるよう。

これらの定義済みカウンター スタイルの規範的な定義は、次のスタイルシート片で供される： 

@counter-style disc {
  system: cyclic;
  symbols: \2022;
  /* • */
  suffix: " ";
}

@counter-style circle {
  system: cyclic;
  symbols: \25E6;
  /* ◦ */
  suffix: " ";
}

@counter-style square {
  system: cyclic;
  symbols: \25FE;
  /* ◾ */
  suffix: " ";
}

@counter-style disclosure-open {
  system: cyclic;
  suffix: " ";
  /*  symbols については、下の規範的テキストを見よ。  */
}

@counter-style disclosure-closed {
  system: cyclic;
  suffix: " ";
  /*  symbols については、下の規範的テキストを見よ。  */
}

別法として、ブラウザは、上で定義された文字に代えて 自身が生成した画像を利用して、これらのスタイルを具現化してもよい。そうするときは、画像を元の文字に似た見かけにした上で、そのサイズを目を引くよう 1em 平方にするものとする。

［disclosure-open／disclosure-closed］カウンター スタイル用のマーカは、［HTML の DETAILS 要素などの、開閉式ウィジェット］の開/閉状態を指示するに相応しい 画像または文字にするものとする。画像が方向的である場合、要素の書字モードに呼応するものとする ― Images 4 モジュールの 双向性に応じる画像 特能に類似な。例えば、disclosure-closed スタイルは、書字モードに応じて［U+25B8 BLACK RIGHT-POINTING SMALL TRIANGLE （ ▸ ）、U+25C2 BLACK LEFT-POINTING SMALL TRIANGLE （ ◂ ）］いずれかの文字を利用するであろう。一方で、disclosure-open スタイルは、U+25BE BLACK DOWN-POINTING SMALL TRIANGLE （ ▾ ） 文字を利用するであろう。

fixed カウンター スタイル
cjk-earthly-branch
漢字による “十二支” 序数
子、丑、寅、 、亥
cjk-heavenly-stem
漢字による “十干” 序数
甲、乙、丙、 、癸

これらの定義済みカウンター スタイルの規範的な定義は、次のスタイルシート片で供される： 

@counter-style cjk-earthly-branch {
  system: fixed;
  symbols: "\5B50" "\4E11" "\5BC5" "\536F" "\8FB0" "\5DF3" "\5348" "\672A" "\7533" "\9149" "\620C" "\4EA5";
  /* 子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥 */
  suffix: "、";
}

@counter-style cjk-heavenly-stem {
  system: fixed;
  symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";
  /* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */
  suffix: "、";
}
複階的な定義済みカウンタスタイル

¶以下省く

テスト
別画面に表示させて。
HTML：

ここに表示
¶[Edge]○
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：