<ol>タグの解説
<ol>は、順序のあるリストを表します。各リスト項目の先頭には序数を表すマーカーが表示されます。マーカーの種類はCSS（スタイルシート）のlist-style-typeプロパティで変更できます。
順序のないリストを作成したい場合は<ul>を採用して下さい。リスト項目の並び順が特に文脈上の意味を持たない場合は<ul>の方が適切です。
リストの作成方法は、親要素となる<ol>でリストの開始を宣言し、リスト項目を表す<li>要素を任意の数だけ配置します。終了タグの</ol>を配置した時点でリストのまとまりが決まり、既定値であればリスト項目のマーカーが順序のある数字で表示されます。別の場所に新たな順序リストを設置した場合は、カウントはリセットされて一から順に表示されます。
リスト項目の中には任意のフロー・コンテンツが配置できます。そのため、リストの中にリストを配置して入れ子構造にできます。例えば、大カテゴリーの項目を順序なしリストの<ul>で定義し、その中の子カテゴリーを順序のある<ol>で記述するといった方法が考えられます。
<ol>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられませんが、ここで各項目のマーカーを一括で指定することも可能です。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。この要素に含まれる
<li>の中にリストを入れ子にすることも許可されています。
<ol>要素に指定できる属性
type- 順序マーカーの種類を指定します。初期値は
"1"です。リストの順序に重要性がない限り、CSSのlist-style-typeプロパティを使用することが推奨されています。各値を指定したときに表示されるマーカーは以下の通りです。1：1, 2, 3……a：a, b, c……A：A, B, C……i：i, ii, iii……I：I, II, III……
reversed- リスト項目が逆順で表示されるようになります。項目は大きい方から小さい方へ番号付けされます。これは値のない論理属性です。
start- リスト項目の順序に対して開始値を指定できます。値は整数値です。順序マーカーが四番目を表す「d」や「iv」から始まるように設定したい場合は、この値を
"4"にします。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<ol>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。順序のあるリストでは、各項目の先頭に序数を表すマーカーが与えられます。このマーカーの種類や表示位置はスタイルシートで調整して下さい。
<ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>
type属性を使ってマーカーの種類を決定する場合は以下のように記述します。
<ol type="1">
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>
<ol type="a">
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>
リスト項目の中には、任意のフロー・コンテンツが配置できます。最もよく見られるパターンは文字列にリンクを指定することです。
<ol>
<li><a href="url">リスト項目</a></li>
<li><a href="url">リスト項目</a></li>
<li><a href="url">リスト項目</a></li>
</ol>
リストの中にリストを入れ子にする
リスト項目の子要素としてリストを入れ子にして配置できます。順序のあるリストと順序のないリストを上手く使い分けましょう。
<ul>
<li>大カテゴリー
<ol>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
</ol>
</li>
<li>大カテゴリー
<ol>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
</ol>
</li>
<li>大カテゴリー
<ol>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
</ol>
</li>
</ul>
リストマーカーの番号付けを任意の順番から開始する
リストマーカーの番号付けは終了タグを閉じた時点でリセットされてしまいますが、開始する際に何番目のカウントから始めるのかを任意の数値で指定できます。例えば、リストの途中で別の解説を挟んで、前のリスト順序を引き続き再会させたい場合などに重宝する機能です。
<div class="sample-block">
<h2>おいしい料理のレシピ</h2>
<p>まず以下の手順で材料に下ごしらえを加えます。</p>
<ol>
<li>料理の手順</li>
<li>料理の手順</li>
<li>料理の手順</li>
</ol>
<p>続いて、以下の流れで調理していきます。</p>
<ol start="4">
<li>料理の手順</li>
<li>料理の手順</li>
<li>料理の手順</li>
</ol>
<p>仕上げは以下の順番で行います。これで完成です！</p>
<ol start="7">
<li>料理の手順</li>
<li>料理の手順</li>
<li>料理の手順</li>
</ol>
</div>
.sample-block {
padding: 1rem;
border: 1px double #fc6;
border-radius: 5px;
background-color: #fec;
}
.sample-block h2 {
padding: 0.5rem;
margin: 0;
border-inline-start: 5px solid #f90;
border-radius: 5px;
background-color: #fc6;
font-size: 1rem;
}
.sample-block :where(p, ol) {
margin-block: 1rem 0;
}