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

CSSカウンターとは

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

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

CSSカウンターの使い方

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

カウンターの表示

カウンターの値は、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 を1つずつ増加 */
  content: counter(num); /* カウンターの値を表示 */
 }

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

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

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

カウンターの入れ子

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

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

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

CSS

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

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