浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】入れ子になっている<ol>要素のリストの番号を1.1や1.2にする

ちょっとハマったので、備忘録としてまとめ。
HTML の <ol> 要素で、順序のあるリストを作成した際、リストの中に入れ子を作り、そのリストの番号を 1.1 や 1.2 のようにする方法についてです。

 

変更前のサンプルは下記のとおりです。

  1. 項目1
  2. 項目2
    1. 項目1.1
    2. 項目1.2
  3. 項目3

項目1.1 と 項目1.2 というリストの番号を 1. から 1.1. に変更していきます。

今回参考にさせていただいた記事がこちら。

html – Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css? – Stack Overflow
https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1

で、実装した CSS は下記のとおりです。

ol {
  counter-reset: item; }
  li {
    display: block; }
    li:before {
      content: counters(item, ".") ". ";
      counter-increment: item; }

上記のように追加したところ、下のスクリーンショットの通り、意図した通りの見た目になりました!

なお、番号を 1.1. ではなく、1-1. のようにハイフン区切りにしたい場合は、li:before を下記のように変更します。

li:before {
  content: counters(item, "-") ". ";
  counter-increment: item; }

作業は以上です!

 

以上、CSS で入れ子になっている <ol> 要素のリストの番号を 1.1 や 1.2 に変更する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)