HTML Tag Reference
ol 要素
序列リストを表す
ol 要素は序列リストを表します。序列リストとは、項目の順序に意味があるリストのことです。
例えば、作業リストで、その実行順に意味があるものや、ランキングなど順位が付いたものなどが当てはまります。
ol 要素の仕様
- カテゴリ
-
子要素として 1個以上の li 要素を持つ場合はパルパブル・コンテンツ
- コンテンツモデル
-
- 0個以上の li 要素、およびスクリプト支援要素
- この要素を使用できる文脈
フロー・コンテンツが期待される場所
- この要素で使用できる属性
詳細説明
ol 要素に指定可能な属性は下記の通りです。
属性 | 概要 |
---|---|
reversed 属性 | reversed 属性は論理属性です。この属性が指定されると、順序が逆になっている序列リストとなります。つまり項目番号が降順となります。 |
start 属性 | 一番最初の項目に付ける番号を指定します。それをスタートの番号として、通常は昇順、reversed 属性が指定されている場合は降順に番号が振られます。値は半角の算用数字のみ指定可能です。 |
type 属性 | 各項目に表示されるリストマーカーの形式を指定します。初期値は算用数字です。CSS の list-style-type プロパティなどで指定することが多いですが、type 属性でも指定可能です。 |
type 属性
ol 要素に type 属性を指定することでリストマーカーの形式を指定することができます。指定できる値は下記の通りです。
属性値 | 概要 |
---|---|
type="1" |
算用数字のリストマーカーとなります。 |
type="a" |
小文字、半角アルファベットのリストマーカーとなります。a ~ z までリストマーカーが与えられた後は、ba ~ bz、ca ~ cz と続きます。 |
type="A" |
大文字、半角アルファベットのリストマーカーとなります。A ~ Z までリストマーカーが与えられた後は、BA ~ BZ、CA ~ CZ と続きます。 |
type="i" |
小文字、ローマ数字のリストマーカーとなります。 |
type="I" |
大文字、ローマ数字のリストマーカーとなります。 |
実際の表示サンプル
対応するブラウザでは下記にそれぞれの type 属性値ごとの序列リストが表示されます。
type="1"
のサンプル
- リスト項目-1
- リスト項目-2
- リスト項目-3
- リスト項目-4
- リスト項目-5
type="a"
のサンプル
- リスト項目-1
- リスト項目-2
- リスト項目-3
- リスト項目-4
- リスト項目-5
type="A"
のサンプル
- リスト項目-1
- リスト項目-2
- リスト項目-3
- リスト項目-4
- リスト項目-5
type="i"
のサンプル
- リスト項目-1
- リスト項目-2
- リスト項目-3
- リスト項目-4
- リスト項目-5
type="I"
のサンプル
- リスト項目-1
- リスト項目-2
- リスト項目-3
- リスト項目-4
- リスト項目-5
ol 要素の入れ子
ol 要素のコンテンツモデルは、0個以上の li 要素となります。つまり、li 要素以外を直接の子要素とすることはできませんので、ol 要素を入れ子にする場合でも、ol 要素の直下に別の ol 要素を置くことはできません。必ず、li 要素の子要素として使用する必要があります。詳しくはサンプルソースをご覧ください。
ol 要素のサンプルソース
<p> 必ず下記の順番で材料を加えてください。 順番を守らないと大変なことになります。 </p> <ol> <li>小麦粉 (10グラム)</li> <li>塩 (小さじ1)</li> <li>砂糖 (大さじ1)</li> <li>醤油 (小さじ1)</li> </ol>
<!-- リストを入れ子にした例 --> <ol> <li>品川駅に集合します <ol> <li>点呼をとります</li> <li>参加申し込みをして頂きます</li> <li>ゼッケンを受け取ります</li> <li>待機列にゼッケン番号順に並んでください</li> </ol> </li> <li>品川駅を出発し、大崎駅に向かいます</li> <li>大崎駅到着後、下記の物をお渡しします <ul> <li>お弁当</li> <li>お茶</li> <li>お手ふき</li> <li>お菓子</li> </ul> </li> </ol>
<p> 好きな映画ランキングを 10位から順に </p> <ol reversed="reversed"> <li>バック・トゥ・ザ・フューチャー</li> <li>インディージョーンズ</li> <li>マトリックス</li> <li>スターウォーズ</li> …省略… </ol>
<p> 操作手順を 3番目から繰り返しましょう </p> <ol start="3"> <li>ふたを開けます</li> <li>中身を取り出します</li> <li>お湯を入れます</li> </ol>
主要ブラウザの対応
IE11 | ○ |
---|---|
Edge(EdgeHTML) | ○ |
Edge(Chromium) | ○ |
Chrome | ○ |
Firefox | ○ |
Safari | ○ |
iOS Safari | ○ |
Android Chrome | ○ |