1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
title: counter()
slug: Web/CSS/counter()
tags:
- CSS
- CSS Counter
- CSS Function
- Function
- Reference
translation_of: Web/CSS/counter()
---
<p>{{CSSRef}}</p>
<p><strong><code>counter()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>において用いるのが多いものの、理論的には<code><a href="/ja/docs/Web/CSS/string"><string></a></code>に対応するすべての箇所で用いることができます。</p>
<pre class="brush: css notranslate">/* 単純な使用法 */
counter(countername);
/* カウンターの表示の変更 */
counter(countername, upper-roman)</pre>
<p><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">カウンター</a>自身には視覚的効果が何もありません。 <code>counter()</code> 関数 (および {{cssxref("counters", "counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。</p>
<div class="blockIndicator note">
<p>注: <code>counters()</code> 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。</p>
<p><a href="#Browser_compatibility">ブラウザーの互換性の表</a>を注意深く確認してから本番環境に用いてください。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt>{{cssxref("<custom-ident>")}}</dt>
<dd>カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また <code>none</code>, <code>unset</code>, <code>initial</code>, <code>inherit</code> という名前は禁止です。</dd>
<dt><code style="white-space: nowrap;"><counter-style></code></dt>
<dd>カウンタースタイル名または {{cssxref("symbols()")}} 関数です。カウンタースタイル名には <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の<a href="/ja/docs/Web/CSS/CSS_Counter_Styles">定義済みカウンタースタイル</a>があります。省略された場合は、既定で <code>decimal</code> になります。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{CSSSyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="default_value_compared_to_upper_Roman" name="default_value_compared_to_upper_Roman">既定値と upper-roman との比較</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html; notranslate"><ol>
<li></li>
<li></li>
<li></li>
</ol></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; highlight[2] notranslate">ol {
counter-reset: listCounter;
}
li {
counter-increment: listCounter;
}
li::after {
content: "[" counter(listCounter) "] == ["
counter(listCounter, upper-roman) "]";
}</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}</p>
<h3 id="decimal-leading-zero_compared_to_lower-alpha" name="decimal-leading-zero_compared_to_lower-alpha">decimal-leading-zero と lower-alpha との比較</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html; notranslate"><ol>
<li></li>
<li></li>
<li></li>
</ol></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css; highlight[2] notranslate">ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::after {
content: "[" counter(count, <dfn>decimal-leading-zero</dfn>) "] == ["
counter(count, lower-alpha) "]";
}</pre>
<h4 id="Result_2" name="Result_2">結果</h4>
<p>{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}</td>
<td>{{Spec2("CSS3 Lists")}}</td>
<td>変更なし</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.types.counter")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンターの使用</a></li>
<li>{{cssxref("counter-reset")}}</li>
<li>{{cssxref("counter-set")}}</li>
<li>{{cssxref("counter-increment")}}</li>
<li>{{cssxref("@counter-style")}}</li>
<li>CSS の <code><a href="/ja/docs/Web/CSS/counters">counters()</a></code> 関数</li>
</ul>
|
