<ol> 順序のあるリストを作成する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ 1個以上の <li> を含む場合、パルパブル・コンテンツ |
親にできる要素 | フロー・コンテンツを受け入れる要素 |
子にできる要素 | <li> 、<script> 、<template> |
対応ブラウザ | caniuseで確認 |
<ol>タグの説明
<ol>
は、順序のあるリストを表したい場合に使用します。順序のないリストを作成する場合は、<ul>
を採用して下さい。
まずリストの開始を<ol>
で宣言し、リストの項目を表す<li>
を任意の数だけ配置します。項目の中にはフロー・コンテンツが配置可能なので、リストを入れ子にすることも許可されています。
順序のあるリストでは、各項目の先頭に序数を表すマーカーが与えられます。type属性でリストのマーカーを選択することも可能ですが、見栄えに関する細かい調整はCSS(スタイルシート)で行いましょう。
<ol>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられませんが、ここで各項目のマーカーを一括で指定することも可能です。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。この要素に含まれる
<li>
の中にリストを入れ子にすることも許可されています。
<ol>に指定できる主な属性
- type
- 順序マーカーの種類を指定します。初期値は
1
です。リストの順序に重要性がない限り、CSSのlist-style-type
プロパティを使用することが推奨されています。1
= 1, 2, 3…a
= a, b, c…A
= A, B, C…i
= i, ii, iii…I
= I, II, III…
- reversed
- リストの項目が逆順で表示されるようになります。項目は大きい方から小さい方へ番号付けされます。これは論理属性です。
- start
- リスト項目の順序に対して開始値を指定できます。値は整数値です。例えば、順序マーカーが “d” や “iv” になるように設定したい場合は、この値を
4
にします。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<ol>の使い方とサンプル
順序のあるリストでは、各項目の先頭に序数を表すマーカーが与えられます。このマーカーの種類や表示位置は、スタイルシートで調整して下さい。
HTML
<ol type="1">
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>
表示確認
HTML
<ol type="a">
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>
表示確認
項目の子要素としてリストを配置することもできます。順序のあるリストと順序のないリストを上手く使い分けましょう。
HTML
<ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>
リストの子リストです。
<ul>
<li>子リスト項目</li>
<li>子リスト項目</li>
<li>子リスト項目</li>
</ul>
</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>
表示確認
<ol>に関連するHTMLタグ
リストを作成する要素 | |
---|---|
<ul> | 順序のないリストを作成する |
<ol> | 順序のあるリストを作成する |
<dl> | 定義リストを作成する |
<dt> | 定義リストの用語を表す |
<dd> | 定義リストの中で説明文を記載する |
<li> | リストの項目を作成する |
<menu> | ユーザーが操作可能なメニューを提供する |
<menuitem> | コンテキストメニューの項目を作成する |