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

スポンサーリンク

※本ページはプロモーションが含まれています

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

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

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

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

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

  1. counter-restで、カウンターを初期化
  2. counter-incrementでカウント開始
  3. 擬似要素を使って番号を表示

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

See the Pen 番号付きリスト(ol)の番号を装飾する方法①カウンターを使った番号付きリストのカスタマイズ by nico (@etsuko-kobanawa) on CodePen.

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

CSSカウンターなら複雑なカウントにも対応できる

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

See the Pen 番号付きリスト(ol)の番号を装飾する方法②複雑なカウント by nico (@etsuko-kobanawa) on CodePen.

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

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

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

CSSカウンターは、番号付きリスト以外でも使える

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

See the Pen 番号付きリスト(ol)の番号を装飾する方法③番号付きリスト以外の使用例 by nico (@etsuko-kobanawa) on CodePen.

デフォルトのリストマークも装飾可能

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

See the Pen 番号付きリスト(ol)の番号を装飾する方法④デフォルトのリストマークを装飾する by nico (@etsuko-kobanawa) on CodePen.

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

まとめ

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

【参考】
CSS カウンターの使用|mdn web docs
::marker|mdn web docs

コメント

タイトルとURLをコピーしました