Smallville

smallville

olタグで指定した番号から表記する方法

HTML

HTMLのタグ「ol」タグは、「order list」の略で順番を表すリスト表記に使用します。リスト表示をすると当然ですが、1から順に表示されますが、1ではなく指定した番号からリスト表示させい場合の記述方法を紹介します。

通常のolリスト表示

通常どおりにolでリストにすると下記のように1から順に表示されます

  1. ピカチュウ
  2. ライチュウ
  3. サンド
  4. サンドパン
  5. ニドラン♀
  6. ニドリーナ
  7. ニドクイン
  8. ニドラン♂
  9. ニドリーノ

リストを指定の番号から表示したい場合

では、25から開始するように記述します

  1. ピカチュウ
  2. ライチュウ
  3. サンド
  4. サンドパン
  5. ニドラン♀
  6. ニドリーナ
  7. ニドクイン
  8. ニドラン♂
  9. ニドリーノ

このように25番から順に記載されます。ポケモン図鑑を記述するのに便利ですね。

記述法

コードの記述方法は、以下のようにolタグにstartで開始番号を指定することで可能になります。

<ol start="25">
<li>ピカチュウ</li>
<li>ライチュウ</li>
<li>サンド</li>
<li>サンドパン</li>
<li>ニドラン♀</li>
<li>ニドリーナ</li>
<li>ニドクイン</li>
<li>ニドラン♂</li>
<li>ニドリーノ</li>
</ol>

番号を逆から表示する場合

olタグにreversedをつけると番号を逆から表示します。先ほどのstartと併用することも出来ます。

  1. ピカチュウ
  2. アーボック
  3. アーボ
  4. オニドリル
  5. オニスズメ
  6. ラッタ
  7. コラッタ
<ol reversed start="25">
<li>ピカチュウ</li>
<li>アーボック</li>
<li>アーボ</li>
<li>オニドリル</li>
<li>オニスズメ</li>
<li>ラッタ</li>
<li>コラッタ</li>
</ol>

この記述方法をしっていると、olタグで表現できることが増えてくるので便利です。ぜひ活用しましょう。

スポンサーリンク