この記事の要点

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) を使います。

基本構文

    
最初の手順
    
次の手順
    
最後の手順

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

type 属性 — 番号の種類

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

    
項目 A
    
項目 B
    
項目 C



    
第 I 章
    
第 II 章

start 属性 — 開始番号

    
5 番目
    
6 番目
    
7 番目




    
C から始まる
    
D

reversed 属性 — 逆順

    
これが最後
    
真ん中
    
これが最初





    
銅メダル (3 位)
    
銀メダル (2 位)
    
金メダル (1 位)

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

    
1 番目
    
10 番目に飛ぶ
    
11 番目
    
100 番目
    
101 番目

ネストしたリスト

    
準備
        

            
道具を揃える
            
材料を計量する
        
    
    
調理
        

            
火を入れる
            
混ぜる
            
味を調える
        
    
    
盛り付け

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 で完全カスタマイズ

    
第一
    
第二
    
第三

.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 の検索結果でリッチに表示されるチャンスが増えます。

    
パスタの茹で方

    

        

            大きめの鍋に水 1L とお湯を沸かす。
        
        

            塩を 10g 入れて、パスタを投入する。
        
        

            表示時間より 1 分早く取り出してソースに絡める。
        
    

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 — リストのスタイリング