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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

属性

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

reversed

論理属性で、リストの項目が逆順で指定されていることを指定します。項目は大きい方から小さい方へ番号付けされます。

start

整数値を持つ属性で、リスト項目の序数の開始値を指定します。この値は、番号付けの種類が文字やローマ数字であっても、常にアラビア数字 (1, 2, 3, など) で指定します。例えば、 "d" の文字や "iv" のローマ数字から始める場合は、 start="4" を使用してください。

type

番号付けの種類を設定します。

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

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

メモ: (項目が番号や文字で参照される法律文書や技術文書のように)リスト番号の種類に重要性がない限り、代わりに CSS の list-style-type プロパティを使用してください。

使用上の注意

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

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

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

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

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

単純な例

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

結果

ローマ数字の使用

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

結果

start 属性の使用

html
<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>

結果

技術的概要

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

仕様書

Specification
HTML
# the-ol-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ol
compact
DeprecatedNon-standard
reversed
start
type

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

関連情報

  • 他のリスト関連の HTML 要素: <ul><li><menu>

  • <ol> 要素のスタイル付けに役立つ CSS プロパティ:

    • list-style プロパティは、序数の表示方法を選ぶのに便利です。
    • CSS カウンターは、複雑な入れ子のリストを扱うのに便利です。
    • line-height プロパティは、非推奨の compact 属性をシミュレートするのに役立ちます。
    • margin プロパティは、リストの字下げを制御するのに役立ちます。