この記事の要点

ol 要素 (ordered list) は順序のあるリストを表す HTML 要素 — 子は li type 属性: 1 (数字) / A (大文字) / a (小文字) / I (大ローマ) / i (小ローマ) start 属性: 開始番号を指定 (start="5") reversed 属性: 逆順カウント (10, 9, 8, ...) li の value 属性で個別に番号を上書きできる — 飛び番号や強制番号付けに便利

ol 要素とは

ol 要素 (ordered list) は順序が意味を持つリストを表す HTML 要素です。手順、ランキング、目次、章立てなど「並び順に意味がある」場面で使います。子要素は li (list item)。

並び順に意味がないリストは ul (unordered list) を使います。

基本構文

<ol>
    <li>最初の手順</li>
    <li>次の手順</li>
    <li>最後の手順</li>
</ol>

デフォルトでは1. 2. 3. と数字でカウントされます。

type 属性 — 番号の種類

値	意味	例
1	アラビア数字 (デフォルト)	1, 2, 3, ...
A	大文字アルファベット	A, B, C, ...
a	小文字アルファベット	a, b, c, ...
I	大文字ローマ数字	I, II, III, ...
i	小文字ローマ数字	i, ii, iii, ...

<ol type="A">
    <li>項目 A</li>
    <li>項目 B</li>
    <li>項目 C</li>
</ol>

<ol type="I">
    <li>第 I 章</li>
    <li>第 II 章</li>
</ol>

start 属性 — 開始番号

<ol start="5">
    <li>5 番目</li>
    <li>6 番目</li>
    <li>7 番目</li>
</ol>

<!-- type と組み合わせ -->
<ol type="A" start="3">
    <li>C から始まる</li>
    <li>D</li>
</ol>

reversed 属性 — 逆順

<ol reversed>
    <li>これが最後</li>
    <li>真ん中</li>
    <li>これが最初</li>
</ol>
<!-- 表示: 3. これが最後 / 2. 真ん中 / 1. これが最初 -->

<!-- ランキングの逆順表示で重宝 -->
<ol reversed>
    <li>銅メダル (3 位)</li>
    <li>銀メダル (2 位)</li>
    <li>金メダル (1 位)</li>
</ol>

li の value 属性 — 個別に番号を上書き

<ol>
    <li>1 番目</li>
    <li value="10">10 番目に飛ぶ</li>
    <li>11 番目</li>
    <li value="100">100 番目</li>
    <li>101 番目</li>
</ol>

ネストしたリスト

<ol>
    <li>準備
        <ol type="a">
            <li>道具を揃える</li>
            <li>材料を計量する</li>
        </ol>
    </li>
    <li>調理
        <ol type="a">
            <li>火を入れる</li>
            <li>混ぜる</li>
            <li>味を調える</li>
        </ol>
    </li>
    <li>盛り付け</li>
</ol>

CSS でのカスタマイズ

1. list-style-type で番号の種類を変える

ol         { list-style-type: decimal; }            /* 1, 2, 3 */
ol.lower-a { list-style-type: lower-alpha; }        /* a, b, c */
ol.upper-r { list-style-type: upper-roman; }        /* I, II, III */
ol.japan   { list-style-type: cjk-ideographic; }    /* 一, 二, 三 */
ol.greek   { list-style-type: lower-greek; }        /* α, β, γ */

2. CSS Counter で完全カスタマイズ

<ol class="custom">
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
</ol>

.custom {
    list-style: none;
    counter-reset: section;
    padding-left: 0;
}
.custom > li {
    counter-increment: section;
    position: relative;
    padding-left: 2em;
}
.custom > li::before {
    content: "STEP " counter(section);
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #2563eb;
}

3. 章番号のような階層カウンタ

ol.chapter {
    counter-reset: chapter;
    list-style: none;
}
ol.chapter > li {
    counter-increment: chapter;
}
ol.chapter > li::before {
    content: counter(chapter) ". ";
}
ol.chapter ol {
    counter-reset: section;
    list-style: none;
}
ol.chapter ol > li {
    counter-increment: section;
}
ol.chapter ol > li::before {
    content: counter(chapter) "." counter(section) " ";
}
/* 結果: 1. / 1.1 / 1.2 / 2. / 2.1 ... */

SEO とアクセシビリティ

• 順序のあるコンテンツには必ず ol を使う — 検索エンジンも順序を理解する
• 「ステップ n」のような項目を div で並べると、スクリーンリーダーがリストとして読まない
• レシピ、HowTo、トップ N ランキングなどは構造化データ (Schema.org HowTo / ItemList) と相性が良い
• start や reversed はスクリーンリーダーが正しく読み上げる

ol と ul と dl の使い分け

要素	用途	例
ol	順序が意味を持つ	手順、ランキング
ul	順序に意味なし	機能一覧、ナビゲーション
dl	用語と説明のペア	用語集、メタ情報

FAQ

Q: 番号を非表示にしたい
A: ol { list-style: none; padding-left: 0; } でマーカー削除。または ul に変える検討も。

Q: 番号のスタイルだけ変えたい (色や太さ)
A: ::marker 疑似要素で対応可能。li::marker { color: red; font-weight: bold; }

Q: type 属性は非推奨では？
A: 古い HTML4 で「非推奨」とされたが、HTML5 で復活し有効。CSS の list-style-type でも代用できる。

Q: ol と ul どちらを使うか迷う
A: 「並び替えても意味が変わらない」なら ul、「順序に意味がある」なら ol。たとえば「初期化 → 設定 → 実行」のような手順は ol。料理のレシピも ol が正解。

典型的なユースケース

シーン	サンプル
手順 (HowTo)	料理レシピ、組み立て説明書、API 利用手順
ランキング	売上 TOP10、人気記事、検索上位
章立て / 目次	ドキュメントの目次、論文の節
選択肢 (順序あり)	クイズの選択肢を a / b / c で示すなど
イベントタイムライン	時系列の出来事一覧

サンプル: HowTo 構造化データ付きレシピ

レシピや HowTo は ol + Schema.org の HowTo 構造化データを組み合わせると、Google の検索結果でリッチに表示されるチャンスが増えます。

<article itemscope itemtype="https://schema.org/HowTo">
    <h1 itemprop="name">パスタの茹で方</h1>

    <ol>
        <li itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
            <span itemprop="text">大きめの鍋に水 1L とお湯を沸かす。</span>
        </li>
        <li itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
            <span itemprop="text">塩を 10g 入れて、パスタを投入する。</span>
        </li>
        <li itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
            <span itemprop="text">表示時間より 1 分早く取り出してソースに絡める。</span>
        </li>
    </ol>
</article>

UA デフォルトスタイル

ブラウザの UA スタイルで ol には以下が適用されています。

ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
}

関連

• ul — 順序なしリスト
• li — リスト項目
• dl / dt / dd — 定義リスト
• list-style / ::marker — リストのスタイリング