自動ナンバリングならolよりもcssカウンター

下記のような、数字付きのリスト的な文章があるとします。

1.テキスト
2.テキストテキストテキスト
3.テキストテキスト
4.テキスト
5.テキストテキストテキスト


これをコーディングする場合、順序付きリスト要素＜ol＞を使用する事が多いと思います。

1からではなく任意の数字からスタートさせたり、逆順にしたり、数字ではなくアルファベット・時計数字などに変えることもできるので、文章のナンバリングは＜ol＞で事足りるかもですが、例えば2.〜の次に2-1.〜、2-2.〜と入れ子の数字が続く場合はどうでしょうか。

1.テキスト
2.テキストテキストテキスト
  2-1.テキストテキスト
  2-2.テキスト
  2-3.テキストテキストテキスト
3.テキスト

cssで色々工夫したら表現できるとは思いますが、このような形の場合はcssカウンターを使用したほうがスムーズかも。

といいつつ、時々しか使わないので使い方を忘れがちでして、今回も主に下記サイトを参考にさせていただきました。
CSSカウンターで自動ナンバリング
CSSカウンターって知ってる？要素に自動でナンバリング（数字）しよう

自動ナンバリングでコーディングしておくと、順番の入れ替えや増減の多い文章などの場合修正が少し楽になるかもしれません。

詳しい説明は上記参考サイトにおまかせし、サンプルを作成してみました。

See the Pen CSSカウンター by plus-loop (@PlusLoop) on CodePen.

＜ol＞との違いは、レイアウトの自由度が高いところでしょうか。

広く普及している＜ol＞と違って人気が無さげなcssカウンターですが、機会があればしっかりと使っていこうと思います。