連番リストの数字をカスタマイズ

このような連番のリストを使うことも多いですね。

1. リストリスト
2. リストリスト
3. リストリスト

しかし、連番のリストはいろいろなシーンで使うので、
例えばこんな感じのリストが作れたら便利だと思いませんか。

第１章
第２章
第３章

こういった場合、みなさんどうしてますか？
仕方なしにテキストで書いてる人も多いんじゃないでしょうか。

実はこれ、CSSを使って自動的に数字増やすことが可能なんです。
今回は、疑似要素:beforeを使って、好きなフォーマットでのスタイルの自動連番のスタイル設定方法を紹介します。
連番を生成するスタイルは、知らない人も多いかもしれませんが非常に便利なので覚えておきましょう。

CSSでリストの連番を好きなフォーマットで表示させる方法

実際のコードはこちらです。

See the Pen
アイコンを使ったリスト（数字付き） by Yoshimune (@hachidaime)
on CodePen.

まずは、

body {
  counter-reset: number 0;           /* number のカウンタを 0 に設定 */
}

counter-reset: number 0;

でnumberに対してカウンタを0で初期化します。
次に、カウントを上げていく指定と、
どのように表示するかの指定をしています。

ul li:before{
  counter-increment: number 1;      /* number 増加数を1に設定 */
  content: "第"counter(number)"章";      /* 表示形式 */
}

numberカウントを”1″ずつ増やすようにしています。
また、contentで表示するフォーマットを指定しています。
この部分を、自由なフォーマットに変えてください。

content: “その”counter(number);　　　←　その1、その2、その3 …
content: “No.”counter(number);　　　←　No.1、No.2、No.3 …

のように、好きに変更してください。

このように、自動的にカウントアップする数字とテキストを組み合わせて独自のリストを作ることができます。
わざわざ数字を書かなくても自動でナンバリングされ、途中で項目を足したり減らしたりしても、数字の不整合が起こりません。
このように作っておくと運用、メンテナンス性が全然違いますね。

ちなみに、今回のサンプルではli要素にナンバリングしていきましたが、
そのほかの要素でも同じように設定できます。
既存のコードに数字を付加したり、独自のコーディングルールの中でリストとしてのスタイルを設定することも可能です。

知っていると使える技術なので、ぜひ覚えておきましょう。