<ol>: OL 要素

最終更新：2026-10-13

<ol>OL 要素

<ol>（番号付きリスト）要素は番号付きリストを定義します。type 属性で番号のスタイルを切り替え、start で開始値を設定し、reversed で逆順にできます。

カテゴリ	リスト
コンテンツモデル	0 個以上の <li>、スクリプト対応要素
許可される親要素	フローコンテンツを受け入れる要素
閉じタグ	必要 `</ol>` タグ
ステータス	標準

📝 構文

<ol>
  <li>ステップ1</li>
  <li>ステップ2</li>
</ol>

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性	値	説明
`type`	Keyword	The numbering style. `1` — Decimal numbers (default). `a` — Lowercase letters. `A` — Uppercase letters. `i` — Lowercase Roman numerals. `I` — Uppercase Roman numerals.
`start`	Number	The starting number of the list. デフォルト: `1`
`reversed`	Boolean	Number in reverse (descending).

すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ	Chrome	Edge	Firefox	Safari	Opera
<ol>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザでサポート

❓ よくある質問

Qol と ul はどう使い分けますか？

A順序に意味がある（手順・ランキング・流れ）なら <ol>。並列の集まり（一覧・ナビ・タグ）なら <ul> です。判断法は、項目の順序を入れ替えると意味が変わるか？変わるなら ol です。番号も丸点も CSS で変えられるので、選ぶ基準は見た目ではなく意味です。

Qol の start と reversed 属性はどう使いますか？

Astart='3' は番号を3から始めます（途切れたリストを引き継ぐとき）。reversed は番号を逆順に数えます（Top 10 を10から1へ）。両者は組み合わせられ、逆順のとき start は最大の番号を意味します。

Qol の番号のスタイルはカスタマイズできますか？

Aできます。CSS の list-style-type には decimal、lower-roman、cjk-ideographic（一、二、三）などがあります。さらに柔軟なのは li::marker や ::before 疑似要素で、番号の見た目（色・フォント・括弧）を完全に自由に作れます。