HTML

Use it when the order matters: an ordered list that numbers each step or item (1, 2, 3… or a/A, i/I) so instructions or rankings are easy to follow.

ol 要素

ol要素「Ordered List（順序ありのリスト）」の略で、順序に意味を持つリストを表します。リストの順序が変わってしまうと、意味が変わってしまうようなリストに使います。順序に意味を持たないリストには、ol要素を使うべきではありません。その場合は、ul要素を使います。

リスト項目は、li要素を使ってマークアップします。

• 使用例
• start 属性
• reversed 属性
  • 短い書き方（boolean属性）
• type 属性
• 入れ子の番号（サブ手順）
• 見た目のカスタム最小メモ（CSS）
• アクセシビリティの注意
• 途中から再開（startの実務例）
• FAQ（よくある質問）
• よくあるエラー早見表

使用例

<p>のぞみ229号の停車駅（停車順）</p>
<ol>
	<li>東京</li>
	<li>品川</li>
	<li>新横浜</li>
	<li>名古屋</li>
</ol>

この例は、新幹線の停車駅を停車順に並べたものです。停車順と言う順序を持っているため、ol要素が適しています。

特にスタイルを指定しなければ、ブラウザには次のように表示されます。

start 属性

start属性は、順序の開始番号を定義します。開始番号は整数値でなければいけません。

<p>のぞみ229号の停車駅（停車順）</p>
<ol start="4">
	<li>名古屋</li>
	<li>京都</li>
	<li>新大阪</li>
</ol>

この例では、ol要素の start属性に "4" を指定しています。この場合、ブラウザでは、4から順に番号を割り振ります。

start属性には負の整数値を指定する事も可能です。負の整数値を指定した場合、割り振られる番号はどんどん0に近づき、0を超えると正の整数値として増えていきます。

<p>のぞみ229号の停車駅（停車順）</p>
<ol start="-3">
	<li>東京</li>
	<li>品川</li>
	<li>新横浜</li>
	<li>名古屋</li>
	<li>京都</li>
	<li>新大阪</li>
</ol>

reversed 属性

短い書き方（boolean属性）

<ol reversed>
	<li>最初の項目</li>
	<li>次の項目</li>
</ol>

<!-- 冗長な書き方（仕様上は有効）：
<ol reversed="reversed"> ... </ol>
-->

reversed属性は、順番を降順にする論理属性です。もし、指定すると、順番が反対になります。この属性は HTML5で新たに導入されました。reversed属性が指定された順序付きリストの事を、カウントダウン・リストと呼ぶこともあります。

<p>海外ドラマ　人気トップ 5</p>
<ol reversed>
	<li>フレンズ</li>
	<li>24</li>
	<li>シンプソンズ</li>
	<li>スターゲート　アトランティス</li>
	<li>スターゲート　SG-1</li>
</ol>

reversed属性は、ほとんどのブラウザで対応しているようです。

reversed属性を指定する事で、項目の表示順は変わらない点に注意してください。この属性で実現するのは、順番を表す番号を降順に割り振るという点だけです。これと同じ結果を求めるには、以前は次のように、すべての li要素に value属性を指定するしかありませんでした。

<p>海外ドラマ　人気トップ 5</p>
<ol>
	<li value="5">フレンズ</li>
	<li value="4">24</li>
	<li value="3">シンプソンズ</li>
	<li value="2">スターゲート　アトランティス</li>
	<li value="1">スターゲート　SG-1</li>
</ol>

このマークアップは項目数が少なければ問題ありませんが、多くなれば、それだけマークアップが面倒です。さらに、このマークアップは、HTML4.01や XHTML1.0の Strict DOCTYPEでは非準拠でした。HTML5では、このような降順の順序リストを簡単にマークアップできるようにするため、reversed属性が新たに設けられたのです。

reversed属性は、ol要素の start属性と、li要素の value属性を組み合わせて使う事も想定されています。この場合、ol要素の start属性に指定された数値からのカウントダウンとなります。そして、li要素の value属性が見つかると、順序番号が、その数値に飛び、そこからカウントダウンが始まる事になります。

<p>映画　人気トップ　100 カウントダウン</p>
<ol reversed start="100">
	<li>ワルキューレ</li>
	<li>ニュー・シネマ・パラダイス</li>
	<li>トワイライト</li>
	<li value="3">トランスフォーマー／リベンジ</li>
	<li>G.I.ジョー</li>
	<li>ハリー・ポッターと謎のプリンス</li>
</ol>

type 属性

数字じゃなくて a・A・i・I のような見た目で番号を付けたいときに使います。HTMLだけでパッと切り替えられます。

候補："1"（数字, 初期値）、"a"（a,b,c…）、"A"（A,B,C…）、"i"（i,ii,iii…）、"I"（I,II,III…）

<p>手順書（a,b,c…で表示）</p>
<ol type="a">
    <li>材料を準備する</li>
    <li>ボウルに入れて混ぜる</li>
    <li>型に流して焼く</li>
</ol>

入れ子の番号（サブ手順）

手順の中に小さな手順がある時は、liの中にもう一つolを入れます。番号は自動で分かれて付きます。

<p>PCの初期セットアップ</p>
<ol>
    <li>電源を入れる</li>
    <li>言語とキーボードを選ぶ
        <ol type="a">
            <li>日本語を選択</li>
            <li>日本語キーボードを選択</li>
        </ol>
    </li>
    <li>Wi-Fiに接続する</li>
</ol>

見た目のカスタム最小メモ（CSS）

数字の種類

list-style-type（例：decimal/upper-roman/lower-alpha）

数字の位置

list-style-position（outside/inside）

数字そのものの装飾

::marker（色や太さなど）

<ol class="fancy">
    <li>項目A</li>
    <li>項目B</li>
</ol>

.fancy { list-style-type: upper-roman; }
.fancy li::marker { font-weight: bold; }

アクセシビリティの注意

• 順番が大事なら必ずolを使う（div+CSSで見た目だけ番号は避ける）。
• 読み上げ順＝DOM順。reversedは番号だけを逆にする機能。実際の順番を逆にしたい時は、リストの並び自体を入れ替える。
• olの直下はliのみを置く（divなどはliの中へ）。

途中から再開（startの実務例）

<p>Part 1（1〜3）</p>
<ol>
    <li>導入</li>
    <li>準備</li>
    <li>接続</li>
</ol>

<p>Part 2（4〜）</p>
<ol start="4">
    <li>設定</li>
    <li>テスト</li>
</ol>

FAQ（よくある質問）

「順序が大事」って、どんな時？

手順・段取り・ランキングのように、並びが入れ替わると意味が変わる場合です。材料リストのように順不同で良い時はulが向きます。

reversedで並びも逆順にできますか？

できるのは番号を逆順に付けることだけ。読み上げ順やDOM順を本当に逆にしたい時は、項目の並び自体を入れ替えてください。

2ページに分けた手順の番号を続きから始めたい

2ページ目のolにstartを指定します（例：start="4"）。

数字をローマ数字やアルファベットにしたい

type属性（"i"・"I"・"a"・"A"）で切り替えられます。見た目の微調整はCSSのlist-style-typeや::markerを使用します。

CSSで番号“っぽく”見せてもいい？

順序が大事なら避けましょう。スクリーンリーダーに順番が伝わらないことがあります。必ずol要素を使いましょう。

よくあるエラー早見表

ol直下にli以外を入れた

直下はliだけにする（divはliの中へ）。

順序が無いのにolを使った

意味上の並び順が無いならul。

reversedで並びも逆にしたつもり

逆になるのは番号だけ。順番そのものは入れ替える。

番号の見た目だけCSSで作った

スクリーンリーダー配慮でolを使用。

startに小数/文字列

整数のみ（例：start="10"）。

li valueをulで使った

valueはolの子のliだけ。