<ol>タグ《順序付きリストを作る》-HTML-

olタグ

olタグは順序のあるリストを作ります。

オーエル

ol

リスト(順序付き)を作る

文章が、「最初に○○です。次に○○です。その次に○○です。」という時は順序付きリストにした方が流れ、順番が理解しやすく読みやすくなります。
「○○」のように、項目に順番の順番があるリストは各項目に行頭番号を付ける、olタグでマークアップします。

順番が必要ないリスト(箇条書き項目)を作る場合は、ulタグを使います。

olタグの要素指定

<oll>~</ol>までをul要素といい、各リスト項目は<li>タグで記述します。

属性は開始タグに半角スペースで区切った後に設定します。

詳記(読み方) ordered list(オーダードリスト)
コンテンツモデル フローコンテンツ
カテゴリ グループ化
属性 グローバル属性
reversed属性(リスト順を降順【大きい順】表示、例:reversed)
start属性(開始番号を指定、例:start=”整数”)
子要素にできるもの 0個以上のli要素

ol要素の前後には、デフォルト(初期状態)で1行分程度の隙間(margin)が入ります。
リスト項目の左側にも余白(margin-left)が入りますのでCSSで調整します。

olの行頭番号は、1・2・・・(数字)ですがCSS(list-style-type)でローマ数字などに変更することができます。

サンプル(基本)

【表示例】

  1. サンプルリスト1
  2. サンプルリスト2
  3. サンプルリスト3

【HTML】

<ol>
  <li>サンプルリスト1</li>
  <li>サンプルリスト2</li>
  <li>サンプルリスト3</li>
</ol>

サンプル(ローマ数字の降順で表示)

【表示例】※IEでは降順に表示されない可能性があります。

  1. サンプルリスト1
  2. サンプルリスト2
  3. サンプルリスト3

【対応ブラウザ以外では下記のように表示されます】

  1. サンプルリスト1
  2. サンプルリスト2
  3. サンプルリスト3

【HTML】

<ol class="sample1"; reversed>;
  <li>サンプルリスト1</li>
  <li>サンプルリスト2</li>
  <li>サンプルリスト3</li>
</ol>

【CSS】

.sample1 {
  list-style-type: upper-roman;
}

olタグのヒント

li要素で作った項目は、上下の間が詰まって見えることがあります。項目と項目の間を少し開ける場合は、margin、line-heightなどで間を指定します。

li要素のvalue属性を省略すると、前のli要素に続く番号となります。

olタグ関連記事