HTML の <ol>
要素は、項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
コンテンツカテゴリ | フローコンテンツ。また、<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 を非推奨に指定 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 他のリスト関連の HTML 要素:
<ul>
、<li>
、<menu>
および廃止された<dir>
<ol>
要素のスタイル付けに役立つ CSS プロパティ:list-style
プロパティは、序数の表示方法を選ぶのに便利です。- CSS カウンターは、複雑な入れ子のリストを扱うのに便利です。
line-height
プロパティは、非推奨のcompact
属性をシミュレートするのに役立ちます。margin
プロパティは、リストの字下げを制御するのに役立ちます。