olタグ -順序のあるリストを作成する｜HTML辞典

<ol>タグとは？

<ol>タグは、順序のあるリスト（番号付きリスト）を作成するためのタグ です。
リストの各項目は <li>（リストアイテム）タグで囲む必要があります。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<ol> は開始タグ（<ol>）と閉じタグ（</ol>）の両方が必要です。

基本的な記述方法

<ol>
    <li>材料を準備する</li>
    <li>オーブンを180度に予熱する</li>
    <li>生地を混ぜる</li>
    <li>焼く</li>
</ol>

使用できる主な属性

<ol>タグには特別な属性がいくつかあります。

属性名	説明	例
type	番号のスタイルを変更	<ol type="A">...</ol>
start	番号の開始値を設定	<ol start="5">...</ol>
reversed	番号を逆順にする	<ol reversed>...</ol>
class	CSSのクラスを適用	<ol class="ordered-list">...</ol>
id	一意の識別子を設定	<ol id="step-list">...</ol>
style	インラインスタイルを適用	<ol style="list-style-type: upper-roman;">...</ol>

CSSを使ったデザイン変更

リストのスタイルをカスタマイズしたい場合は、CSSを活用できます。

ol {
    list-style-type: decimal;
    padding-left: 20px;
}

適切な使用例

✅ <ol> を使って手順を説明する

<ol>
    <li>材料を準備する</li>
    <li>オーブンを180度に予熱する</li>
    <li>生地を混ぜる</li>
    <li>焼く</li>
</ol>

✅ <ol> の type 属性を活用する

<ol type="A">
    <li>第一段階</li>
    <li>第二段階</li>
    <li>第三段階</li>
</ol>

✅ <ol> の start 属性で開始番号を変更する

<ol start="5">
    <li>第5番目の項目</li>
    <li>第6番目の項目</li>
</ol>

✅ <ol reversed> を使って逆順にする

<ol reversed>
    <li>最後のステップ</li>
    <li>中間のステップ</li>
    <li>最初のステップ</li>
</ol>

適切でない使用例（誤った使い方）

❌ リストの項目を <ol> なしで <li> だけで使うのはNG

<!-- NG: <li> を <ol> なしで使用 -->
<li>これは誤ったリスト項目です。</li>

✅ 正しい書き方（<ol> とセットで使用）

<ol>
    <li>これは正しいリスト項目です。</li>
</ol>

<ol>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<ol>	順序のあるリストを作成	番号付きリスト（1, 2, 3…）	手順の説明、ランキング
<ul>	順序のないリストを作成	リストマーカー（●、■ など）を表示	メニュー、箇条書き
<dl>	定義リストを作成	<dt>（用語）、<dd>（説明）を使用	用語集、FAQの作成
<li>	リストの各項目	<ol> や <ul> の中で使用	リストアイテムの作成

使用上の注意点

✅ <ol> は順序のあるリスト専用に使用する

• 順番が重要でない場合は <ul> を使用するのが適切。

✅ <li> は <ol> や <ul> の中でのみ使用する

• <li> を単体で使用するのは避ける。

関連タグ

• <li> – リストの各項目
• <ul> – 順序のないリスト
• <dl> – 定義リスト
• <nav> – ナビゲーションの作成

まとめ

<ol>タグは、HTML文書内で順序のあるリスト（番号付きリスト）を作成するためのタグです。<li>とセットで使用し、手順やランキングなど、順番が重要なリストを作成する際に適しています。