カウンタ変数の使用例を以下に示します。
(1) 基本的なカウンタ使用例
基本的なカウンタの例です。count というカウンタ名を作成して p 要素が発生するたびに カウンタを +1 しています。
使用例（HTML）
<div class="counter-1">
<p>count : </p>
<p>count : </p>
<p>count : </p>
</div>
使用例（CSS）
.counter-1 {
counter-reset: count;
}
.counter-1 p {
margin: 0;
counter-increment: count;
}
.counter-1 p::after {
content: counter(count);
color: red;
}
【表示形式】
(2) カウンタ設定・更新例
カウンタの設定や更新の例です。count というカウンタ名を作成して途中での値設定や更新をしています。
使用例（HTML）
<div class="counter-2 reset">count reset 100
<p class="inc1">increment 1 -> </p>
<p class="inc2">increment 2 -> </p>
<p class="set50">set 50 -> </p>
<p class="inc1">increment 1 -> </p>
<p class="inc2">increment 2 -> </p>
<p class="set50">set 50 -> </p>
<p class="inc-1">increment -1 -> </p>
<p class="inc-2">increment -2 -> </p>
<p class="set-50">set -50 -> </p>
<p class="inc1">increment 1 -> </p>
<p class="inc2">increment 2 -> </p>
</div>
使用例（CSS）
.counter-2.reset {
counter-reset: count 100;
}
.counter-2 .set50 {
counter-set: count 50;
}
.counter-2 .set-50 {
counter-set: count -50;
}
.counter-2 p {
margin: 0;
}
.counter-2 .inc1 {
counter-increment: count 1;
}
.counter-2 .inc2 {
counter-increment: count 2;
}
.counter-2 .inc-1 {
counter-increment: count -1;
}
.counter-2 .inc-2 {
counter-increment: count -2;
}
.counter-2 p::after {
content: "count : " counter(count);
color: red;
}
【表示形式】
count reset 100
increment 1 ->
increment 2 ->
set 50 ->
increment 1 ->
increment 2 ->
set 50 ->
increment -1 ->
increment -2 ->
set -50 ->
increment 1 ->
increment 2 ->
(3) 親子関係のカウンタ例
親子関係になったカウンタの使用例です。親も子も count というカウンタ名を作成して更新をしていますが、親と子では別のカウンタになっていることがわかります。
使用例（HTML）
<ul class="counter-3">
<li>list item 1</li>
<li>list item 1
<ul>
<li>list item 2</li>
<li>list item 2</li>
<li>list item 2</li>
</ul>
</li>
<li>list item 1</li>
</ul>
使用例（CSS）
.counter-3 {
padding: 0;
margin: 0;
list-style: none;
counter-reset: count;
}
.counter-3 ul {
padding-left: 20px;
list-style: none;
counter-reset: count;
}
.counter-3 li {
counter-increment: count;
}
.counter-3 li::before {
content: counter(count) ". ";
color: red;
}
【表示形式】
- list item 1
- list item 1
- list item 2
- list item 2
- list item 2
- list item 1
(4) 親子関係で複合表示のカウンタ例
親子孫関係になったカウンタの使用例です。親子孫のそれぞれで、count というカウンタ名を作成して更新し、表示時には各カウンタを組み合わせて表示しています。
使用例（HTML）
<ul class="counter-4">
<li>list item 1
<ul>
<li>list item 2</li>
<li>list item 2</li>
</ul>
</li>
<li>list item 1
<ul>
<li>list item 2</li>
<li>list item 2
<ul>
<li>list item 3</li>
<li>list item 3</li>
</ul>
</li>
</ul>
</li>
<li>list item 1</li>
</ul>
使用例（CSS）
.counter-4 {
padding: 0;
margin: 0;
list-style: none;
counter-reset: count;
}
.counter-4 ul {
padding-left: 20px;
list-style: none;
counter-reset: count;
}
.counter-4 li {
counter-increment: count;
}
.counter-4 li::before {
content: counters(count, ".") " ";
color: red;
}
【表示形式】
- list item 1
- list item 1
- list item 1
(5) 数値以外のカウンタ例
カウンタの表示時に数値以外の形式で表示するカウンタの使用例です。下記の例では「ア・イ・ウ」（katakana）の形式で表示しています。
表示形式は、以下の値が設定可能です。
- disc
- （黒中点）
- circle
- （白中点）
- square
- （黒四角）
- lower-roman
- ⅰ・ⅱ・ⅲ
- upper-roman
- Ⅰ・Ⅱ・Ⅲ
- lower-greek
- α・β・γ
- decimal
- 1・2・3
- decimal-leading-zero
- 01・02・03
- lower-latin
- a・b・c
- lower-alpha
- a・b・c
- upper-latin
- A・B・C
- upper-alpha
- A・B・C
- cjk-ideographic
- 一・二・三
- hiragana
- あ・い・う
- katakana
- ア・イ・ウ
- hiragana-iroha
- い・ろ・は
- katakana-iroha
- イ・ロ・ハ
使用例（HTML）
<ul class="counter-5">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
使用例（CSS）
.counter-5 {
padding: 0;
margin: 0;
list-style: none;
counter-reset: count;
}
.counter-5 li {
counter-increment: count;
}
.counter-5 li::before {
content: "（" counter(count, katakana) "） ";
color: red;
}
【表示形式】
- list item
- list item
- list item
）
