HTMLの順序付きリストとは、項目に「1, 2, 3…」のような順番（番号やアルファベットなど）をつけて並べるための仕組みのことです。ここでいうHTML（エイチティーエムエル）とは、Webページの構造を記述するための「マークアップ言語」という種類の言語です。マークアップ言語とは、文章のどこが見出しなのか、どこがリストなのか、どこがリンクなのかといった「役割」をタグで指定していくための書き方のことを指します。順序付きリストは、その中でも「手順」「ランキング」「手続き」など、順番に意味がある情報を表現するときに使われます。
HTMLの順序付きリストとは何か
順序付きリストは、英語では「Ordered List（オーダードリスト）」と呼ばれ、HTMLでは主に<ol>というタグを使って表現します。「Ordered」は「順序がある」、「List」は「一覧」という意味です。つまり<ol>タグは「順番つきの一覧ですよ」ということをブラウザに伝える役割を持っています。ブラウザとは、ChromeやEdge、Safariなど、Webページを表示するソフトウェアのことです。ブラウザはこの<ol>タグを見ると、自動的に1から始まる番号をつけて項目を縦に並べて表示します。
順序付きリストの中の1つ1つの項目は、<li>タグを使って表します。<li>は「List Item（リストアイテム）」の略で、「リストの1項目」を意味します。例えば、カレーの作り方の手順を書きたい場合、手順1、手順2、手順3…といった形で並べますが、その1つ1つの手順を<li>タグで囲むことで、ブラウザは「これは順番つきリストの1つの項目だ」と理解します。HTMLを書くときは、人間が読む文章だけでなく、ブラウザが解釈しやすいかどうかもとても大切です。
ここで、順序付きリストとよく比較されるのが「箇条書きリスト」です。箇条書きリストは英語で「Unordered List（アンオーダードリスト）」と呼ばれ、HTMLでは<ul>タグを使います。<ul>は、順番に意味がないリスト、例えば「買い物リスト」「好きな食べ物リスト」のように、どの順番で並んでいても意味が変わらないときに使います。ブラウザでは、一般的に黒い点（●）や中黒（・）などのマークで表示されます。一方、順序付きリストでは「1.」「2.」「3.」のような番号が付くため、「順番が大事かどうか」で<ol>と<ul>を使い分けることが基本的な考え方になります。
具体的な利用シーンをイメージすると、順序付きリストの使いどころが分かりやすくなります。例えば次のようなケースです。
- 料理レシピの手順
- アプリの使い方のステップ
- ランキング（人気ベスト10など）
- 申し込みや手続きの流れ
- 授業や講義で説明する段階的なステップ
こういった場面では、「1番目にやること」「2番目にやること」「3番目にやること」と順番を守ることが重要です。そのため、HTMLで表現するときには順序付きリストを選ぶと、読み手にもブラウザにも意図が伝わりやすくなります。
また、順序付きリストを使うメリットは、見た目の整えやすさだけではありません。HTMLは「構造化された文書」を作ることを大事にしていますが、順序付きリストを使うと、文書の構造が明確になります。検索エンジンやスクリーンリーダー（視覚に障がいのある方がWebページの内容を音声で読み上げるソフト）などは、HTMLのタグを手がかりに内容を理解します。順序付きリストを使うことで、「ここは手順やステップだ」という情報が機械にも伝わるため、アクセシビリティ（誰にとっても使いやすい状態）の面でも有利になります。
さらに、順序付きリストはデザイン面でも扱いやすい要素です。CSS（スタイルを指定するための仕組み）を組み合わせることで、番号の位置や余白、フォントサイズなどを自由に調整できます。初心者のうちは、まずは標準的な見た目のままで問題ありませんが、Webサイトを作り込んでいく段階になると、「番号を丸で囲みたい」「途中から番号を変えたい」など、デザインやレイアウトに関する要望が出てきます。そういったときも、順序付きリストを正しく使っていれば、CSSによる調整がスムーズに行えます。
順序付きリストは、単に「番号がついているリスト」ではなく、「情報の順序や構造を明確にするための重要な部品」としてHTML全体の中に位置づけられます。文書の意味を正しく伝え、読みやすく整理するための道具の1つとして理解しておくことが、HTML学習の基礎としてとても役に立ちます。
タグとタグの基本的な使い方
HTMLで順序付きリストを作るときは、基本的に「箱」と「中身」の2つの要素を組み合わせて考えると分かりやすくなります。箱の役割をするのが<ol>タグ、中身の1つ1つを表すのが<li>タグです。<ol>は「Ordered List（順序付きリスト）」の略で、<li>は「List Item（リストの項目）」の略になります。この2つのタグをセットで使うことで、ブラウザに「ここからここまでが番号つきのリストですよ」「その中にこれらの項目がありますよ」と伝えることができます。
最も基本的な書き方の例は次のようになります。
<ol>
<li>HTMLファイルを作成する</li>
<li>ブラウザで表示を確認する</li>
<li>必要に応じてコードを修正する</li>
</ol>このように書くと、ブラウザ上では以下のように表示されます。
- HTMLファイルを作成する
- ブラウザで表示を確認する
- 必要に応じてコードを修正する
ここで注目していただきたいのは、番号自体（1. 2. 3.）はHTMLの中には書いていない点です。あくまで<ol>と<li>で「順序付きリストであること」と「リストの項目であること」を指定しているだけで、番号の表示はブラウザが自動的に行ってくれます。これが、構造をタグで表現し、見た目はブラウザに任せるというHTMLの基本的な考え方です。
<ol>タグは「リスト全体」を囲む親要素として使います。1つの順序付きリストごとに1つの<ol>を用意し、その中に複数の<li>タグを並べていきます。<li>タグは必ず<ol>（または<ul>などのリスト系のタグ）の中で使うようにします。<li>だけを単独で使うことは文法上正しくありませんので注意が必要です。
HTMLを書くときはインデント（字下げ）を意識すると構造が理解しやすくなります。先ほどの例では、<ol>の中の<li>タグを半角スペース2つや4つ分などで下げて書いています。インデントはブラウザの表示結果には影響しませんが、人間がコードを読みやすくするための大切な書き方の習慣です。特に入れ子（ネスト）したリストを書くときにはインデントがないと構造が分かりづらくなるため、早い段階から癖づけておくと良いです。
順序付きリストは、テキストだけでなく、リンクや太字などの要素も項目の中に入れることができます。例えば、次のように<a>タグ（リンク用のタグ）や<strong>タグ（重要な部分を強調するタグ）を組み合わせることが可能です。
<ol>
<li><strong>会員登録フォーム</strong>にアクセスする</li>
<li>必要な情報を入力し、<a href="#">送信ボタン</a>を押す</li>
<li>確認メールを開き、認証リンクをクリックする</li>
</ol>このように、<li>タグの中には段落として扱われるテキストだけでなく、インライン要素（文の中に入る小さな部品のような要素）や、場合によってはさらに別のリストを入れることもできます。インライン要素とは、<a>や<span>など、行全体ではなく文章の一部を装飾したり意味づけしたりするタグのことです。
また、<ol>タグにはいくつかの属性を指定することができます。属性とは、タグに対して追加の情報や設定を渡すための「設定項目」のようなものです。例えば、type属性を使うと番号の形式を変更でき、start属性を使うと開始番号を変更できます。これらは別の見出しで詳しく扱いますが、基本の<ol>と<li>さえ理解しておけば、属性はあとから少しずつ覚えていくことができます。まずは「<ol>の中に<li>を並べる」というシンプルな構造をしっかり押さえておくことが重要です。
注意点として、<li>の中に段落を複数書きたい場合があります。そのときは、<li>の内側に<p>タグ（段落を表すタグ）を入れて、文章の区切りをはっきりさせることができます。
<ol>
<li>
<p>アカウント設定画面を開きます。</p>
<p>画面左側のメニューから「プロフィール」を選択します。</p>
</li>
<li>
<p>プロフィール画像の変更ボタンをクリックします。</p>
</li>
</ol>このように書くと、1つ目の項目の中に2つの段落が含まれている構造になります。リスト項目の内容が長くなるときは、このように段落を分けることで読みやすさを保つことができます。
順序付きリストは、文書の構造を整理するうえでとてもよく使われる要素です。HTMLを書く際には「これは順番が重要な情報かどうか」を意識しながら、<ol>と<li>を組み合わせてコードを書く練習をすると、文書の組み立て方の感覚が身についていきます。
type属性で番号の形式を変更する方法
HTMLの順序付きリストでは、type属性を使うことで番号の表示形式を簡単に切り替えることができます。type属性（タイプ属性）とは、タグに対して「この種類で表示してください」と指定するための情報で、ここでは「どんな形の番号でリストを表現するか」をブラウザに伝える役割を持ちます。通常、<ol>タグだけを使った場合は「1, 2, 3…」というアラビア数字の形式になりますが、type属性を追加することで、アルファベットやローマ数字で表現することができるようになります。
type属性に指定できる主な値は次のとおりです。
1：1, 2, 3…（通常の数字）A：A, B, C…（大文字アルファベット）a：a, b, c…（小文字アルファベット）I：I, II, III…（大文字ローマ数字）i：i, ii, iii…（小文字ローマ数字）
これらはHTMLで定義されている標準的な形式で、特別な設定をしなくてもそのまま使うことができます。実際のコード例を見てみます。
<ol type="A">
<li>利用規約を確認する</li>
<li>プライバシーポリシーを確認する</li>
<li>同意して次へ進む</li>
</ol>このように書くと、ブラウザ上では次のように表示されます。
A. 利用規約を確認する
B. プライバシーポリシーを確認する
C. 同意して次へ進む
このように、type="A"と指定するだけで、番号の代わりにアルファベットが表示されます。アルファベットでの番号付けは、章立てのサブ項目や、アンケートの選択肢などでよく使われます。
次に、ローマ数字の例です。
<ol type="i">
<li>事前準備を行う</li>
<li>テスト環境で動作確認をする</li>
<li>本番環境へ反映する</li>
</ol>この場合は、i, ii, iii…という小文字のローマ数字で表示されます。ローマ数字は、補足的なステップや法的な条文風の書き方をしたい場合など、少し堅い印象を出したいときに利用されることがあります。
type属性は基本的には<ol>タグに対して指定しますが、実は<li>タグにも指定することができます。<li>に対してtypeを指定すると、その項目だけ番号の形式を変えることができます。ただし、混在させると読み手が混乱しやすいため、特別な意図がない限り、リスト全体は<ol>側で統一しておく方が分かりやすくなります。学習の初期段階では「番号形式を変えたいときは<ol>にtypeを指定する」と覚えておくとシンプルです。
<ol type="1">
<li>アカウントを作成する</li>
<li type="A">追加オプションを選択する</li>
<li>内容を確認して送信する</li>
</ol>このような書き方も文法上は可能ですが、2番目の項目だけA, B, C…の形式になり、かえって分かりにくくなります。そのため、実務ではあまり多用されません。例として知っておく程度で十分です。
type属性を使うときに意識していただきたいのは、「意味」と「見た目」をセットで考えることです。例えば、以下のようなケースがあります。
- メインの手順：
type="1"（数字） - サブの手順：
type="a"（小文字アルファベット） - さらに細かい補足：
type="i"（小文字ローマ数字）
このように、階層ごとに異なる形式を割り当てることで、どのレベルのステップなのかを視覚的に区別しやすくなります。ただし、HTMLだけで複雑なルールを作りすぎると管理が難しくなるため、まずは「数字」「大文字アルファベット」「小文字アルファベット」くらいを使い分けるところから始めると扱いやすいです。
また、type属性で番号形式を変える方法と、CSSでスタイルを変更する方法の違いも押さえておくと理解が深まります。type属性はHTML側の機能であり、「リストとしてどのような種類の番号を使うか」という論理的な指定です。一方、CSSは見た目の装飾に特化した仕組みで、「番号の位置」「余白」「色」「フォント」などを調整するのに向いています。より柔軟なデザインをしたい場合、CSSのlist-style-typeというプロパティを使うと、type属性と似たことをスタイルシート側で設定できます。学習順としては、まずHTMLのtype属性を理解し、その後でCSSを使った方法に広げていく流れがスムーズです。
type属性をうまく使うことで、同じ順序付きリストでも文書の性格に合った見せ方ができるようになります。利用規約の条文、アンケートの選択肢、レポートの章・節など、それぞれにふさわしい形式を選ぶことで、読み手が内容をたどりやすくなります。実際に手を動かして、typeの値を変えながらブラウザ表示を確認してみることで、各形式の違いや使いどころが自然と身についていきます。
start属性でリストの開始番号を設定する仕組み
HTMLの順序付きリストでは、通常は番号が「1」から自動的に始まりますが、start属性を使うと、この開始番号を自由に変更することができます。start属性は<ol>タグに指定する属性の1つで、「このリストは何番からスタートしますか？」という情報をブラウザに伝える役割を持ちます。数値を指定することで、2番から始めたり、10番から始めたりといった調整が可能になります。
基本的な書き方は次のようになります。
<ol start="4">
<li>会員登録を行う</li>
<li>メールアドレスを確認する</li>
<li>ログインしてプロフィールを設定する</li>
</ol>このコードでは、start="4"と指定しているため、ブラウザ上では次のように表示されます。
- 会員登録を行う
- メールアドレスを確認する
- ログインしてプロフィールを設定する
HTMLのソースコード上では特別な番号は書いていませんが、ブラウザはstart属性の数値を見て、自動的に「4」から番号を振り始めます。これにより、前のセクションで1〜3番まで説明していて、その続きとして4番から説明したいといったケースに対応できます。
start属性は整数（小数点を含まない数）を指定するのが基本です。一般的には1以上の正の整数を使いますが、仕様上は0や負の数も指定できます。ただし、実務では0やマイナスから始めるケースはほとんどなく、読み手にとっても分かりにくくなるため、通常は1, 2, 3…といった自然な番号に近い値を使うことが多いです。
start属性は、type属性と組み合わせて使うこともできます。type属性は番号の形式（数字・アルファベット・ローマ数字など）を指定するものでした。例えば、次のようなコードを書いた場合を考えます。
<ol type="A" start="3">
<li>環境設定</li>
<li>プロジェクト作成</li>
<li>動作確認</li>
</ol>この場合、type="A"なのでアルファベット（A, B, C…）が使われ、かつstart="3"なので、3番目のアルファベットである「C」から始まります。表示としては次のようになります。
C. 環境設定
D. プロジェクト作成
E. 動作確認
このように、start属性の値は形式に応じて解釈されます。数字形式なら数値そのもの、アルファベット形式なら「何番目の文字か」、ローマ数字形式なら「何番目のローマ数字か」という扱いになります。
実際の利用シーンとしては、次のようなケースが挙げられます。
- 1〜5番までを1つの章で説明し、6番から別の章で続きの手順を説明したい場合
- ページを分割して表示しているときに、それぞれのページで番号を継続させたい場合
- 途中に図や説明文が入るため、リストを分割せざるを得ないが、番号は続きとして表示したい場合
例えば、HTMLコードの中でリストを一度閉じて、間に別の説明を挟み、そのあとから番号を続きとして表示したい場面を考えます。
<ol>
<li>アプリをインストールする</li>
<li>アカウントを作成する</li>
</ol>
<p>ここで、一度アプリの基本画面を確認します。</p>
<ol start="3">
<li>通知設定を行う</li>
<li>プロフィールを編集する</li>
</ol>このように書くと、前半のリストは1, 2で終わり、後半のリストは3, 4から始まります。コード上は<ol>が2回使われていますが、表示としては「1〜4の連続した手順」として見せることができます。文書構造の都合でリストを分けたいが、番号は続けたいという場合に便利な方法です。
start属性と似た役割を持つ仕組みとして、<li>タグに指定できるvalue属性があります。value属性は「その項目だけの番号を直接指定する」ための属性です。例えば、次のようなコードです。
<ol>
<li>はじめに</li>
<li value="10">特別な項目</li>
<li>おわりに</li>
</ol>この場合、「特別な項目」には10という番号が付き、次の「おわりに」には11という番号が自動的に割り当てられます。value属性は個別の項目だけ番号を変えたいときに使えますが、多くの場合はリスト全体の開始番号を変えたいだけですので、まずはstart属性を覚えておくのがシンプルです。
注意点として、start属性はHTML5では<ol>に対して正式に認められている属性ですが、古い仕様では非推奨とされていた時期もあります。現在のブラウザでは問題なく動作しますが、「番号の制御をどこまでHTML側で行うか」「CSSやスクリプトで制御するか」という設計方針も関係してきます。初学者の段階では、まずはHTMLの標準的な機能としてstart属性を理解し、必要に応じて使えるようにしておくと良いです。
このように、start属性を使うことで、順序付きリストの開始番号を柔軟に調整することができます。文書全体の構成を考えながら、「どこから番号を始めるのが読み手にとって自然か」という視点で活用していくことで、より分かりやすいHTML文書を作成できるようになります。
ネストした順序付きリストで複雑な構造を表現する
HTMLの順序付きリストでは、リストの中にさらに別のリストを入れることで、階層構造を表現することができます。これを「ネスト（入れ子）されたリスト」と呼びます。ネストとは、「ある要素の内側に別の要素が入っている状態」を指す用語で、フォルダの中にさらにフォルダがあるイメージに近い概念です。ネストした順序付きリストを使うことで、「大きな手順」と「その中に含まれる細かい手順」や、「章」と「節」のような複数レベルの情報をすっきり整理して表示できます。
基本的な考え方としては、「<li>の中に、さらに<ol>を入れる」という構造になります。コードの例を見てみます。
<ol>
<li>開発環境を準備する
<ol>
<li>エディタをインストールする</li>
<li>ブラウザを用意する</li>
<li>作業用フォルダを作成する</li>
</ol>
</li>
<li>HTMLファイルを作成する</li>
<li>ブラウザで動作を確認する</li>
</ol>この例では、1つ目の項目「開発環境を準備する」の中に、さらに3つの手順が<ol>として入っています。ブラウザ上では、通常1階層目が「1. 2. 3.」、2階層目がインデント（字下げ）されて「1. 2. 3.」といった形で表示されます。見た目のスタイルはブラウザによって少し異なりますが、多くの場合、入れ子のリストは少し右に寄せられて表示され、レベルの違いが視覚的に分かるようになっています。
ネストを使うときのポイントは、「<ol>は必ず<li>の中に入れる」というルールを守ることです。次のような書き方は構造として正しくありません。
<!-- 良くない例 -->
<ol>
<li>開発環境を準備する</li>
<ol>
<li>エディタをインストールする</li>
<li>ブラウザを用意する</li>
</ol>
</ol>このように<ol>が<li>と並んで書かれていると、ブラウザは「この2つの<ol>は別々のリスト」と認識してしまいます。正しくは、<li>の中にネストした<ol>を含める形にします。インデントを整えながら書くと、どのタグがどの内側に入っているかが視覚的に分かりやすくなります。
さらに複雑な構造を作りたい場合は、3階層以上にネストすることもできます。ただし、階層を深くしすぎると読み手にとって理解しづらくなるため、実務では2〜3階層程度にとどめることが多いです。例えば、次のような構造です。
<ol>
<li>企画
<ol>
<li>要件整理</li>
<li>画面構成案の作成
<ol>
<li>トップページのレイアウト</li>
<li>詳細ページのレイアウト</li>
</ol>
</li>
<li>スケジュール作成</li>
</ol>
</li>
<li>デザイン</li>
<li>実装</li>
</ol>この例では、「企画」の中に「要件整理」「画面構成案の作成」「スケジュール作成」があり、そのうち「画面構成案の作成」の中にさらに2つの詳細項目がネストされています。階層ごとにインデントを1段ずつ下げることで、どの項目がどの親に属しているかがコード上でも分かります。
ネストした順序付きリストでは、階層ごとに番号形式を変えることもできます。例えば、1階層目は数字、2階層目は小文字アルファベット、3階層目はローマ数字といった組み合わせです。
<ol type="1">
<li>準備
<ol type="a">
<li>必要なソフトの確認</li>
<li>アカウント情報の確認
<ol type="i">
<li>ユーザー名</li>
<li>パスワード</li>
</ol>
</li>
</ol>
</li>
<li>作業</li>
</ol>このように書くと、階層ごとに異なるスタイルの番号が付くため、「どのレベルの情報なのか」を視覚的に区別しやすくなります。type属性はそれぞれの<ol>に個別に指定できるので、階層構造に合わせて柔軟に設定できます。
ネストを扱うときに気をつけたいのは、タグの開き忘れ・閉じ忘れです。<li>の閉じタグ</li>を忘れてしまうと、その後ろに続く<ol>や他の<li>が思わぬ位置に含まれてしまい、表示が崩れたり、ブラウザによって解釈が変わったりします。エディタの機能でタグの対応を表示したり、自動インデントを活用したりしながら、構造を丁寧に確認する習慣をつけるとよいです。
また、スクリーンリーダーなどの支援技術は、ネストしたリストの階層構造を認識して読み上げます。そのため、順序付きリストを正しくネストすることで、「第1章」「第1章の中の節」「その節の中の小項目」のような関係を音声でも伝えやすくなります。これはアクセシビリティの観点からも重要なポイントです。
ネストした順序付きリストは、マニュアル、仕様書、チュートリアル記事など、段階的に情報を整理したい場面で特に効果的です。最初はシンプルな2階層から練習し、慣れてきたら3階層や異なるtype属性の組み合わせも試しながら、複雑な情報を分かりやすく整理する方法を身につけていくことができます。
CSSを使って順序付きリストの見た目を調整する
順序付きリストは、HTMLだけでも番号付きのリストとして表示できますが、CSS（スタイルシート）を使うことで、見た目をより読みやすく整えたり、デザインに合わせてカスタマイズしたりすることができます。CSSとは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、文字の色やサイズ、余白、配置など、Webページの見た目を指定するための仕組みです。ここでは、順序付きリストに対してよく使うCSSのプロパティ（スタイルの項目）を、初心者の方にも分かりやすいように説明します。
まず、順序付きリストの基本的なHTMLを用意します。
<ol class="steps">
<li>アカウントを作成する</li>
<li>メールアドレスを確認する</li>
<li>プロフィールを登録する</li>
</ol>ここでは、<ol>タグにclass="steps"というクラス名を付けています。クラス名とは、「この要素に対して特定のスタイルをまとめて適用するためのラベル」のようなものです。CSS側では、このクラス名を使ってスタイルを指定します。
list-style-typeで番号の種類を変える
CSSで順序付きリストの番号形式を指定するには、list-style-typeというプロパティを使います。HTMLのtype属性と似た役割ですが、CSS側から見た目をコントロールできる点が特徴です。
.steps {
list-style-type: decimal;
}decimalは通常の数字（1, 2, 3…）を意味します。他にも、次のような値を指定できます。
decimal：1, 2, 3…upper-alpha：A, B, C…lower-alpha：a, b, c…upper-roman：I, II, III…lower-roman：i, ii, iii…
例えばアルファベットで表示したい場合は、次のように指定します。
.steps {
list-style-type: upper-alpha;
}HTMLでtype属性を使う方法と、CSSでlist-style-typeを使う方法のどちらを選ぶかは設計の考え方によりますが、「見た目」はCSS側に寄せていくと管理しやすくなります。
list-style-positionで番号の位置を調整する
番号とテキストの位置関係を調整したい場合は、list-style-positionプロパティを使います。主にoutsideとinsideという2つの値を指定します。
.steps {
list-style-position: outside;
}outside：番号がリストの外側に配置されます（多くのブラウザの標準設定）inside：番号がテキストの行内に含まれるように配置されます
insideを指定すると、複数行に折り返されたときの見た目が変わります。説明文が長いリストでレイアウトを整えたいときに試してみると違いが分かりやすいです。
marginとpaddingで余白を整える
順序付きリストは、標準でも左側に少しインデント（字下げ）が入っていますが、ページ全体のレイアウトに合わせて余白を調整したい場面がよくあります。そのときに使うのが、margin（外側の余白）とpadding（内側の余白）です。
.steps {
margin-left: 1.5rem;
padding-left: 1rem;
}ここで出てきたremは、フォントサイズを基準にした長さの単位で、レスポンシブデザイン（画面サイズに応じてレイアウトが変わるデザイン）でよく使われます。margin-leftを調整することで、リスト全体の位置を左右に動かすことができ、padding-leftで番号とテキストの間の余白を微調整できます。
li要素の行間や文字のスタイルを変更する
番号だけでなく、各項目の行間や文字スタイルを整えることも大切です。リスト項目の要素である<li>に対してスタイルを指定すると、リスト全体の読みやすさが向上します。
.steps li {
margin-bottom: 0.5rem;
line-height: 1.6;
font-size: 1rem;
}margin-bottom：各項目の下に余白を追加しますline-height：行の高さを調整し、行間を広げて読みやすくしますfont-size：文字の大きさを指定します
説明文が多いステップのリストでは、少し行間を広めに設定しておくと、読み手の負担が軽くなります。
カスタム風の番号スタイルを作る基礎
より凝ったデザインにしたい場合、CSSの疑似要素（::beforeなど）を使って、番号の代わりに丸で囲んだ数字や装飾付きの番号を作る方法があります。疑似要素とは、「実際にはHTMLに書かれていないが、見た目として追加の要素を表示するための仕組み」です。ここでは基礎的なイメージとして、番号の前に背景付きの丸を表示する簡単な例を紹介します。
.custom-steps {
list-style: none;
counter-reset: step;
}
.custom-steps li {
counter-increment: step;
margin-bottom: 0.75rem;
position: relative;
padding-left: 2.5rem;
}
.custom-steps li::before {
content: counter(step);
position: absolute;
left: 0;
top: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}ここでは、list-style: none;で標準の番号表示を消し、counter-resetやcounter-incrementというCSSのカウンター機能を使って独自の番号を表示しています。カウンター機能とは、CSS側で「1, 2, 3…」といった連番を管理し、それをcontentプロパティで表示する仕組みです。少し中級者向けの内容になりますが、「CSSだけでも番号を柔軟にデザインできる」というイメージを持っていただければ十分です。
このように、CSSを組み合わせることで、順序付きリストは単なる番号付きの一覧から、デザイン性と読みやすさを両立した「見せるリスト」へと変えていくことができます。HTMLで構造を正しく作り、その上にCSSでスタイルを重ねていくことが、Webページ制作の基本的な流れになります。
実践的な順序付きリストの活用例
順序付きリストは、単に番号を付けて情報を並べるだけの仕組みではなく、実際のWebページやアプリケーションの中で多くの場面に活用されています。順番に意味のある情報を視覚的に整理し、読み手が迷わず理解できるように導くための重要な要素です。ここでは、実務でもよく見られる活用例を、実際のイメージが広がるように丁寧に解説していきます。
手順書・チュートリアルページでの活用
Webサービスやアプリケーションの使い方を説明するチュートリアルでは、「ステップ1」「ステップ2」といった形で段階的に説明する場面が頻繁にあります。順序付きリストを使うことで、手順の流れが自然に伝わり、読み手がどの段階にいるかを把握しやすくなります。
たとえばアカウント作成の説明であれば次のようになります。
<ol>
<li>メールアドレスを入力する</li>
<li>パスワードを設定する</li>
<li>確認メールのリンクをクリックする</li>
<li>ログインして初期設定を行う</li>
</ol>このように、工程が明確に分かれている情報は順序付きリストとの相性が非常に良く、視覚的にも分かりやすい構造になります。
ランキング形式の情報表示
商品のおすすめランキング、人気のレシピランキング、アンケート結果など、「順位」を表現したい場面でも順序付きリストがよく使われます。順位が変動する可能性がある場合や、後から項目を追加する場合でも、ブラウザが自動的に番号を振ってくれるため、番号の修正に手間がかかりません。
たとえば次のような使い方があります。
<ol>
<li>人気No.1：●●アプリ</li>
<li>人気No.2：△△サービス</li>
<li>人気No.3：★★ツール</li>
</ol>手動で番号を書く必要がなく、追加・削除も簡単なので、ランキングページでは欠かせない要素といえます。
長い文章の章立て・構造整理として
解説記事やレポートなどで、章・節・項を構造化するために順序付きリストを使う方法もあります。見出しタグ（<h1>や<h2>）と併用することもできますし、文書の一部を分かりやすい番号付きの構造にすることで、読者の理解を助けます。
たとえば、法律や規約の文章では以下のような使われ方があります。
<ol>
<li>総則</li>
<li>利用条件</li>
<li>禁止事項</li>
<li>免責事項</li>
</ol>規則性のある文章では特に順番が重要となるため、順序付きリストの利用は自然で、文章全体の読みやすさにも貢献します。
フォーム説明・申込み手順の提示
ユーザーに入力フォームを案内する場合、説明文をただ並べるよりも段階的に区切ったほうが理解しやすくなります。特に、初めて利用するユーザーにとっては、何をどの順番で行えばよいかが明確になることが大切です。
<ol>
<li>基本情報を入力する</li>
<li>支払い方法を選択する</li>
<li>入力内容を確認する</li>
<li>送信ボタンを押して完了する</li>
</ol>このように書くことで、ユーザーは迷わず入力プロセスを進めることができ、離脱を防ぐ効果も期待できます。
プロジェクトの進行ステップ整理
チームで進めるプロジェクトでは、タスクを順番に整理しておくことが重要です。ミーティングの議事録や進行表で順序付きリストを使うと、タスクの流れが明確になるため、メンバー全員が同じ認識を持ちやすくなります。
たとえば次のような使い方です。
<ol>
<li>要件定義をまとめる</li>
<li>デザイン案を作成する</li>
<li>実装に取りかかる</li>
<li>レビューを行う</li>
<li>公開準備を進める</li>
</ol>順序付きリストは、単なる一覧ではなく、「作業の流れ」を表現するためのツールとして有効に機能します。
教材やレッスンでの説明補助
プログラミング教材、語学学習のステップ、トレーニングメニューなど、学習過程が段階的に構成される場面でも順序付きリストが役立ちます。ステップが視覚的に整理されることで、学習者が現在どこにいるのかを把握しやすくなります。
たとえばプログラミング学習の導入では次のようになります。
<ol>
<li>環境構築を理解する</li>
<li>基本的な文法を学ぶ</li>
<li>簡単なプログラムを書く</li>
<li>応用的なコードを書く</li>
</ol>段階的な学習には順序付きリストがぴったりで、教材制作にもよく使われます。
Web記事の目次としての活用
番号付きの目次は、長い記事を読みやすくするために非常に効果的です。見出しへのリンクを付ければ、ページ内のナビゲーションとしても利用できます。
<ol>
<li><a href="#section1">HTMLとは？</a></li>
<li><a href="#section2">順序付きリストの基本</a></li>
<li><a href="#section3">応用的な使い方</a></li>
</ol>検索ユーザーに優しい記事を作る上でも順序付きリストの目次は欠かせません。
実務でのメリット
順序付きリストを実践的に使うことで次のような利点があります。
- 番号が自動付与されるため、メンテナンスがしやすい
- 構造化され、検索エンジンや支援技術にも正しく伝わる
- レイアウトが整い、ユーザーの読みやすさが向上する
- タスクや手順を整理する思考プロセスが透明化する
順序付きリストは、単なるHTMLの基礎を超えて、実務でも大きな役割を果たす重要な機能です。場面に応じて使い方を工夫することで、情報の伝わり方が大きく変わります。
まとめ
HTMLの順序付きリストについて、基礎から少し応用的な内容まで段階的に学んできました。まず最初に、順序付きリストとは何かという概念面から確認し、「順番に意味がある情報」を表現するときに使う要素であることを押さえました。具体的には、料理のレシピ、アプリの操作手順、申し込みの流れ、ランキングなど、順番を入れ替えてしまうと意味が変わってしまう場面で活躍することを見てきました。あわせて、順序が重要ではない<ul>タグ（箇条書きリスト）との違いも確認し、「順番が大事かどうか」でタグを選ぶという考え方を学びました。
次に、実際の書き方として、<ol>タグと<li>タグの基本的な使い方を詳しく見ました。<ol>がリスト全体を包む箱であり、<li>が1つ1つの項目を表す部品であること、そして<li>は必ず<ol>や<ul>の中で使うことなど、文法面で重要なポイントを整理しました。また、インデント（字下げ）を付けてコードを書くことで、入れ子構造が理解しやすくなり、タグの閉じ忘れにも気付きやすくなるという、実務的な習慣についても触れました。
そのうえで、type属性を使って番号の形式を変える方法も学びました。アラビア数字だけでなく、大文字・小文字のアルファベット、ローマ数字などを使い分けることで、文書の性格や階層に応じた番号表記ができることを確認しました。type="1"、type="A"、type="a"、type="I"、type="i"といった指定によって、表示がどのように変わるかをコード例とともに整理しました。章と節、補足など、レベルごとにスタイルを変える考え方は、長い文章を整理するうえで非常に役に立ちます。
さらに、start属性を使って、リストの開始番号を任意の値から始める方法も学びました。これにより、文書の途中でリストを分割しつつも、表示上の番号は続きとして扱うことができます。1つの章で1〜3番、次の章で4番から再開したいときなどに活用できることを具体例で確認しました。また、<li>のvalue属性を使って特定の項目だけ番号を変更する方法にも軽く触れ、リストの番号を柔軟に制御できることを理解しました。
構造面では、ネスト（入れ子）した順序付きリストについても扱いました。<li>の中にさらに<ol>を入れることで、「大きなくくり」と「その中の小さなくくり」をきれいに表現できることを、コード例を通して確認しました。階層ごとにtype属性を変えれば、数字、アルファベット、ローマ数字といった具合にレベルを視覚的に区別することも可能です。正しくネストされた構造は、人間にとって読みやすいだけでなく、スクリーンリーダーなどの支援技術にも理解されやすく、アクセシビリティの向上にもつながるという点も重要なポイントでした。
見た目の面では、CSSを使って順序付きリストを調整する方法も確認しました。list-style-typeで番号の種類を制御したり、list-style-positionで番号の位置を変えたり、marginやpaddingで余白を整えたりすることで、レイアウト全体に馴染ませることができることを学びました。また、CSSのカウンター機能や疑似要素を使うと、丸で囲んだ番号やカスタム風のステップ表示も実現できることを紹介し、「構造はHTML、デザインはCSS」という役割分担のイメージも掴んでいただけたと思います。
最後に、実践的な活用例として、チュートリアル、ランキング、章立て、フォームの手順説明、プロジェクトの進行ステップ、教材のカリキュラム、記事の目次など、具体的な利用シーンを幅広く見てきました。こうした例から分かるように、順序付きリストは単なる学習用のサンプルではなく、実際のWeb制作の現場で頻繁に使われる重要な要素です。番号を自動で管理してくれるためメンテナンスがしやすく、文書構造を明確に伝えやすくなる点は、どのような規模のサイトでも役立ちます。
ここまでの内容を通して、HTMLの順序付きリストについて、「なぜ使うのか」「どう書くのか」「どのような場面で活用できるのか」という流れで理解が深まっていれば、実務や学習で十分に使いこなしていけます。今後は、実際に自分で小さなページを作り、<ol>と<li>、属性、CSSなどを組み合わせながら試していくことで、より自然に順序付きリストを扱えるようになっていきます。