HTML 入門

HTML 順序付きリスト <ol> タグ

Web 開発において、情報をクリアかつ効果的に提示する方法は非常に重要です。レシピの調理手順、売れ筋商品のランキング、プレゼンテーションのアウトラインなど、項目の「順序」が重要な意味を持つシーンは多々あります。

以前に学習した無順序リスト（<ul>）は、順序が重要ではない項目を羅列するのに適していますが、順序付きリスト（Ordered List）は、特定の数字やアルファベット順で項目を表示するための構造化された手法を提供します。これらは番号やアルファベットの割り振りを自動的に処理するため、コンテンツが読みやすくなるだけでなく、セマンティック（Semantic）な意味を持たせることができます。

1. 順序付きリストの用途

順序付きリストは、項目の順番自体が意味や重要性を伝える一連の情報を表示するために使用されます。

ブレットポイントを使用する無順序リスト（<ul>）とは異なり、順序付きリスト（<ol>）は通常、数字、アルファベット、またはローマ数字を使用してシーケンスをマークします。この固有のナンバリングにより、特定のプロセス、ランキング、またはステップバイステップの指示が存在することをユーザーに伝えます。

例えば、「トップ10ランキング」は明確な番号がなければ意味をなしませんし、「ケーキの焼き方」の指示も順序が欠けていれば混乱を招くことになります。

2. <ol> タグと <li> タグ

<ol> タグ（"ordered list" の略）は、すべての順序付きリスト項目の親コンテナです。

リスト内の個々の項目は、無順序リストと同様に <li> タグ（"list item" の略）を使用して定義します。ブラウザは、リストの定義とその属性に基づいて、自動的に番号やアルファベットをレンダリングします。

基本的な構造は以下の通りです：

<ol>
  <li>最初の項目</li>
  <li>2番目の項目</li>
  <li>3番目の項目</li>
</ol>

解説：

  • <ol> タグは順序付きリストの開始を示します。
  • 各 <li> タグはリスト内の一つの項目を表します。

ブラウザでの表示結果：

  1. 最初の項目
  2. 2番目の項目
  3. 3番目の項目

実践的な例： コーヒーを淹れる手順をリスト化してみましょう。

<ol>
  <li>お湯を沸かす。</li>
  <li>コーヒー豆を挽く。</li>
  <li>コーヒー粉にお湯を注ぐ。</li>
  <li>抽出を待つ。</li>
  <li>コーヒーを楽しむ！</li>
</ol>

レンダリング結果：

  1. お湯を沸かす。
  2. コーヒー豆を挽く。
  3. コーヒー粉にお湯を注ぐ。
  4. 抽出を待つ。
  5. コーヒーを楽しむ！

ここでの番号は、アクションの前後関係を明確に示しています。

3. 属性による順序付きリストのカスタマイズ

順序付きリストの真の力は、その属性（Attributes）にあります。これらの属性を使用することで、マーカーのタイプ（数字、アルファベット、ローマ数字）、カウントを開始する位置、さらにはカウントダウンの指定まで制御できます。

3.1 type 属性

type 属性は、リスト項目に使用するマーカーの種類を指定します。これは、リストの内容を変えることなく外観を変更するための強力な方法です。

type 属性には、以下の 5 つの値を指定できます：

  • 1:（デフォルト）数字 (1, 2, 3, ...)
  • a: 小文字のアルファベット (a, b, c, ...)
  • A: 大文字のアルファベット (A, B, C, ...)
  • i: 小文字のローマ数字 (i, ii, iii, ...)
  • I: 大文字のローマ数字 (I, II, III, ...)

type="a" の使用例：

<ol type="a">
  <li>ステップ 1</li>
  <li>ステップ 2</li>
  <li>ステップ 3</li>
</ol>

レンダリング結果： a. ステップ 1 b. ステップ 2 c. ステップ 3

type="I" の使用例：

<ol type="I">
  <li>第1章</li>
  <li>第2章</li>
  <li>第3章</li>
</ol>

レンダリング結果： I. 第1章 II. 第2章 III. 第3章

3.2 start 属性

start 属性を使用すると、リストの開始値を指定できます。

常に 1（または 'a', 'i'）から始める必要はありません。選択した任意の整数からカウントを開始するようリストに指示できます。これは、長いリストを複数のセクションに分割する場合や、前のページからの続きを表示する場合に特に便利です。

start 属性は整数値を受け取ります。

5 から開始する例：

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

レンダリング結果：
5. 項目 5
6. 項目 6
7. 項目 7

type との相互作用： start 属性は type 属性とシームレスに連携します。例えば type="a" かつ start="3" と設定すると、リストは 'c' から始まります。

<ol type="a" start="3">
  <li>アルファベット順の3番目</li>
  <li>アルファベット順の4番目</li>
</ol>

レンダリング結果：
c. アルファベット順の3番目
d. アルファベット順の4番目

3.3 reversed 属性

reversed 属性はブール属性（Boolean Attribute）です（つまり、属性が存在するだけで「真」を意味します）。これが指定されると、リスト項目は降順で番号付けされます。

カウントダウン、高い順からのランキング表示、あるいは最新のアクティビティを表示する際に非常に便利です。

逆順リストの例：

<ol reversed>
  <li>1位</li>
  <li>2位</li>
  <li>3位</li>
</ol>

レンダリング結果：
3. 1位
2. 2位

  1. 3位

reversed, start, type の組み合わせ： これらの属性を組み合わせて使用することも可能です。start はカウントダウンを開始する数字（または対応する文字）を制御し、type はスタイルを制御します。

<ol type="A" start="5" reversed>
  <li>最下位</li>
  <li>ブービー賞</li>
  <li>下から3番目</li>
</ol>

レンダリング結果：
E. 最下位
D. ブービー賞
C. 下から3番目

注意：start="5" はリストの最初の項目に適用され、そこからカウントダウンされます。したがって、最初の項目は 'E'（5番目のアルファベット）、次が 'D'（4番目）となります。

4. value 属性による個別リスト項目の制御

start 属性はリスト全体の開始を制御しますが、value 属性は <ol> 内部の個別の <li> 要素に適用できます。

これにより、特定のリスト項目の番号を明示的に設定でき、後続の項目はその新しい値からカウントを継続します。非連続なリストを作成したり、項目がスキップされた際に番号を修正したりする場合に非常に強力です。

value 属性は整数値を受け取ります。

4.1 value 属性の使用例

<ol>
  <li>タスク 1</li>
  <li>タスク 2</li>
  <li value="5">タスク 5 (3と4をスキップ)</li>
  <li>タスク 6 (5から継続)</li>
</ol>

レンダリング結果：

  1. タスク 1
  2. タスク 2
  3. タスク 5 (3と4をスキップ)
  4. タスク 6 (5から継続)

5. 総合的なコード例：すべての属性を活用する

これまでに議論した属性を組み合わせて、高度な順序付きリストを作成する複雑な例を見てみましょう。

5.1 示例 1：ローマ数字とステップのスキップを含むレシピ

主要なフェーズをローマ数字でマークし、一部のフェーズで意図的に番号をスキップする多段階のレシピを想定します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>レシピの手順</title>
</head>
<body>
    <h1>おばあちゃんの特製クッキー</h1>
    
    <h2>材料：</h2>
    <ul>
        <li>中力粉 2カップ</li>
        <li>重曹 小さじ1</li>
    </ul>

    <h2>作り方：</h2>
    <ol type="I">
        <li>
            <h3>準備</h3>
            <ol type="1">
                <li>オーブンを 375°F (190°C) に予熱します。</li>
                <li>天板にクッキングシートを敷きます。</li>
            </ol>
        </li>
        <li>
            <h3>粉類の混合</h3>
            <ol type="a">
                <li>小さなボウルで、小麦粉、重曹、塩を混ぜ合わせ、脇に置いておきます。</li>
            </ol>
        </li>
        <li value="5">
            <h3>混合と焼成</h3>
            <ol type="1">
                <li>粉類を液体材料に少しずつ加えます。</li>
                <li>チョコチップを混ぜ込みます。</li>
                <li>9〜11分間焼きます。</li>
            </ol>
        </li>
    </ol>
</body>
</html>

5.2 示例 2：Top 5 逆順リスト（上位から表示）

最近の 5 つの成果を、重要度または時間順に逆順で表示し、大きな数字から開始するリストを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>会社の成果</title>
</head>
<body>
    <h1>最近の会社の軌跡</h1>
    <p>私たちの最も重要な成果（インパクトの大きい順）：</p>
    
    <ol type="1" start="5" reversed>
        <li>新製品ライン「InnovateX」をリリース、過去最高の売上を記録。</li>
        <li>3つの新しい国際市場に進出。</li>
        <li>ISO 9001 認証を取得。</li>
        <li>2年連続で「最高の職場」に選出。</li>
        <li>シリーズBの資金調達に成功。</li>
    </ol>
</body>
</html>

これは reversed と start の典型的なユースケースです。カウントダウンやランキングリストを表示する際、最大値（または最新項目）を最初に表示しつつ、最大番号を割り振ることができます。