CSSカウンターで文頭にナンバーを自動出力する方法

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

CSSカウンターとは
CSSカウンターの使い方

CSSカウンターとは

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

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

CSSカウンターの使い方

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

カウンターの表示

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

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

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

li {
  list-style: none;
}

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

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

See the Pen
bGdzJaZ by gri-t (@gri-t)
on CodePen.

これで、liごとに手動でナンバリングをしなくても、自動でナンバリングしてくれるので、今後liが増えていったとしても安心です。

カウンターの入れ子

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

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

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.)

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

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

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

CSSカウンターの使用 - MDN