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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
---
title: counters()
slug: Web/CSS/counters()
tags:
- CSS
- CSS Counter
- CSS Function
- Function
- Reference
translation_of: Web/CSS/counters()
---
<p>{{CSSRef}}</p>
<p><strong><code>counter()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、階層的なカウンターを利用できるようにし、指定された名前付きカウンターがあれば、その現在値を表す連結された文字列を返します。 <code>counters()</code> 関数には <code>counters(<var>name</var>, <var>string</var>)</code> と <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code> の二つの形式があります。一般的には<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>と一緒に使用されますが、理論的には <code><a href="/ja/docs/Web/CSS/string"><string></a></code> 値に対応している場所ならばどこでも使用できます。生成されるテキストは、指定された名前を持つすべてのカウンターの値で、指定された文字列で区切られた一番外側から一番内側までの値です。カウンターは、指定されたスタイルで表示され、スタイルが指定されていない場合は既定で <code>decimal</code> で表示されます。</p>
<pre class="brush: css notranslate">/* 単純な使用法 - スタイルは既定で decimal */
counters(countername, '-');
/* カウンターの表示の変更 */
counters(countername, '.', upper-roman)</pre>
<p><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">カウンター</a>自身には視覚的効果が何もありません。 <code>counters()</code> 関数 (および {{cssxref("counter", "counter()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。</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>
<dt>{{cssxref("<string>")}}</dt>
<dd>任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば <code>\000A9</code> は著作権記号を表します。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
<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>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; highlight[2] notranslate">ol {
counter-reset: listCounter;
}
li {
counter-increment: listCounter;
}
li::marker {
content: counters(listCounter, '.', upper-roman) ') ';
}
li::before {
content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-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>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</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: counters(count, '.', upper-alpha) ') ';
}
li::before {
content: counters(count, ".", <dfn>decimal-leading-zero</dfn>) " == " counters(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.counters")}}</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-set")}}</li>
<li>{{cssxref("counter-reset")}}</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>
<li>{{cssxref("::marker")}}</li>
</ul>
|
