ol 要素

概要

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

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

使用補足: <ol><ul> は、どちらも項目のリストを表示しますが、その表示方法に違いがあります。<ol> 要素は、順序に意味があります。指で数えるのと同じように、その順番を定めます。リスト項目の位置を変更してその意味が変わる場合は、<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 の出力:

  1. first item
  2. second item
  3. 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

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard Living Standard  
HTML5 勧告候補  
HTML 4.01 Specification 勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 1.0 1.0 1.0
reversed 属性 18 18.0 (18.0) 未サポート 未サポート 5.2
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) 1.0 (1.0) (有) (有) (有)
reversed 属性 (有) 18.0 (18.0) 未サポート 未サポート (有)

関連情報

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

Document Tags and Contributors

Contributors to this page: ethertank, Marsf, yyss
最終更新者: yyss,