<ol>: 順序付きリスト要素

HTML の <ol> 要素は、項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。

コンテンツカテゴリ フローコンテンツ。また、<ol> 要素の子に少なくとも 1 個の <li> 要素を包含する場合は、知覚可能コンテンツ
許可されている内容 0個以上の <li>, <script>, <template> の各要素。
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素
Implicit ARIA role list
許可されている ARIA ロール directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM インターフェイス HTMLOListElement

属性

この要素はグローバル属性も受け付けます。

reversed HTML5
論理属性で、リストの項目が逆順で指定されていることを指定します。項目は大きい方から小さい方へ番号付けされます。
start HTML5
整数値を持つ属性で、リスト項目の序数の開始値を指定します。この値は、番号付けの種類が文字やローマ数字であっても、常にアラビア数字 (1, 2, 3, など) で指定します。例えば、 "d" の文字や "iv" のローマ数字から始める場合は、 start="4" を使用してください。
type
この属性は、番号付けの種類を設定します。
  • a は、英小文字を示します
  • A は、英大文字を示します
  • i は、小文字のローマ数字を示します
  • I は、大文字のローマ数字を示します
  • 1 は、数字を示します (既定値)

指定された種類は、内部の <li> 要素で異なる type 属性が使用されない限り、リスト全体に使用されます。

注: (法律文書や技術文書の箇条書きなどのように) リスト番号の種類に重要性がない限り、代わりに CSS の list-style-type プロパティを使用してください。

使用上の注意

ふつう、順序付きリストの項目は、先頭に数字や文字などのマーカーが表示されます。

<ol> 要素と <ul> 要素は、必要なだけ深く入れ子にすることができ、 <ol><ul> を好きなだけ変更することもできます。

<ol><ul> は、どちらも項目のリストを表します。両者の違いは、 <ol> 要素では順序に意味があることです。例えば次のようなものです。

  • レシピの手順
  • 道順
  • 栄養成分表示ラベルにおける成分の降順の一覧

どちらのリストを使用するか判断するには、リスト項目の順序を変更してみてください。意味が変わるようであれば <ol> 要素を使用し、そうでない場合は、 <ul> 要素を使用することができます。

単純な例

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

上記の HTML は次のように出力されます。

ローマ数字の使用

<ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol> 

上記の HTML は次のように出力されます。

start 属性の使用

<p>Finishing places of contestants not in the winners’ circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

上記の HTML は次のように出力されます。

入れ子のリスト

<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 は次のように出力されます。

順序付きリストの中の順序なしリスト

<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 は次のように出力されます。

仕様書

仕様書 状態 備考
HTML Living Standard
<ol> の定義
現行の標準 最新の W3C スナップショットである HTML5 から変更なし
HTML5
HTMLOListElement の定義
勧告 reversed および start 属性を追加、type の非推奨を解除
HTML 4.01 Specification
<ol> の定義
勧告 compact および type を非推奨に指定

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
olChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
compact
非推奨非標準
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
reversedChrome 完全対応 18Edge 完全対応 ≤79Firefox 完全対応 18IE 未対応 なしOpera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 18Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
startChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
typeChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

関連情報

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