<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> コンテキストメニューの項目を作成する