2022年1月3日

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

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

リストタグとCSSを記述

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

  • 番号付きリスト
  • 番号付きリスト
  • 番号付きリスト
  • 番号付きリスト
  • 番号付きリスト
.decimal{ margin-left: 30px;}
.decimal li{ list-style-type: decimal;}

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

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

番号を途中から開始するために「value」を指定

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

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

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

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

番号を途中から開始するための「value」を複数指定

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

  • 5から開始
  • 番号付きリスト
  • 10から開始
  • 番号付きリスト
  • 15から開始
  • 番号付きリスト
  • 6から開始する番号付きリスト
  • 番号付きリスト
  • 10から開始
  • 番号付きリスト
  • 15から開始
  • 番号付きリスト

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です