From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/counter()/index.html | 140 ++++++++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 files/ja/web/css/counter()/index.html (limited to 'files/ja/web/css/counter()/index.html') diff --git a/files/ja/web/css/counter()/index.html b/files/ja/web/css/counter()/index.html new file mode 100644 index 0000000000..7793cfceae --- /dev/null +++ b/files/ja/web/css/counter()/index.html @@ -0,0 +1,140 @@ +--- +title: counter() +slug: Web/CSS/counter() +tags: + - CSS + - CSS Counter + - CSS Function + - Function + - Reference +translation_of: Web/CSS/counter() +--- +

{{CSSRef}}

+ +

counter() は CSS の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。擬似要素において用いるのが多いものの、理論的には<string>に対応するすべての箇所で用いることができます。

+ +
/* 単純な使用法 */
+counter(countername);
+
+/* カウンターの表示の変更 */
+counter(countername, upper-roman)
+ +

カウンター自身には視覚的効果が何もありません。 counter() 関数 (および {{cssxref("counters", "counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。

+ +
+

注: counters() 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。

+ +

ブラウザーの互換性の表を注意深く確認してから本番環境に用いてください。

+
+ +

構文

+ +

値

+ +
+
{{cssxref("<custom-ident>")}}
+
カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また none, unset, initial, inherit という名前は禁止です。
+
<counter-style>
+
カウンタースタイル名または {{cssxref("symbols()")}} 関数です。カウンタースタイル名には numeric, alphabetic, symbolic などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で decimal になります。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

既定値と upper-roman との比較

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+               counter(listCounter, upper-roman) "]";
+}
+ +

結果

+ +

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

+ +

decimal-leading-zero と lower-alpha との比較

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+  content: "[" counter(count, decimal-leading-zero) "] == ["
+               counter(count, lower-alpha) "]";
+}
+ +

結果

+ +

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}変更なし
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.counter")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf