CSS counter 自動ナンバリングまとめ

CSSで自動ナンバリング。JavaScriptを使わなくてもできる。

## counter基本形

```
<style>
body {
	counter-reset: num 0;	/* numを0にセット */
}
div:before {
	counter-increment: num 1;	/* numの増加数 */
	content: counter(num);	/* 表示形式 */
}
</style>
<body>
	<div>abc</div>
	<div>def</div>
	<div>ghi</div>
</body>
```
結果
```
1abc
2def
3ghi
```

## counter基本形にpadding付加

```
<style>
body {
	counter-reset: num 0;
}
div:before {
	counter-increment: num 1;
	content: counter(num);
	padding-right: 10px;	/* 追加 */
}
</style>
<body>
	<div>abc</div>
	<div>def</div>
	<div>ghi</div>
</body>
```
結果(おおむねこんな感じ)
```
1 abc
2 def
3 ghi
```

## dl dd の場合(敢えてolやulではない)

```
<style>
dl {
	counter-reset: num 0;
}
dd {
	margin: 0;
}
dd:before {
	counter-increment: num 1;
	content: counter(num);
	padding-right: 10px;
}
</style>
<dl>
	<dd>abc</dd>
	<dd>def</dd>
	<dd>ghi</dd>
</dl>
```
結果(おおむねこんな感じ)
```
1 abc
2 def
3 ghi
```

## 連番の前後にテキスト

```
<style>
dl {
	counter-reset: num 0;
}
dd {
	margin: 0;
}
dd:before {
	counter-increment: num 1;
	content: "第" counter(num) "問";	/* 表示形式 */
	padding-right: 10px;
}
</style>
<dl>
	<dd>abc</dd>
	<dd>def</dd>
	<dd>ghi</dd>
</dl>
```
結果(おおむねこんな感じ)
```
第1問 abc
第2問 def
第3問 ghi
```

## 漢数字や平仮名など

```
<style>
dl {
	counter-reset: num 0;
}
dd {
	margin: 0;
}
dd:before {
	counter-increment: num 1;
	content: "第" counter(num,cjk-ideographic) "問";
	padding-right: 10px;
}
</style>
<dl>
	<dd>abc</dd>
	<dd>def</dd>
	<dd>ghi</dd>
</dl>
```
結果(おおむねこんな感じ)
```
第一問 abc
第二問 def
第三問 ghi
```

【armenian】アルメニア数字<br>
【cjk-ideographic】漢数字 (一, 二, 三,)<br>
【decimal】アラビア数字 (1, 2, 3,)<br>
【decimal-leading-zero】先頭に0付き (01, 02, 03,)<br>
【georgian】グルジア数字<br>
【hebrew】ヘブライ数字<br>
【hiragana】平仮名-あいう (あ, い, う,)<br>
【hiragana-iroha】平仮名-いろは (い, ろ, は,)<br>
【katakana】片仮名-アイウ (ア,イ,ウ,)<br>
【katakana-iroha】片仮名-イロハ (イ,ロ,ハ,)<br>
【lower-alpha】小文字のアルファベット (a, b, c,)<br>
【lower-greek】小文字のギリシャ文字 (α, β, γ,)<br>
【lower-latin】小文字のラテン文字 (a, b, c,)<br>
【lower-roman】小文字のローマ数字 (ⅰ, ⅱ, ⅲ,)<br>
【upper-alpha】大文字のアルファベット (A, B, C,)<br>
【upper-latin】大文字のラテン文字 (A, B, C,)<br>
【upper-roman】大文字のローマ数字 (Ⅰ, Ⅱ, Ⅲ,)

## 入れ子

```
<style>
dl {
	counter-reset: num;
}
dd {
	margin: 0 0 0 10px;
}
dd:before {
	content: counters(num, ".") ".";
	counter-increment: num;
	padding-right: 10px;
}
</style>
<dl>
	<dd>a</dd>
	<dd>b
		<dl>
			<dd>c</dd>
			<dd>d</dd>
		</dl>
	</dd>
	<dd>e</dd>
</dl>
```
結果(おおむねこんな感じ)
```
1. a
2. b
 2.1. c
 2.2. d
3. e
```

CSS counter 自動ナンバリングまとめ

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他