【CSS3】CSSカウンター(counter関数)

# 概要
「セクション1..2..3..」などの連番を実装したい場合に有効的である、カウンターをCSSで実現する方法を記載する。

# この記事で理解できること
* CSSでのカウンター作成方法
* CSSのcounter関数の使用方法
* counter関数の関連プロパティ、関連要素

# 必要なCSSプロパティ
| プロパティ名 | 内容 | 書式 |
|:-----------|:------------|:------------|
| counter-reset | カウンター(値を管理する変数)の初期値を設定する<br>※このプロパティを指定したタグやclassが出てくるたびに値が初期化される | counter-reset: {値を管理したい変数名} {初期値}; |
| counter-increment | 値の増加値を設定 | counter-increment: {変数名} {増加数} |
| content| 表示形式を指定(counter関数はこのプロパティで使用) | {付加値(前)} content: counter({変数名}) {付加値(後)} |
>**contentプロパティについて** 
>「ポイント1:」や「第1章:」などと表示したい場合、{付加値(前・後)}と記載している箇所に値を指定することで<br>カウントする値の前後(「ポイント」や「:」にあたる箇所)の表示を設定できる。

# 作成の流れ
**① カウンター変数に初期値を設定(初期化)**
**② 値の増加数を指定**
**③ 表示形式を指定**

★ カウンターはある要素の擬似要素(:beforeなど)を用いて使用することが多い。
★ ①は実際にカウンター値を使用するタグ(要素)を囲っているタグ(要素)に指定する必要があります。

実際に例を見た方が理解できると思いますので、次へいきましょう。

# 実際に作成してみる
※bodyタグ・タグ内の要素以外は省略しています。

## 作成例①

![スクリーンショット 2021-12-05 4.45.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640274/c102e84a-7de6-929f-0eb7-6b786155b885.png)

```html
<body>
  <ul class="menu-list">
    <li class="menu-item">メニューアイテム</li>
    <li class="menu-item">メニューアイテム</li>
    <li class="menu-item">メニューアイテム</li>
  </ul>
</body>
```

```style.css
/* liタグデフォルトの「・」を非表示にしておきたいので設定 */
li {
  list-style: none;
}

/* 今回ulタグに指定したclass */
.menu-list {
  counter-reset: number 0;      /* ① カウンター変数に初期値を設定 :　今回は「number」という変数名で値を管理し、初期値を0に設定 */
}

/* 今回liタグに指定したclassの擬似要素へ指定 */
.menu-item::before {
  counter-increment: number 1;  /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */
  content: counter(number) ' '; /* ③ 表示形式を指定 : counter関数の引数には①ので作成した変数を指定し、カウンター値の後ろにスペースを指定 */
}
```

## 作成例②
![スクリーンショット 2021-12-05 5.09.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640274/fbd7a3fc-c76e-3435-dfef-900d89628439.png)

```html
<body>
  <ul class="menu-list">
    <li class="menu-item">旅立ち</li>
    <li class="menu-item">出会い</li>
    <li class="menu-item">別れ</li>
  </ul>
</body>
```

```css
/* liタグデフォルトの「・」を非表示にしておきたいので設定 */
li {
  list-style: none;
}

/* 今回ulタグに指定したclass */
.menu-list {
  counter-reset: number 0;             /* ① カウンター変数に初期値を設定 :　今回は例として「number」という値を管理する変数名で初期値を0に設定 */
}

/* 今回liタグに指定したclassの擬似要素へ指定 */
.menu-item::before {
  counter-increment: number 1;         /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */
  content: '第' counter(number) '章： '; /* ③ 表示形式を指定 : 今回はカウンター値の前後に付加値を設定 */
}
```

## counter関数のスタイル(style)
counter関数にCSS側で用意されているスタイル(style)を指定することで、<br>以下のようなスタイル設定を行うことができる。(作成例②の例を漢数字にしたい場合など) 
参考資料 ： [CSS Counter Styles Level 3](https://triple-underscore.github.io/css-counter-styles-ja.html#typedef-counter-style)

![スクリーンショット 2021-12-05 5.14.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640274/ebdfe4a2-880f-32e4-b2ca-138b97649675.png)

```html
<!-- 作成例②と同じ -->
<body>
  <ul class="menu-list">
    <li class="menu-item">旅立ち</li>
    <li class="menu-item">出会い</li>
    <li class="menu-item">別れ</li>
  </ul>
</body>
```

```css
/* liタグデフォルトの「・」を非表示にしておきたいので設定 */
li {
  list-style: none;
}

/* 今回ulタグに指定したclass */
.menu-list {
  counter-reset: number 0;      /* ① カウンター変数に初期値を設定 :　今回は例として「number」という値を管理する変数名で初期値を0に設定 */
}

/* 今回liタグに指定したclassの擬似要素へ指定 */
.menu-item::before {
  counter-increment: number 1;  /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */
  content: '第' counter(number, cjk-ideographic) '章： '; /* ③ 表示形式を指定 : counter関数の漢数字スタイルを指定 */
}
```