HTMLのolタグで番号付きリストを作成する方法と使い分けのポイント

HTMLで情報を整理して伝える際に、リスト表示は非常に重要な役割を果たします。

特に手順やランキングなど、順序に意味がある情報を提示する場合には、番号付きリストを作成する「olタグ」が欠かせません。

正しくリストを使い分けることで、ユーザーにとって読みやすくなるだけでなく、検索エンジンに対してもコンテンツの構造を正確に伝えることが可能になります。

この記事では、olタグの基本的な使い方から属性を活用した応用手法、さらにはCSSでのカスタマイズ方法まで詳しく紹介します。

HTMLのolタグとは何か

olとは「Ordered List」の略称であり、順序がある情報のリストを定義するためのタグです。

ブラウザで表示すると、各リスト項目の先頭に「1, 2, 3…」といった数字が自動的に付与されます。

リストの各項目は、olタグの中にliタグ（List Item）を配置することで記述します。

情報を構造化して提示することで、読者は内容を素早く理解できるようになります。

olタグの基本書式

まずは、最もシンプルなolタグの記述方法を確認しましょう。

<!-- 基本的な番号付きリスト -->
<ol>
  <li>まずはHTMLファイルを準備します。</li>
  <li>次にbodyタグ内にリストを記述します。</li>
  <li>ブラウザで表示を確認します。</li>
</ol>

1. まずはHTMLファイルを準備します。
2. 次にbodyタグ内にリストを記述します。
3. ブラウザで表示を確認します。

このように、特別な設定をしなくても自動的に番号が割り振られるのが特徴です。

olタグとulタグの適切な使い分け

HTMLにはリストを作成するタグとして、olタグの他に「ulタグ（Unordered List）」が存在します。

これら二つのタグを適切に使い分けることは、WebアクセシビリティやSEOの観点からも非常に重要です。

使い分けの判断基準

どちらを使うべきか迷ったときは、「項目の順番を入れ替えても意味が通じるか」を基準に判断してください。

もし順番を入れ替えることで情報の意味が変わってしまう場合は、olタグを使用するのが適切です。

以下の表で、それぞれの特徴と比較をまとめました。

不適切な使用例

たとえば、単なる「好きな食べ物リスト」にolタグを使用し、番号を振る必要がないケースは避けましょう。

逆に、料理のレシピのように「1番の工程が終わらないと2番に進めない」といった手順には必ずolタグを使います。

論理的な構造を意識してタグを選ぶことが、高品質なHTML作成の第一歩となります。

olタグで使える便利な属性

olタグには、リストの表示形式や開始番号を制御するための属性がいくつか用意されています。

これらを活用することで、HTMLのマークアップだけで柔軟な表現が可能になります。

type属性で番号の種類を変える

type属性を指定することで、数字以外の記号（アルファベットやローマ数字）でリストを表示できます。

<!-- 大文字アルファベットでのリスト -->
<ol type="A">
  <li>企画フェーズ</li>
  <li>制作フェーズ</li>
  <li>運用フェーズ</li>
</ol>

A. 企画フェーズ
B. 制作フェーズ
C. 運用フェーズ

type属性に指定できる値は以下の通りです。

• 1：算用数字（デフォルト）
• a：小文字のアルファベット
• A：大文字のアルファベット
• i：小文字のローマ数字
• I：大文字のローマ数字

start属性で開始番号を指定する

リストの途中から番号を始めたい場合には、start属性を使用します。

例えば、解説の都合上リストを途中で分割し、別の段落を挟んだ後に続きの番号から再開させたい場合に便利です。

<ol start="4">
  <li>応用的な設定を行います。</li>
  <li>デバッグを実行します。</li>
</ol>

4. 応用的な設定を行います。
5. デバッグを実行します。

start属性の値には、常に算用数字（整数）を指定する必要があります。

reversed属性でカウントダウンを表示する

reversed属性を付与すると、番号が降順（大きい順）で表示されるようになります。

ランキングのカウントダウンや、最新のものから順に並べる履歴リストなどで活用されます。

<ol reversed>
  <li>第1位（最後に表示される）</li>
  <li>第2位</li>
  <li>第3位（最初に表示される）</li>
</ol>

3. 第1位
2. 第2位
1. 第3位

HTML5以降で追加された属性であり、視覚的な順序とHTMLの記述順を維持したまま番号だけを逆にできるのが利点です。

olタグの入れ子（ネスト）構造

複雑な情報を整理する場合、リストの中にさらにリストを含める「入れ子」構造が必要になることがあります。

olタグの中に別のolタグやulタグを配置することで、階層構造を表現できます。

正しいネストの記述方法

注意点として、新しいリストを開始する場合は必ずliタグの中に記述しなければなりません。

<ol>
  <li>
    第1章：HTMLの基礎
    <ol>
      <li>タグの書き方</li>
      <li>属性の使い方</li>
    </ol>
  </li>
  <li>第2章：CSSの基礎</li>
</ol>

このルールを守らないと、ブラウザが構造を正しく解釈できず、レイアウト崩れの原因となります。

スクリーンリーダーなどの支援技術を利用しているユーザーにとっても、正しい階層構造は情報の理解を助ける重要な要素です。

CSSによるolタグのカスタマイズ

デフォルトの数字表示ではデザインが素っ気ないと感じる場合、CSSを使用して見た目を調整できます。

list-style-typeプロパティを使用すれば、HTMLのtype属性よりもさらに多様なスタイルを適用可能です。

list-style-typeでの装飾

日本語のサイトであれば、漢数字やいろは順などを利用することも可能です。

/* 漢数字（一, 二, 三...）に変更する例 */
ol.kanji-list {
  list-style-type: cjk-ideographic;
}

また、番号を消して画像を表示させたい場合は list-style-image を使用します。

CSSカウンタを使った高度なカスタマイズ

「1.」という形式ではなく「第1ステップ」や「Q1.」のように、数字の前後を指定のテキストで飾りたい場合には「CSSカウンタ」が有効です。

counter-resetとcounter-incrementを組み合わせることで、自由自在なナンバリングを実現できます。

ol.custom-list {
  counter-reset: my-counter; /* カウンタをリセット */
  list-style: none; /* デフォルトの数字を消す */
  padding-left: 0;
}

ol.custom-list li {
  counter-increment: my-counter; /* カウンタを進める */
  margin-bottom: 10px;
}

ol.custom-list li::before {
  content: "Step " counter(my-counter) ": "; /* 数字の前にStepを付与 */
  font-weight: bold;
  color: #cf2e2e;
}

CSSカウンタを利用することで、HTMLのセマンティクスを維持したまま、豊かなデザイン表現が可能になります。

olタグ使用時のSEOとアクセシビリティの注意点

検索エンジンは、olタグやulタグでマークアップされた箇所を「重要な情報のまとまり」として認識します。

適切なタグ選びを行うことで、ページ内のコンテンツ構造が明確になり、検索順位の向上に寄与する可能性があります。

また、アクセシビリティの観点からは、番号を「(1)」のように手入力で書くのではなく、必ずolタグの機能を使って表示させることが推奨されます。

音声読み上げソフトがリストであることを正しく認識できれば、視覚障がいのあるユーザーも情報の関連性を把握しやすくなります。

さらに、項目数が多くなりすぎる場合は、適切な見出し（h3やh4）を適宜挿入して、リストを分割することも検討してください。

ユーザーが一度に処理できる情報量には限りがあるため、構造の簡潔さを保つことが重要です。

まとめ

HTMLのolタグは、順序を持つ情報を整理して伝えるための強力なツールです。

単に数字を表示するだけでなく、情報の重要度や手順を明確にするという役割を持っています。

ulタグとの使い分けを理解し、属性やCSSを駆使することで、より使いやすく美しいWebサイトを作成できるでしょう。

正しいマークアップを心がけることは、最終的にユーザーの利便性とサイトの評価を高めることにつながります。

今回解説した基本操作や応用テクニックを、ぜひ日々のWeb制作に役立ててください。