このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
<ol>: 順序付きリスト要素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<ol> は HTML の要素で、項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。
試してみましょう
<ol>
<li>Mix flour, baking powder, sugar, and salt.</li>
<li>In another bowl, mix eggs, milk, and oil.</li>
<li>Stir both mixtures together.</li>
<li>Fill muffin tray 3/4 full.</li>
<li>Bake for 20 minutes.</li>
</ol>
li {
font:
1rem "Fira Sans",
sans-serif;
margin-bottom: 0.5rem;
}
属性
この要素はグローバル属性も受け付けます。
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> 要素を使用することができます。
例
単純な例
<ol>
<li>Fee</li>
<li>Fi</li>
<li>Fo</li>
<li>Fum</li>
</ol>
結果
ローマ数字の使用
<ol type="i">
<li>Introduction</li>
<li>List of Grievances</li>
<li>Conclusion</li>
</ol>
結果
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>
結果
入れ子のリスト
<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>
結果
順序付きリストの中の順序なしリスト
<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 |
ブラウザーの互換性
Loading...
関連情報
- 他のリスト関連の HTML 要素:
<ul>、<li>、<menu> <ol>要素のスタイル付けに役立つ CSS プロパティ:list-styleプロパティは、序数の表示方法を選ぶのに便利です。- CSS カウンターは、複雑な入れ子のリストを扱うのに便利です。
line-heightプロパティは、非推奨のcompact属性をシミュレートするのに役立ちます。marginプロパティは、リストの字下げを制御するのに役立ちます。