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

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

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

属性

この要素にはグローバル属性があります。

compact

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

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

reversed HTML5

この真偽値属性は、項目が逆順に並ぶように指定します。

startHTML5

この整数値を持つ属性は、リスト項目の序数の開始値を指定します。序数の形式が XXXI のようなローマ数字や文字であっても、値は常に数値で表現します。 "C" という文字から始めるには、<ol start="3"> を使用します。

メモ: この属性は HTML4 で非推奨になりましたが、 HTML5 で再び導入されました。

type

順番の種類を指示します。

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

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

メモ: この属性は HTML4 で非推奨になりましたが、HTML5 で再び導入されました。（法律文書や技術文書の箇条書きなどのように）リスト番号の値に重要性ががない限り、代わりに CSS の list-style-type プロパティを使用するべきです。

使用上の注意

• 一般的に、順序付きリストの項目の先頭に、数字、ローマ数字、アルファベットなどの番号が表示されます。この順序付きリストのスタイルは、ページの HTML 記述では定義されていませんが、CSS に関連づけられ、list-style-type プロパティを使用してスタイル付けできます。
• <ol> 要素と <ul> 要素で定義されたリストの入れ子の階層数や交互に配置することの制限はありません。
• <ol> と <ul> は、どちらも項目のリストを表します。両者の違いは、 <ol> 要素では順序に意味があることです。使い分けの目安としては、項目の順序を変更してみてください。意味が変わるようであれば <ol> 要素を使用し、そうでない場合は、<ul> 要素が適しています。

例

単純な例

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

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

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

ローマ数字の使用

<ol type="i">
  <li>foo</li>
  <li>bar</li>
  <li>spam</li>
</ol> 

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

i. foo

ii. bar

iii. spam

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

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

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