【CSS】番号付きリスト（ol）の番号を装飾する方法

CSS

2023年03月28日

番号付きリスト（ol）の番号を装飾したいとき、ありませんか？
デフォルトの数値を非表示にしてテキストで入力するのは、マークアップ的にスマートじゃない感じがしますし、番号が増減するとき更新が手作業になるのが面倒です。

ということで今回は、テキストで入力する以外の方法で、番号付きリストの番号を装飾する方法をご紹介します。

番号を装飾するには、CSSカウンターを使う

番号付きリストの番号を装飾する場合は、デフォルトのリストマークを非表示にして「CSSカウンター」を使うのが、便利でオススメです！

CSSカウンターを使うと、要素にナンバリングをすることができます。
ざっくり下記のような考え方です。

これを踏まえ、オーソドックスなナンバリングを見てみましょう。

カウンターの部分は、リセットしてカウントさせる、といたってシンプルです。
数字は擬似要素で表示させるので、cssでのカスタマイズが可能です。

入れ子になっている番号付きリストがありますが、これにもCSSカウンターが使えます。
サンプルコードを用意したので早速見てみましょう。
ポイントは、カウンターをリセットする場所です。

olに.parent、.child、.grandchildというクラス名をつけ、それぞれ分けてCSSを書いたので、どのようにリセットされているかチェックしてみてください。

ページ全体で通し番号にしたいとき（今回の場合.parent）は、bodyにリセットをかけます。
それ以外の場合は、カウントしたいolを囲う親要素に対してリセットをかけます。
ここを間違えるとカウントが狂います。うまくいかないときはリセットの場所を再度確認してみてください。

また、親要素のカウントや、カウントしている数字以外の文字列（今回の場合でいうと-や.）を擬似要素で表記させることもできます。
文字列はダブルクオーテーションで囲います。

番号付きリスト以外にもナンバリングできるのが、CSSカウンターの便利なところです。
例えば、セクションのタイトルに、順に番号を振りたいときなど使えます。

ここまで、CSSカウンターを使う方法を紹介してきましたが、実はデフォルトのリストマークにもCSSが指定できるのを知っていますか？
デフォルトのリストマークは、擬似要素::markerでスタイルを指定することができます。

このように、番号の色やサイズなど、テキスト情報をカスタマイズするだけなら::markerを使うとお手軽です！
ただ::markerは、一部のプロパティしか適用されない仕様で、背景色やボーダーは指定できないようです。
がっつりカスタマイズしたいときは、CSSカウンターを使いましょう！

以上、番号付きリスト（ol）の番号を装飾する方法をご紹介しました。
CSSカウンターは個人的に結構好きな技術なのですが、最初の設定が面倒なのかややこしいのか、あまり使っている人にお目にかかれません（悲しい）。。
基本を理解すればカンタンなので、使いこなしてスマートなマークアップを目指しましょう！