＜ol要素＞ - 順序ありのリスト
公開日:
ol要素は、順序ありのリストを表す要素です。li要素と組み合わせて使います。リストの各項目には先頭から順番に番号が振られ、表示されます。
概要
- 名前
- ol (Ordered List)
- カテゴリー
- Flow content
- Palpable content: 子要素にli要素が1つ以上ある場合のみ。
- 配置できる場所
- Flow contentが期待される場所。
- コンテンツモデル
- 0個以上のli要素。
- Script-supporting element。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLOListElement
- デフォルトのスタイル
ol { display: block; list-style-type: decimal; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; }- 仕様書
- https://html.spec.whatwg.org/multipage/semantics.html#the-ol-element
属性
reversed
順序を逆にする。論理属性。
start
開始する番号を数値で指定する。
type
マーカーの種類をキーワードで指定する。
- 1
- 数字。
- a
- 小文字の英語。
- A
- 大文字の英語。
- i
- 小文字のローマ字。
- I
- 大文字のローマ字。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
li要素を使う
順序付きリストは、ol要素の子要素に、項目の数だけli要素を入れる形で使用します。番号はデフォルトで付くので、テキストを用意する必要はありません。
ol要素の使用例
<h1>好きな映画ランキング</h1>
<h2>良い例</h2>
<ol>
<li>フォーンブース (2003)</li>
<li>レオン (1994)</li>
<li>フェイスオフ (1997)</li>
</ol>
<h2>悪い例</h2>
<p>番号は自動で振られるので、テキストを用意する必要はありません。</p>
<ol>
<li>1位: フォーンブース (2003)</li>
<li>2位: レオン (1994)</li>
<li>3位: フェイスオフ (1997)</li>
</ol>順序付きリストとは？
順序付きリストとは、その名の通り、順序があるリストのことです。例えば、下記は順序があるリストと言えます。
- 目次。
- ランキング。
- 路線の停車駅。
- 曜日。
- しりとりで回答した言葉。
順序がないリストは、ol要素ではなくul要素でマークアップします。例えば、下記のようなリストです。厳密に言うと、これらもランクを付けたり、ある規則で並べれば、順序付きリストになります。ol要素にすべきかul要素にすべきかは、その時の文脈で判断しましょう。
- 製品の長所。
- プログラミング言語。
- 日本の都道府県。
- 心打たれた名言。
- 好きなメーカー。
逆順
reversed属性を付けることで、順序を逆順にできます。これは、カウントダウン形式でランキングを紹介したい時などに有用です。論理属性なので値はありません。
reverse属性の使用例
<h1>好きな映画ランキング</h1>
<h2>正順</h2>
<ol>
<li>フォーンブース (2003)</li>
<li>レオン (1994)</li>
<li>フェイスオフ (1997)</li>
</ol>
<h2>逆順</h2>
<ol reversed>
<li>フェイスオフ (1997)</li>
<li>レオン (1994)</li>
<li>フォーンブース (2003)</li>
</ol>マーカーの変更
type属性にキーワードを指定すると、通常は数字のマーカーの表記を変更できます。
start属性の使用例
<h1>好きな映画ランキング</h1>
<h2>type=1</h2>
<ol type="1">
<li>フォーンブース (2003)</li>
<li>レオン (1994)</li>
<li>フェイスオフ (1997)</li>
</ol>
<h2>type=a</h2>
<ol type="a">
<li>フォーンブース (2003)</li>
<li>レオン (1994)</li>
<li>フェイスオフ (1997)</li>
</ol>
<h2>type=A</h2>
<ol type="A">
<li>フォーンブース (2003)</li>
<li>レオン (1994)</li>
<li>フェイスオフ (1997)</li>
</ol>
<h2>type=i</h2>
<ol type="i">
<li>フォーンブース (2003)</li>
<li>レオン (1994)</li>
<li>フェイスオフ (1997)</li>
</ol>
<h2>type=I</h2>
<ol type="I">
<li>フォーンブース (2003)</li>
<li>レオン (1994)</li>
<li>フェイスオフ (1997)</li>
</ol>開始番号
start属性に数値を指定すると、その番号から開始するようにできます。負の数も指定できます。type属性が何であっても、指定するのは数値です。
start属性の使用例
<h1>好きな映画ランキング</h1>
<h2>通常</h2>
<ol>
<li>フォーンブース (2003)</li>
<li>レオン (1994)</li>
<li>フェイスオフ (1997)</li>
</ol>
<h2>start=5</h2>
<ol start="5">
<li>フォーンブース (2003)</li>
<li>レオン (1994)</li>
<li>フェイスオフ (1997)</li>
</ol>
<h2>start=-3</h2>
<ol start="-3">
<li>フォーンブース (2003)</li>
<li>レオン (1994)</li>
<li>フェイスオフ (1997)</li>
</ol>番号飛ばし
ol要素の子要素である場合にだけ、li要素にはvalue属性を付けることができます。指定方法はstart属性と同様です。数値を指定するとそれがその項目の番号となります。後続する要素にも影響がある点に注意しましょう。type属性が何であっても、指定するのは数値です。
value属性の使用例
<h1>好きな曜日ランキング</h1>
<h2>通常</h2>
<ol>
<li>月</li>
<li>火</li>
<li>水</li>
<li>木</li>
<li>金</li>
<li>土</li>
<li>日</li>
</ol>
<h2>番号飛ばし (value=50)</h2>
<ol>
<li>月</li>
<li>火</li>
<li>水</li>
<li value="50">木</li>
<li>金</li>
<li>土</li>
<li>日</li>
</ol>サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】＜ol要素＞ - 順序ありのリスト</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/ol/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>ol要素は、順序ありのリストを表します。</p>
<h1>しりとりの履歴</h1>
<p>先日の、しりとり全国大会の決勝戦の記録です。</p>
<ol>
<li>アカシア</li>
<li>アシカ</li>
<li>かまくら</li>
<li>ラッパ</li>
<li>パン</li>
</ol>
</body>
</html>