【CSS】CSSカウンターでナンバーを自動出力する方法

あまり使用したことがなかったのですが、改めて使用してみたら結構便利だと感じたので、CSSカウンターについてまとめていきたいと思います。

目次非表示

CSSカウンターとは？
基本的な使い方
1. カウンターの表示
2. カウンターの入れ子
表示形式を変更するには

CSSカウンターとは？

CSSカウンターは要素の数を数えて、自動でナンバリングする機能のことです。

使用するときは必ず、counter-resetプロパティを使用して、値を初期化する必要があります。次に、counter-incrementで値を増加させていきます。

基本的な使い方

counter-reset: 初期値をリセット
counter-increment: カウンターを増加・増減させる

See the Pen Untitled by tones (@tonescodedesign) on CodePen.

カウンターの表示

カウンターの値は、contentプロパティのcounter()またはcounters()関数を使用して擬似要素（::before / ::after）に表示することができます。

HTML

<ul>
  <li>ブレンドコーヒー</li>
  <li>カフェラテ</li>
  <li>カプチーノ</li>
  <li>エスプレッソ</li>
</ul>

CSS

ul {
  counter-reset: num; /* numという値のカウンターを設定し、 リセットします */
}

li {
  list-style: none;
}

li::before {
  counter-increment: num; /* num を１つずつ増加 */
  content: counter(num); /* カウンターの値を表示 */
}

擬似要素（::before）にスタイルを適応させてみます。

カウンターの入れ子

ol要素を使用して、ナンバリングをする場合、入れ子になった要素を「1.1」、「１.２」という様にナンバリングすることができます。

HTML

<ol>
  <li>ブレンドコーヒー
    <ol>
      <li>アイス</li>
      <li>ホット</li>
    </ol>
  </li>
</ol>

CSS

ol {
  counter-reset: nest;
}

li::before {
  counter-increment: nest;           
  content: counters(nest, ".") "";  /* counter（） ではなく counters（）を使用 */
}

先ほどは、counter()関数を使用していましたが、この場合はcounters()関数を使用しているところに注意が必要です。今回はピリオドで区切っているので「.」を指定していますが、ここは任意で区切りたいものを設定します。また、最後の「””」が空欄になっていますが、こちらも数字の最後にピリオドを打ちたい場合は「”.”」とすることもできます。

表示形式を変更するには

数字以外にも使える表示形式があります。

decimal	数字（デフォルト）
circle	白丸
decimal-leading-zero	先頭に0が付いた数字（例： 01, 02, 03…etc.）
lower-alpha	小文字のアルファベット（例： a, b, c…etc.)
upper-alpha	大文字のアルファベット（例： A, B, C…etc.)
lower-roman	小文字ローマ数字（例： ⅰ, ⅱ, ⅲ…etc.)
upper-roman	大文字ローマ数字（例： Ⅰ, Ⅱ, Ⅲ…etc.)
cjk-ideographic	漢数字（例：一, 二, 三…etc.)
hiragana	ひらがな（例：あ, い, う…etc.)
hiragana-iroha	いろは順（例：い, ろ, は…etc.)
katakana	カタカナ（例：ア, イ, ウ…etc.)
katakana-iroha	イロハ順（例：イ, ロ, ハ…etc.)

HTML

<ul class="alpha">
  <li>ブレンドコーヒー</li>
  <li>カフェラテ</li>
  <li>カプチーノ</li>
</ul>

CSS

.alpha {
  counter-reset: alpha;
}
  
li::before {
  counter-increment: alpha;
  content: counter(alpha, upper-alpha); /* 大文字アルファベット */
}

以上、自動でナンバリングしてくれるCSSカウンターの使い方でした。