HTMLのol要素ではリストアイテムに対して連番をあてることができますが、デフォルトでいくつかのスタイルが用意されているものの、デザインに合わないこともあるかと思います。そこで今回はリストアイテムにあてる連番をカスタマイズする方法についてまとめていきたいと思います。   まずはol要素で連番をあてるリストを作成します。CSSでは、list-style-typeのプロパティでデフォルトの連番があてられるスタイルを指定できます。

// HTML
<ol>
 <li>東京都</li>
 <li>大阪府</li>
 <li>北海道</li>
</ol>

// CSS
ol {
 list-style-type: decimal;
}

  このようにコーディングした場合、下記のように表示されるようになります。

1. 東京都
2. 大阪府
3. 北海道

  上記は数字での連番ですが、list-style-typeプロパティに指定する値を変えることでいろんな表記にすることができます。主なものをいくつか挙げておきます。  

decimal-leading-zero	ゼロがついた数字（01. 02. 03. ........）
lower-alpha	小文字アルファベット（a. b. c. ........）
cjk-ideographic	漢数字（一. 二. 三. ........）
upper-roman	大文字ローマ数字（Ⅰ. Ⅱ. Ⅲ. ........）
katakana	カタカナでのアイウエオ（ア. イ. ウ. ........）
hiragana-iroha	ひらがなでのいろは（い. ろ. は. ........）

  このように、list-style-typeプロパティを使う方法では連番の形が限定的になってしまいますが、li要素に対して「counter-increment」プロパティを使うことで連番の形を独自のものにすることができます。   このcounter-incrementプロパティですが、その名の通り、CSSでカウンター増やしていくことができます。使い方はリストのアイテム要素となるものに対して、下記のようにcounter-incrementプロパティを設定します。そして値には任意の変数名を指定します。 【SCSS】

ol {
 list-style-type: none; 
 li {
  counter-increment: number;
  &::before {
   content: "No."counter(number)"：";
  }
 }
}

  そして、before擬似要素もしくはafter擬似要素のcontentプロパティに、counter関数を入れ、その引数に先ほどの変数名を指定します。また前後には文字列を合わせることができます。これで出力してみると、次のようにカスタマイズした連番をあてることができます。

No.1：東京都
No.2：大阪府
No.3：北海道

  counter関数の第二引数には、先ほど紹介したlist-style-typeプロパティの値を指定することで出力されるフォーマットを変えることができます。 【SCSS】

ol {
 list-style-type: none; 
 li {
  counter-increment: number;
  &::before {
   content: "その"counter(number, cjk-ideographic)"、";
  }
 }
}

  そうすると次のような文言にもマッチした連番をあてることができますね。

その一、東京都
その二、大阪府
その三、北海道

  また、文書の見出しのように入れ子で連番を振りたいときは、counter-resetプロパティを使って、指定した要素ごとに連番をリセットすることができます。 【HTML】

<dl>
 <dt>大項目</dt>
 <dd>小項目</dd>
 <dd>小項目</dd>
 <dt>大項目</dt>
 <dd>小項目</dd>
 <dd>小項目</dd>
</dl>

  例えば上記のような場合には、大項目ごとに小項目の連番をリセットする必要があります。ですので、大項目にあたるdt要素に対して下記のようにcounter-resetプロパティを指定します。 【SCSS】

dl {
 dt {
  counter-increment: heading;
  counter-reset: lead;
  &::before {
   content: "第"counter(heading)"条：";
  }
 }
 dd {
  counter-increment: lead;
  &::before {
   content: counter(lead)"項：";
   text-indent: 1em;
  }
 }
}

  counter-resetプロパティの値には、連番をリセットしたいcounter-incrementの値を指定します。そうすると下記のように特定の項目ごとに連番をリセットすることができます。

第1条：大項目
  1項：小項目
  2項：小項目
第2条：大項目
  1項：小項目
  2項：小項目

  これでいろんなケースにも対応できますね！また、あまり用途がないかもしれませんが、counter-incrementプロパティの値に入れる変数名の後に半角スペースを入れて整数値を指定すると、その整数値分だけカウントを進めることができます。

// 2ずつ連番が振られる
counter-increment: number 2;

 

---

  今回はCSSでリストアイテムにあてる連番をカスタマイズする方法をまとめてみました、nth-childなどのセレクタで実装しようとするとなかなか面倒ですが、counter-incrementプロパティを使うことで、リストアイテムの増減時にも自動で対応できるのでとても便利ですよね、機会があれば是非試してみてください。