【HTML】olタグの番号を任意の好きな数字から始める | ※サンプルコードつき
HTMLで番号付きのリストとして使用するolタグですが、デフォルトでは ”1”から始まるリストになります。
”2”や ”11”と言ったように、好きな番号からリストを開始させたいときのコーディングについて紹介します。
olタグの番号を任意の数字で開始する
簡単な方法としては、start属性を使用する方法とvalue属性を使用する方法との2種類があります。
olタグの番号を任意の数字で開始する2種類の方法
- olタグでstart属性を使用する
- liタグでvalue属性を使用する
それでは具体的なコーディングの方法を順番に見ていきましょう。
olタグでstart属性を使用する
とってもシンプルで簡単な方法になります。
番号付きリストを開始するolタグにstart属性と開始したい番号の値を追加するだけです。
<ol start="2">
<li>リスト項目2</li>
<li>リスト項目3</li>
<li>リスト項目4</li>
</ol>- リスト項目2
- リスト項目3
- リスト項目4
liタグでvalue属性を使用する
liタグでvalue属性を使用して番号を指定することもできます。
この場合、リストの途中から番号を変えたり、すべてのリストに対して任意の数字を割り当てたりすることが可能になります。
任意の番号でリストを開始する
任意の番号でリストを開始する場合は、一番最初のliタグにvalue属性と開始する番号を追加します。
value属性で指定した値から順番に番号が割り振られていきます。
<ol>
<li value="11">リスト項目11</li>
<li>リスト項目12</li>
<li>リスト項目13</li>
</ol>- リスト項目11
- リスト項目12
- リスト項目13
リストの途中から番号を変える
value属性を追加した箇所から指定した番号が割り振られるので、リストの途中から番号を変更することも可能です。
番号を変更したりliタグにvalue属性を追加します。
<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li value="101">リスト項目101</li>
<li>リスト項目102</li>
</ol>- リスト項目1
- リスト項目2
- リスト項目101
- リスト項目102
任意の数字でリストを作成する
すべてのliタグにvalue属性を追加することでリストの番号を任意に指定することが可能になります。
<ol>
<li value="11">リスト項目11</li>
<li value="21">リスト項目21</li>
<li value="31">リスト項目31</li>
</ol>- リスト項目11
- リスト項目21
- リスト項目31
まとめ：olタグの番号を任意の番号で開始する
番号付きリストを使っていて開始番号を変更したいときは多いと思います。
そんな時のためにさっと使えて便利な属性なので覚えておきたいですね。
コーディングを全部覚えなくても、番号付きリストの項番を自由に変更できるんだと言うこと自体を抑えておくだけでもいいですね。