HTMLのリストタグで自動的に振られる連番を途中から指定する方法

2022年1月3日

番号付きのリストを作成する時に使うリストタグですが、「1～5」と「6～10」を分けて表示させたい時があります。そんな時に使えるHTMLの解説です。

まず基本的なリストタグとCSSを記述します。


  番号付きリスト
  番号付きリスト
  番号付きリスト
  番号付きリスト
  番号付きリスト

.decimal{ margin-left: 30px;}
.decimal li{ list-style-type: decimal;}

表示するとこんな感じになります。「list-style-type: decimal;」で連番が先頭に付くようになりました。

ではここで、先頭の番号を6から開始してみます。


  6から開始する番号付きリスト
  番号付きリスト
  番号付きリスト
  番号付きリスト
  番号付きリスト

liタグに対して開始したい数字を「value=”6″」で指定すると、このように先頭の数字が6から始まってくれます。指定するのは開始させたいliタグのみで、以降は自動的に連番となります。

「value」を指定した以降は連番になるので、複数のliに指定すれば、指定した箇所からの連番となります。（このような利用ケースはあまり無い気はしますが）


  5から開始
  番号付きリスト
  10から開始
  番号付きリスト
  15から開始
  番号付きリスト

以上、HTMLのリストタグで自動的に振られる連番を途中から指定する方法でした。

素材の壺