ol 要素

概要

HTML 順序付きリスト要素 (<ol>) は、項目の順序付きリストを表示します。一般的に、順序付きリストの項目の先頭に、数字、ローマ数字、アルファベットなどの番号が表示されます。この順序付きリストのスタイルは、ページの HTML 記述では定義されていませんが、CSS に関連付けられ、list-style-type プロパティを使用してスタイル付けできます。

<ol> 要素と <ul> 要素で定義されたリストの入れ子の階層数に上限はありません。

属性

他のすべての HTML 要素と同様に、この要素は グローバル属性 をサポートします。

compact

この真偽値を持つ属性は、リストをコンパクトなスタイルで描画すべきというヒントを提供します。この属性の解釈はユーザエージェントに依存するため、すべてのブラウザで動作するわけではありません。

注記: この属性は非推奨のため使用してはいけません: <ol> 要素は CSS でスタイル付けしてください。compact 属性と似た効果を得るには、CSS プロパティの line-height を使用し、値を 80% にしてください。

reversed HTML5

この真偽値属性は、項目が逆順に並ぶように指定します。つまり最も重要でない項目がリストの最初になります。ブラウザは、デフォルトでは、項目を逆順で表示します。

startHTML5

この整数値を持つ属性は、リスト項目の順序の開始値を指定します。start の値は常に数値を記述しますが、リスト要素の順序の形式は XXXI などのローマ数字や文字が使われることがあります。例えば、"C" という文字から始めるには、<ol start="3"> と書きます。

注記: この属性は HTML4 で非推奨ですが、HTML5 で再び導入されました。

type

順番の形式を指示します:

• 'a' は、英小文字を示します
• 'A' は、英大文字を示します
• 'i' は、小文字のローマ数字を示します
• 'I' は、大文字のローマ数字を示します
• '1' は、数字を示します (既定値)

タイプセットは、異なる type 属性が閉じた <li> 要素内で使用されない限り、リスト全体に使用されます。

注記: この属性は HTML4 で非推奨になりましたが、HTML5 で再び導入されました。リスト番号の値に関する事情 (例えば項目が番号や文字で参照されている法的文書や技術文書) がなければ、代わりに CSS の list-style-type プロパティを使用するべきです。

例

簡単な例

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

上記の HTML の出力:

1. first item
2. second item
3. third item

start 属性を使う例

<ol start="7">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

上記の HTML の出力:

7. first item
8. second item
9. third item

入れ子のリスト

<ol>
  <li>first item</li>
  <li>second item      <!-- ここには終了タグ </li> はありません -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>                <!-- ここに終了タグ </li> があります -->
  <li>third item</li>
</ol>

上記の HTML の出力:

1. first item
2. second item
   1. second item first subitem
   2. second item second subitem
   3. second item third subitem
3. third item

入れ子の <ol> 要素と <ul> 要素

<ol>
  <li>first item</li>
  <li>second item      <!-- 注目！ 閉じる </li> タグはここに置かれていません -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>                <!-- ここに閉じる </li> タグがあります -->
  <li>third item</li>
</ol>

上記の HTML の出力:

1. first item
2. second item
   • second item first subitem
   • second item second subitem
   • second item third subitem
3. third item

仕様

ブラウザ実装状況

関連情報

• 他のリスト関連の HTML 要素: <ul>、 <li>、 <menu> および廃止された <dir>
• <ol> 要素のスタイル付けに役立つ CSS プロパティ:
  • list-style プロパティは、順序の表示方法を選ぶのに役立ちます。
  • CSS counters は、複雑な入れ子のリストを扱うのに役立ちます。
  • <line-height プロパティは、非推奨の compact 属性をシミュレートするのに役立ちます。
  • margin プロパティは、リストの字下げを制御するのに役立ちます。