files/ja/web/css/counter-set/index.html


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

---
title: counter-set
slug: Web/CSS/counter-set
tags:
  - CSS
  - CSS Counter
  - CSS Lists
  - CSS Property
translation_of: Web/CSS/counter-set
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a>属性<strong><code>counter-set</code></strong>は，<a href="/ja/docs/Web/Guide/CSS/Counters">CSS計数</a>を指定した値に設定します。当属性は存在する計数を操作し，新しい計数を作成するのは指定された名前の計数が要素に未だ存在しない場合のみです。</span></p>

<div class="note">
<p><strong>注意:</strong> 計数値の増減分にはCSS属性{{cssxref("counter-increment")}}を用いることもできます。</p>
</div>

<h2 id="構文">構文</h2>

<pre class="brush:css no-line-numbers">/* "my-counter"を0に設定 */
counter-set: my-counter;

/* "my-counter"を-1に設定 */
counter-set: my-counter -1;

/* "counter1"を1に，"counter2"を4に設定 */
counter-set: counter1 1 counter2 4;

/* これより詳細度が低い規則で設定される全計数を消去する */
counter-set: none;

/* 大域値 */
counter-set: inherit;
counter-set: initial;
counter-set: unset;
</pre>

<p><code>counter-set</code>属性には次の内どれかを指定します。</p>

<ul>
 <li>計数名<code>&lt;custom-ident&gt;</code>に引き続く任意の<code>&lt;integer&gt;</code>。指定できる計数の個数に制限はなく，それぞれを空白で区切って指定します。</li>
 <li>予約語<code>none</code>。</li>
</ul>

<h3 id="値">値</h3>

<dl>
 <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
 <dd>設定する計数名。</dd>
 <dt>{{cssxref("&lt;integer&gt;")}}</dt>
 <dd>この値が，〔当CSSが規則を適用する〕要素が現れる度に計数を設定します。指定なき場合の既定値は0です。指定した名前の計数が現在要素に存在しない場合，その要素に指定された名前の計数を初期値0で新たに作成します（ただし，作成の後，速やかに他の値に設定又は増分されます）。</dd>
 <dt><code>none</code></dt>
 <dd>いかなる計数の設定も行いません。より詳細度の低い規則で定めた<code>counter-set</code>を上書きするのに使えるでしょう。</dd>
</dl>

<h3 id="形式文法">形式文法</h3>

{{csssyntax}}

<h2 id="事例">事例</h2>

<pre class="brush:css">h1 {
  counter-set: chapter section 1 page;
  /* "chapter"及び"page"計数を0に，
     "section"計数を1に設定 */
}
</pre>

<h2 id="仕様書">仕様書</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', '#propdef-counter-set', 'counter-set')}}</td>
   <td>{{Spec2('CSS3 Lists')}}</td>
   <td>初期定義</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="ブラウザ互換性">ブラウザ互換性</h2>

<div>


<p>{{Compat("css.properties.counter-set")}}</p>
</div>

<h2 id="関連項目">関連項目</h2>

<ul>
 <li><a href="/ja/docs/CSS/Counters">CSSカウンタの使用</a></li>
 <li>{{cssxref("counter-increment")}}</li>
 <li>{{cssxref("counter-reset")}}</li>
 <li>{{cssxref("@counter-style")}}</li>
 <li>{{cssxref("counter")}}及び{{cssxref("counters")}}関数</li>
 <li>{{cssxref("content")}}属性</li>
</ul>