HTMLを学び始めると、文字や画像を表示するだけでなく、「リスト（箇条書き）」を作る場面がたくさん出てきます。リストには大きく分けて2種類あり、「順番に意味があるリスト」と「順番に意味がないリスト」があります。olタグは、そのうち「順番に意味があるリスト」を表現するためのタグで、「ordered list（順序付きリスト）」の略称です。ブラウザでは通常、1. 2. 3. のように番号付きで表示されるため、「番号付きリスト」と呼ばれることも多いです。
HTMLのolタグとは？番号付きリストの基本理解
olタグは、単体で使うのではなく、liタグとセットで使います。liタグは「list item（リストの項目）」の略で、リストの1つ1つの項目を表す要素です。例えば、やることリストをHTMLで書くときは、次のような形になります。
<ol>
<li>メールを確認する</li>
<li>資料を作成する</li>
<li>ミーティングに参加する</li>
</ol>このように記述すると、ブラウザ上では自動的に「1. メールを確認する」「2. 資料を作成する」のように番号が付きます。ここで重要なのは、HTMLのコード上では番号を直接書いていないのに、ブラウザが自動で正しい番号を振ってくれるという点です。項目を途中で追加したり削除したりしても、番号は自動で振り直されますので、後から修正するときにもとても便利です。
olタグが活躍する典型的な場面としては、次のようなものがあります。
- 手順書やマニュアル
例：会員登録の手順、ソフトウェアのインストール手順など - 手続きの流れ
例：申し込みから支払い完了までのステップ - 優先順位があるリスト
例：重要度順のタスク一覧、ランキング形式の紹介 - 時系列で並ぶ内容
例：イベントの進行順、ストーリーの流れ
これらに共通しているのは、「1番目」「2番目」といった順番が持つ意味が重要であるという点です。つまり、順序が入れ替わると意味が変わってしまうような情報は、olタグを使うのが適切だといえます。
逆に、「好きな食べ物リスト」「持ち物リスト」のように、順番が入れ替わっても意味が変わらない場合は、olタグではなくulタグ（unordered list：順序なしリスト）を使うのが一般的です。ulタグでは、番号ではなく「・」のような黒い点（ビュレット）で表示されます。初心者の方は、ここで「見た目の違い」だけで覚えがちですが、本来は「順番に意味があるかどうか」という内容の違いで使い分けることがポイントになります。
また、olタグは見た目上の装飾だけでなく、「このリストには順番に意味があります」という情報をブラウザや支援技術（スクリーンリーダーなど）に伝える役割も持っています。スクリーンリーダーは、視覚障害のあるユーザーに画面の内容を読み上げるソフトウェアのことで、olタグが使われていると、「番号付きリスト、項目は3つです」のように、より適切な読み上げをしてくれます。このように、olタグはアクセシビリティ（誰にとっても利用しやすいデザイン）という観点からも重要な要素です。
さらに、olタグの中に別のolやulを入れて、入れ子（ネスト）構造のリストを作ることもできます。例えば、「大きな手順」の中に「細かいサブ手順」がある場合などです。入れ子にすることで、情報の階層構造をそのままHTMLで表現でき、読む側にとっても流れを理解しやすくなります。HTMLでは、このように構造（意味）を素直に記述していくことが基本的な考え方になります。
このように、olタグは単なる「番号付き表示」のためのタグではなく、「順序に意味がある項目の集まり」を表現するための要素として位置づけられていることが特徴です。
HTMLのolタグで番号付きリストを作成する基本構文
HTMLでolタグを使って番号付きリストを作成する際の基本構文は、とてもシンプルですが、いくつかの決まりごとをセットで覚えておくと理解しやすくなります。まず前提として、HTMLの「タグ」とは、<p>や<h1>のように山かっこ（<と>）で囲まれた記号のことで、ブラウザに「ここからここまでが段落です」「ここからここまでが見出しです」といった意味（構造）を伝える役割を持っています。olタグもこのタグの一つで、「ここからここまでが順序付き（番号付き）のリストです」ということをブラウザに教えるための要素です。
番号付きリストの基本構造は、以下の3つの要素で成り立っています。
olタグ … ordered list（順序付きリスト）を表す親要素liタグ … list item（リストの項目）を表す子要素- リストの中身のテキスト … 各
liタグの中に書く実際の文章
最も基本的な構文は次のようになります。
<ol>
<li>1つ目の項目</li>
<li>2つ目の項目</li>
<li>3つ目の項目</li>
</ol>このコードでは、<ol>でリストの開始を宣言し、</ol>でリストの終了を示しています。その内側に複数の<li>…</li>を並べることで、1つ1つの項目を定義しています。ポイントは、番号「1.」「2.」などはHTMLには書いておらず、ブラウザが自動で付けてくれるという点です。これにより、途中の項目を削除したり順番を入れ替えたりしても、ブラウザ側で番号が振り直され、常に正しい番号順で表示されます。
実務や学習の現場では、インデント（字下げ）も非常に重要です。インデントとは、コードを見やすくするために行の先頭にスペースやタブを入れて階層をずらすことです。上の例では、<ol>の中にある<li>を2文字分インデントしており、「olの子要素である」という関係が視覚的にわかりやすくなっています。ブラウザはインデントの有無に関係なく表示してくれますが、人間がコードを読むときの読みやすさに大きく影響します。
番号付きリストを実際にページ内に配置するときは、段落や見出しと組み合わせて使うことが多くなります。例えば、手順を説明する文章の中で番号付きリストを使う場合は次のような形になります。
<h2>会員登録の手順</h2>
<p>会員登録は次の3ステップで完了します。</p>
<ol>
<li>登録フォームに必要事項を入力する</li>
<li>確認画面で内容をチェックする</li>
<li>登録ボタンをクリックして完了する</li>
</ol>このように、h2タグ（見出し）やpタグ（段落）と組み合わせることで、「見出し → 説明文 → 手順のリスト」という自然な流れを作ることができます。ここでも、手順は順番に意味があるため、olタグが適している形になります。
次に、olタグを入れ子（ネスト）にした例も見てみます。入れ子とは、ある要素の中に別の同じ種類、または別の種類の要素が入っている構造のことです。手順の中にさらに細かいサブ手順がある場合には、次のように書けます。
<ol>
<li>環境を準備する</li>
<li>ソフトをインストールする
<ol>
<li>インストーラーをダウンロードする</li>
<li>インストーラーを実行する</li>
<li>画面の指示に従ってインストールを完了する</li>
</ol>
</li>
<li>動作確認を行う</li>
</ol>この例では、2つ目のliの中にもう一つolが入っています。ブラウザは、自動的に内側のolには別の番号やインデントを付けて表示してくれます。このように入れ子構造を使うと、情報の階層をそのまま表現でき、ユーザーにとっても流れが視覚的に把握しやすくなります。
また、HTMLでは「閉じタグ」を忘れないことも大切です。閉じタグとは、</ol>や</li>のようにスラッシュ（/）が付いたタグのことで、要素がどこで終わるのかを示します。liタグの閉じ忘れは、ブラウザが自動で補完してくれることもありますが、意図しないレイアウト崩れや、のちのメンテナンス性の低下につながるため、学習段階から正しい構文で書く習慣をつけることが重要です。
さらに、olタグは改行の扱いにも注意が必要です。HTMLでは、コード上の改行はそのまま画面上の改行にならないことが多く、ブラウザが自動的に余白や行間を調整します。liの中に長い文章を書く場合でも、コードの読みやすさのために途中で改行してかまいません。ブラウザ側では1つの項目としてまとめて表示されます。
番号付きリストを作成する基本構文を理解する際には、「olの中にliを並べる」「番号はブラウザがつけてくれる」「タグの開きと閉じを正しく書く」「インデントで階層を視覚的に整理する」といったポイントをセットで意識しておくと、実際のコーディングでも迷いにくくなります。
olタグとulタグの違いを具体例で理解する
HTMLでリストを作るときによく登場するのが、olタグとulタグです。どちらも「箇条書きのリスト」を表現するためのタグですが、意味（役割）が異なります。この意味の違いをしっかり理解しておくと、検索エンジンやスクリーンリーダーなどにも正しく情報を伝えられ、より質の高いHTMLを書くことができます。
まず、olタグは「ordered list（順序付きリスト）」の略で、「順番に意味があるリスト」を表します。ブラウザでは通常、「1. 2. 3.」といった番号付きで表示されます。一方、ulタグは「unordered list（順序なしリスト）」の略で、「順番に意味がないリスト」を表し、ブラウザでは「・」などのビュレット（黒丸や中点のような記号）で表示されます。
具体的な例で比べてみます。たとえば、会員登録の手順を説明する場合は、順番がとても重要です。この場合はolタグを使うのが適切です。
<h2>会員登録の手順</h2>
<ol>
<li>登録フォームに必要事項を入力する</li>
<li>確認画面で内容をチェックする</li>
<li>登録ボタンを押して完了する</li>
</ol>この手順では、2番目と3番目が入れ替わると意味が通じなくなります。そのため、「順序に意味がある＝ordered」であるolが選ばれます。
次に、持ち物リストのように順番が入れ替わっても構わない場合を考えます。例えば、旅行の持ち物チェックリストは、上から順番通りに準備しなくても問題ないことが多いです。このような場合はulタグが適しています。
<h2>旅行の持ち物リスト</h2>
<ul>
<li>パスポート</li>
<li>財布</li>
<li>スマートフォン</li>
<li>充電器</li>
</ul>ここでは「パスポート → 財布 → スマートフォン」という順番自体には意味がなく、「どれも必要な持ち物」という点だけが重要です。そのため、「順序なし＝unordered」のulを使います。
もう少し踏み込んで、ランキング形式のコンテンツを例にしてみます。例えば、「おすすめアプリ ベスト3」のようなランキングは、1位・2位・3位という順位がそのまま意味を持っています。この場合もolタグを使うのが自然です。
<h2>おすすめアプリ ベスト3</h2>
<ol>
<li>家計簿アプリA</li>
<li>タスク管理アプリB</li>
<li>ヘルスケアアプリC</li>
</ol>1位と3位が入れ替わると、ランキングとしての意味が変わります。このように、順位や優先度を表現したいときもolを使います。
逆に、「特徴一覧」や「機能一覧」のように、重要度の差をあえて付けていない場合はulが向いています。
<h2>このアプリの主な機能</h2>
<ul>
<li>支出の自動分類</li>
<li>予算の設定</li>
<li>グラフでの可視化</li>
</ul>ここでは、どの機能が一番重要かという順位は明示していません。「どれも主な機能」という同列の扱いになるため、順序なしリストであるulを使う方が意味として適切です。
視覚的な違いだけでなく、アクセシビリティの観点も重要です。スクリーンリーダー（画面の内容を読み上げるソフトウェア）は、olとulを区別して認識します。olの場合は「番号付きリスト、項目は3つです」のように読み上げ、ulの場合は「箇条書きリスト、項目は3つです」のように読み上げます。つまり、正しくタグを使い分けることで、視覚に頼らずに情報を得ているユーザーにも「順番が大事かどうか」という意味が伝わります。
コーディングの現場では、見た目をCSSで自由に変更できるため、「見た目だけを基準にタグを選んでしまう」というミスが起こりがちです。例えば、「番号はいらないからulで作ろう」としてしまうケースです。本来はolがふさわしい場面でulを使うと、「順番に意味がある」という情報が失われてしまいます。番号の見た目だけを変えたい場合は、HTMLではolを使い、見た目のスタイルはCSSで調整する考え方が望ましいです。
また、olとulは入れ子にして使うこともできます。例えば、「手順の中にポイント一覧がある」ようなケースです。
<ol>
<li>アプリをインストールする</li>
<li>初期設定を行う
<ul>
<li>通知設定をオンにする</li>
<li>テーマカラーを選ぶ</li>
</ul>
</li>
<li>バックアップを有効にする</li>
</ol>この例では、全体は順序付きの手順なのでolを使用し、その中の「初期設定のポイント」は順番に意味がないためulで表現しています。このように、1つのコンテンツの中でも「順序に意味があるもの」「ないもの」が混在することはよくあり、それぞれに応じてolとulを使い分けることが大切です。
タグ選びの基準としては、「このリストの順番が入れ替わったら意味が変わるか？」と自分に問いかけると判断しやすくなります。意味が変わるならol、変わらないならulというシンプルなルールを意識しておくと、実務でも迷いにくくなります。
手順や手続きにぴったりなolタグの活用パターン
olタグは「順序付きリスト」を表すタグですので、特に手順や手続きの説明と相性が良い要素です。ここでは、実際にどのような場面でolタグを使うと分かりやすいページになるのか、いくつかの典型的なパターンに分けてご紹介します。あわせて、なぜolタグが向いているのかという理由も整理しておくと、設計段階でタグ選びに迷いにくくなります。
会員登録・ログインなどの操作手順
Webサービスでは、会員登録やログイン方法、パスワード再設定など、ユーザーに一定の手順を踏んでもらう場面が頻繁に登場します。これらは「1→2→3」という順序が重要なため、olタグを使った番号付きリストが適しています。
<h2>パスワード再設定の手順</h2>
<ol>
<li>ログイン画面の「パスワードをお忘れの方」をクリックします。</li>
<li>登録しているメールアドレスを入力して送信します。</li>
<li>届いたメールのURLをクリックします。</li>
<li>新しいパスワードを入力して確定します。</li>
</ol>このように記述することで、ユーザーは「次に何をすればよいか」を視覚的に追いやすくなります。順番が変わると成立しない処理であるほど、olタグによる番号付きの手順表示は有効です。
インストール手順やセットアップガイド
アプリケーションやツールのインストール手順、初期設定、環境構築などもolタグがよく使われる場面です。これらは特に技術的な手順が多く、1つでも抜けると動かなくなる場合があるため、明確な番号付きで示してあげることが重要になります。
<h2>ツールのインストール手順</h2>
<ol>
<li>公式サイトからインストーラーをダウンロードします。</li>
<li>ダウンロードしたファイルをダブルクリックして実行します。</li>
<li>画面の指示に従って「次へ」をクリックしながら進めます。</li>
<li>インストールが完了したら、ツールを起動して動作を確認します。</li>
</ol>このパターンでは、スクリーンショットや図解と組み合わせることも多いですが、HTML構造としては上記のようにシンプルなol＋liで表現するのが基本形です。
申請・問い合わせなどの事務手続きの流れ
社内向けサイトや管理画面、サービスのヘルプページでは、申請手続きや問い合わせ手続きの流れを説明することがあります。例えば、「有給休暇申請の手順」「解約手続きの流れ」などです。これらも「この順番で進めてください」という意味を持つため、olタグに向いたコンテンツです。
<h2>お問い合わせの流れ</h2>
<ol>
<li>お問い合わせフォームにアクセスします。</li>
<li>お名前・メールアドレス・内容を入力します。</li>
<li>入力内容を確認して送信ボタンを押します。</li>
<li>担当者からの返信メールをお待ちください。</li>
</ol>このような説明は、ulタグで単に箇条書きにしてしまうと、「順序に意味がある」という情報が失われてしまいます。olを使うことで、画面を見た瞬間に「手順なんだな」と理解してもらいやすくなります。
チュートリアル・学習コンテンツのステップ
プログラミングのチュートリアルやデザインツールの使い方説明など、学習コンテンツでもolタグがよく使われます。チュートリアルでは、「ステップ1」「ステップ2」といった表現で段階的に学んでいく構成が多く、その構造をHTMLで素直に表現するのにolタグが向いています。
<h2>HTML学習のステップ</h2>
<ol>
<li>タグと要素の基本を理解します。</li>
<li>テキスト・画像・リンクなどの基本的な要素を学びます。</li>
<li>リストやテーブルで情報を整理する方法を学びます。</li>
<li>フォームを使った入力画面の作り方を学びます。</li>
</ol>このようにステップ形式にすると、学習者は今どの段階にいるのか、次にどこへ進むのかを把握しやすくなります。
チェックリストとステップの組み合わせ
ときどき、1つの手順の中に「確認事項のチェックリスト」が含まれることがあります。この場合、親の流れをol、中の確認項目をulで表現するパターンがよく使われます。olの中にulを入れ子にすることで、全体の流れと各ステップ内のチェックポイントを分かりやすく構造化できます。
<h2>公開前チェックの手順</h2>
<ol>
<li>ページ内容の確認
<ul>
<li>誤字脱字がないか確認する</li>
<li>リンク切れがないか確認する</li>
<li>画像が正しく表示されているか確認する</li>
</ul>
</li>
<li>動作確認
<ul>
<li>主要なブラウザで表示を確認する</li>
<li>スマートフォンでレイアウトを確認する</li>
</ul>
</li>
<li>公開設定の実施</li>
</ol>このような構成は、作業フローを整理する社内マニュアルなどで特によく使われるパターンです。
フロー図のテキスト版としての利用
実際の画面では図解のフローチャートを使いたい場合でも、テキスト版として手順を併記するときにはolタグが役立ちます。フローチャートは視覚的にはわかりやすいものの、テキストとしての構造化情報にはなりません。olで同じ流れを文字として表現しておくことで、検索性やアクセシビリティを高めることができます。テキスト版の手順は、図解とは別にマークアップしておく考え方が実務でもよく採用されます。
入力フォームの「ステップ表示」としての利用
会員登録や購入フローなどで、「ステップ1 情報入力」「ステップ2 内容確認」「ステップ3 完了」といったステップ表示を作る場合にも、olタグを使うことがあります。これは見た目としてはタブや横並びのステップナビゲーションに見せつつ、HTML構造としては番号付きリストにしておくというパターンです。CSSで横並びにし、現在のステップだけを強調表示するといったデザインと組み合わせることができます。
<ol class="steps">
<li class="current">情報入力</li>
<li>内容確認</li>
<li>完了</li>
</ol>このように、見た目は自由にデザインしつつ、HTMLの意味としては「順序のあるステップ」であることをolで表現する活用パターンがあります。こうした場面では、olタグによって手順の順序を明確に表現できます。
olタグの属性（type・start・reversed）で番号表示をカスタマイズする方法
olタグは、単に「1, 2, 3…」と番号を振るだけではなく、いくつかの属性を指定することで番号の見た目や開始位置、カウント方向をカスタマイズすることができます。ここで扱うtype、start、reversedは、いずれもHTML標準で用意されている属性で、追加のスクリプトなしで簡単に動作させることができます。それぞれの役割を理解しておくと、マニュアルや目次、ステップ表示などで柔軟な表現ができるようになります。
type属性：番号のスタイルを変更する
type属性は、番号の「形式」を指定するための属性です。デフォルトではアラビア数字（1, 2, 3…）で表示されますが、typeを指定することでローマ数字やアルファベットなどに変えることができます。主な値は次のとおりです。
type="1"… アラビア数字（1, 2, 3, …）※初期値type="A"… 英大文字（A, B, C, …）type="a"… 英小文字（a, b, c, …）type="I"… ローマ数字大文字（I, II, III, …）type="i"… ローマ数字小文字（i, ii, iii, …）
実際のコード例は次のようになります。
<h3>英大文字の番号付きリスト</h3>
<ol type="A">
<li>プランA</li>
<li>プランB</li>
<li>プランC</li>
</ol>
<h3>ローマ数字の番号付きリスト</h3>
<ol type="I">
<li>序章</li>
<li>本編</li>
<li>終章</li>
</ol>このように、ドキュメントの構成やデザインに合わせて番号の形式を変えたい場合にtype属性が役立ちます。例えば、章立てにはローマ数字、細かい項目にはアラビア数字というように、階層ごとにスタイルを変えると視覚的にも分かりやすくなります。
start属性：番号の開始位置を変更する
start属性は、リストの番号を「何番から始めるか」を指定するための属性です。通常は1から始まりますが、途中から別の番号で始めたいときに使います。startには数値を指定し、その数値から番号付けが開始されます。
<h3>4から始まる番号付きリスト</h3>
<ol start="4">
<li>第4章 導入</li>
<li>第5章 実装</li>
<li>第6章 応用</li>
</ol>この例では、最初の項目が「4. 第4章 導入」として表示されます。章番号や問題番号など、前後の文脈と連続させたい場面でよく使われます。
例えば、ページをまたいだ問題集で、1ページ目が1〜10問、2ページ目が11問目から始まる場合、2ページ目のリストをstart="11"としておくと、HTML上で番号を自動管理しやすくなります。
<h3>問題 11 〜 15</h3>
<ol start="11">
<li>問題11の本文</li>
<li>問題12の本文</li>
<li>問題13の本文</li>
<li>問題14の本文</li>
<li>問題15の本文</li>
</ol>このように、start属性を使うと、HTML上で手動で番号を書き直す必要がなくなり、編集や追加にも強い構造を保つことができます。
reversed属性：番号のカウント方向を逆にする
reversed属性は、リストの番号を「逆順にカウントする」ための属性です。通常は1から順に増えていきますが、reversedを付けると「n, n-1, …, 1」というように減っていきます。特徴的なのは、reversed属性は値を取らない「真偽値属性（ブーリアン属性）」という点です。これは、属性名を書くだけで有効になり、reversed="reversed"のように書いても、reversedとだけ書いても意味は同じです。
<h3>残りステップ数を示す逆順リスト</h3>
<ol reversed>
<li>残り3ステップ</li>
<li>残り2ステップ</li>
<li>残り1ステップ</li>
</ol>この例では、ブラウザ側でリストの長さ（この場合は3つ）を判断し、最初の項目に3、次に2、最後に1という番号を自動で振ります。カウントダウン形式の説明や、「ランキングの下位から上位に向かって紹介する」ような演出にも利用できます。
reversedとstartを組み合わせることもできます。例えば、10からカウントダウンするリストを作りたいときは次のように書きます。
<h3>10からのカウントダウン</h3>
<ol start="10" reversed>
<li>準備</li>
<li>最終確認</li>
<li>スタート</li>
</ol>この場合、項目数は3つですが、番号は「10, 9, 8」と付きます。このように、startで開始番号を指定しつつ、reversedで逆順にしているイメージです。
属性を組み合わせて使うときのポイント
type、start、reversedは組み合わせて使うことができます。例えば、「ローマ数字で、かつ5から逆順に表示したい」といったことも可能です。
<h3>特典一覧（逆順ローマ数字）</h3>
<ol type="I" start="5" reversed>
<li>特典E</li>
<li>特典D</li>
<li>特典C</li>
<li>特典B</li>
<li>特典A</li>
</ol>ここでは、リストの最初の項目が「V. 特典E」、最後が「I. 特典A」のように表示されます。このように属性を組み合わせることで、番号付きリストの表現力が高まります。
ただし、装飾目的だけで属性を使いすぎると、HTMLの意味が分かりづらくなる場合もあります。本当に「意味としてこうなっているべきか」を考えた上で、使う場面を選ぶことが大切です。単に見た目を変えたいだけであれば、list-style-typeなどCSS側で制御する方法もあります。HTMLではあくまで「意味と構造」、CSSでは「見た目」を担当させる考え方を持っておくと、保守性の高いコードになりやすくなります。
CSSと組み合わせてolタグのデザインを調整する基礎
olタグは、そのままでもブラウザが標準的な番号付きリストとして表示してくれますが、CSS（スタイルシート）と組み合わせることで、見た目を大きくカスタマイズできます。CSSとは、「見た目のルール」を記述するための仕組みで、「文字色」「余白」「フォントサイズ」「配置」などを制御できます。HTMLが“骨組み”だとすると、CSSは“デザインや装飾”を担当するイメージです。ここでは、olタグに対してよく行う基本的なデザイン調整について、順番に解説します。
list-style-typeで番号のスタイルを変更する
番号付きリストの見た目を変える最も基本的なプロパティがlist-style-typeです。これは、リストのマーカー（番号や記号）の種類を指定するCSSプロパティです。olの場合、以下のような値を指定できます。
decimal… アラビア数字（1, 2, 3…）upper-alpha… 英大文字（A, B, C…）lower-alpha… 英小文字（a, b, c…）upper-roman… ローマ数字大文字（I, II, III…）lower-roman… ローマ数字小文字（i, ii, iii…）
例として、英大文字で番号を表示したい場合は次のように書きます。
<ol class="alpha-list">
<li>プランAの特徴</li>
<li>プランBの特徴</li>
<li>プランCの特徴</li>
</ol>.alpha-list {
list-style-type: upper-alpha;
}type属性でも似たことができますが、デザインをCSS側にまとめることで、HTMLをすっきり保ちやすくなります。複数のリストに同じデザインを適用したいときは、クラス名を共通にしてCSSでまとめて指定するのが基本的な考え方です。
余白（margin・padding）を調整してレイアウトを整える
olタグは、ブラウザの標準設定で左右に余白（インデント）が付いています。この余白は、CSSのmargin（外側の余白）とpadding（内側の余白）で調整できます。ページ全体のレイアウトに合わせて、リストの位置やインデントを調整したい場合に使用します。
例えば、「左の余白を少し詰めたい」という場合は次のように書きます。
ol {
margin-left: 1.5em;
}逆に、「余白をなくして文字を揃えたい」という場合はこう書けます。
ol {
margin-left: 0;
padding-left: 1.2em;
}margin-leftを0にして、padding-leftでマーカー用に少しだけ隙間を取ると、タイトルや本文と揃えつつ、番号だけが少し内側に入った見た目にできます。実際のデザインでは、全体のレイアウトとのバランスを見ながら値を調整していきます。
フォントサイズや行間で読みやすさを高める
手順や説明が長くなる場合、番号付きリストの行間（上下の間隔）やフォントサイズを調整すると読みやすさが向上します。CSSでは、font-sizeやline-heightを使って文字の大きさや行間を制御できます。
ol.step-list {
font-size: 16px;
line-height: 1.8;
}このように指定すると、.step-listクラスが付いたolだけ、少し大きめの文字とゆったりした行間になります。特に手順書やマニュアルのようなコンテンツでは、密集しすぎているよりも、読みやすさを優先した行間設定が重要です。
番号と本文を強調するスタイル
視覚的に「何番目か」を目立たせたい場合、li要素に対してフォントの太さや色を指定することもよくあります。例えば、番号付きリスト全体を少し強調する場合は次のようにします。
ol.important-steps > li {
font-weight: bold;
}font-weight: bold;は太字表示を意味します。また、本文の一部だけを強調したい場合は、<span>タグとクラスを組み合わせて利用します。
<ol class="important-steps">
<li><span class="label">必須</span> アカウント情報を入力します。</li>
<li><span class="label">重要</span> メール認証を完了させます。</li>
</ol>.important-steps .label {
font-weight: bold;
color: #c00;
margin-right: 0.5em;
}このようにすると、「必須」「重要」といったラベル部分だけ色付き・太字になり、視線を集めやすくなります。CSSでは、olそのものだけでなく、liの中に含まれる要素を組み合わせてデザインしていきます。
list-style-positionでマーカーの位置を調整する
番号やマーカーの位置を細かく調整したい場合には、list-style-positionプロパティを使います。このプロパティには主にoutsideとinsideという値があり、マーカーをテキストの外側に置くか、内側に置くかを指定します。
ol.inside {
list-style-position: inside;
}
ol.outside {
list-style-position: outside;
}insideにすると、マーカーも本文と同じ行の中に収まり、長文の折り返し位置が揃いやすくなります。一方、outsideは標準的な表示で、マーカーが本文の左側に独立して表示されます。デザインの好みやレイアウトに合わせて使い分けます。
枠線や背景色を使ったボックス風ステップ表示
番号付きリストを、そのまま「ステップ付きのボックス」として見せたい場合もあります。例えば、「申込の3ステップ」といったコンテンツを、カードのような見た目にするパターンです。
<ol class="step-box">
<li>プランを選択します。</li>
<li>お客様情報を入力します。</li>
<li>内容を確認して申し込みを完了します。</li>
</ol>.step-box {
padding: 1em;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}
.step-box > li {
margin-bottom: 0.5em;
}このようにすると、リスト全体が薄い枠と背景色で囲われ、手順としてのまとまりが強調されます。border-radiusは角丸、background-colorは背景色を指定するプロパティです。liごとに枠線を付けるアレンジも可能ですが、まずは「リスト全体を1つのボックスにする」というシンプルな形から試すと理解しやすくなります。
カウンター機能を使ったより高度な番号カスタマイズ（概要）
CSSには「カウンター」と呼ばれる機能があり、olの番号表示をより細かく制御できます。たとえば、step 1、step 2のように文字列を組み合わせた番号や、入れ子になった段落番号「1.1」「1.2」などを自前で作ることができます。
初心者の段階では細かい文法を覚える必要はありませんが、「HTML側ではシンプルなolとliを書いておき、特殊な番号の見せ方はCSSで工夫できる」というイメージを持っておくとよいです。まずはlist-style-type、margin、padding、font-size、line-heightあたりから慣れていき、徐々に複雑な表現にも挑戦していく流れがおすすめです。
初心者がつまずきやすいolタグのよくあるミスとその対処法
olタグは文法自体はシンプルですが、実際にコーディングをしてみると、初心者の方が同じようなポイントでつまずくことがよくあります。ここでは、授業や現場でよく見かけるミスと、その考え方・対処法を整理してご紹介します。ミスのパターンをあらかじめ知っておくことで、自分のコードをチェックしやすくなり、バグの原因に早く気づけるようになります。
ミス1：liタグを書き忘れて、テキストを直接olの中に書いてしまう
もっともよくあるミスが、「olの中にliを書かずに、いきなりテキストを書いてしまう」パターンです。
<!-- よくある間違いの例 -->
<ol>
1つ目の項目
2つ目の項目
3つ目の項目
</ol>このように書くと、ブラウザは「番号付きリスト」として正しく認識できず、期待どおりの表示になりません。HTMLでは「リストの項目」を必ずliタグで囲む必要があります。正しい書き方は次のようになります。
<ol>
<li>1つ目の項目</li>
<li>2つ目の項目</li>
<li>3つ目の項目</li>
</ol>対処法としては、「olの中身は必ずliの連続になる」というルールを意識することです。テキストだけで書いてあったら、「あ、liが抜けているかも」と気づけるようになります。
ミス2：liタグの閉じタグを省略してしまう
HTMLでは一部のタグは閉じタグを省略できる場合がありますが、初心者のうちは「常に開いたら閉じる」を徹底した方が安全です。特にliは、ブラウザがいい感じに補ってしまうため、ミスに気づきにくいタグの一つです。
<!-- 動くことは多いが、良くない例 -->
<ol>
<li>1つ目の項目
<li>2つ目の項目
<li>3つ目の項目
</ol>このように書いても、見た目は一見正しく表示されることがあります。しかし、HTMLの構造としては不完全で、後から別の要素を挟み込みたいときなどに予期せぬ表示崩れが起こりやすくなります。正しくは、必ず</li>で閉じます。
<ol>
<li>1つ目の項目</li>
<li>2つ目の項目</li>
<li>3つ目の項目</li>
</ol>対処法としては、エディタの自動補完機能を活用することがおすすめです。多くのエディタでは<li>と入力してEnterやTabを押すと、</li>まで自動で作ってくれますので、それを習慣にすると閉じ忘れを大幅に減らせます。
ミス3：olとulの使い分けを見た目だけで判断してしまう
「番号付きか、黒丸か」という“見た目”だけでolとulを選んでしまうのもよくあるミスです。例えば、本来は順番に意味がある手順なのに、「番号を消したいからulにした」「黒丸の方が好みだからulにした」というパターンです。
本来、olは「順序に意味があるリスト」、ulは「順序に意味がないリスト」を表すタグです。番号の見た目はCSSで非表示にしたり、別のスタイルに置き換えたりできますので、「意味はolだけど、見た目は番号を消したい」というケースも問題なく実現できます。
<ol class="no-marker">
<li>フォームに入力する</li>
<li>内容を確認する</li>
<li>送信する</li>
</ol>.no-marker {
list-style-type: none;
padding-left: 0;
}このように、意味としてolを使い、見た目だけCSSで調整するのが基本的な考え方です。対処法としては、「このリストは、順番が入れ替わったら意味が変わるか？」と自問するクセをつけると、olとulの選択を間違えにくくなります。
ミス4：入れ子リストでインデントや構造が崩れてしまう
手順の中にサブ手順やポイントを入れるとき、olやulを入れ子にしますが、そのときにインデントや閉じタグの位置がわからなくなり、構造が崩れてしまうこともよくあります。
<!-- 間違いやすい例 -->
<ol>
<li>インストールする
<ol>
<li>ファイルをダウンロードする
<li>ファイルを実行する
</ol>
<li>動作確認をする
</ol>このコードでは、内側のliの閉じタグが抜けていますし、外側のliの閉じる位置も曖昧になっています。正しくは次のように、階層ごとにきれいにインデントを揃えて書くと構造を把握しやすくなります。
<ol>
<li>インストールする
<ol>
<li>ファイルをダウンロードする</li>
<li>ファイルを実行する</li>
</ol>
</li>
<li>動作確認をする</li>
</ol>対処法としては、「タグのネストをインデントで視覚化する」「1行に詰め込みすぎない」という2点を意識するとよいです。タグを開いたら、その中身を1段下げて書くことで、どこからどこまでがセットになっているかを見やすくできます。
ミス5：改行や空行で表示が変わると誤解してしまう
初心者の方には、「HTMLのコード上の改行が、そのまま画面上の改行になる」と思ってしまうケースもよくあります。liの中で文章が長くなったときに、読みやすさのためにコード上で改行しても、ブラウザ上では1つの項目として扱われることが多いです。
<li>
とても長い説明文がここに入っていますが、
コード上で改行しても1つの項目として表示されます。
</li>対処法としては、「表示上の改行」をしたいときは<br>タグなどを使い、コード上の改行は“読みやすさのため”だと整理して考えることが大切です。リストの項目を増やしたいときは、改行ではなく新しいliを追加する必要があります。
ミス6：属性（type・start・reversed）の意味を知らずに混乱する
他の人のコードを読むときに、<ol type="A">や<ol start="5">、<ol reversed>のような記述を見て、「よくわからないけどコピーして使っている」という状態になることがあります。属性の意味を理解していないと、「なぜ番号が途中から始まるのか」「なぜ逆順になっているのか」が分からず、デバッグが難しくなります。
対処法としては、typeは「番号の形式」、startは「開始番号」、reversedは「逆順にする」という基本だけ押さえておくと十分です。自分が意図していないのにこれらの属性が付いていたら、一旦外してみて表示の変化を確認し、必要なものだけを残すようにすると、挙動を理解しやすくなります。
ミス7：スタイル調整をすべてHTML側でやろうとしてしまう
番号の見た目や余白を変えたいときに、HTML側の属性だけで何とかしようとするのも、初心者のうちにありがちなパターンです。typeやstartは確かに便利ですが、本来はCSSで制御すべき見た目までHTMLに持ち込んでしまうと、マークアップが複雑になり、後から変更しづらくなります。
対処法として、「意味や構造に関わる部分はHTML」「色・余白・フォントなどはCSS」と役割を分けて考える意識を持つことが大事です。olタグでは、順序やリストであることを表現し、それ以外の装飾はCSSに任せる設計を心がけると、コードが整理されていきます。
HTMLのolタグを正しく使いこなすための総まとめ
HTMLのolタグは、単なる「番号付きの見た目」を作るための道具ではなく、「順番に意味がある情報」を的確に伝えるための、とても重要な要素であることをご理解いただけたと思います。olは「ordered list（順序付きリスト）」の略であり、「1番目」「2番目」といった順序そのものが意味を持つ場面で使うタグです。これに対して、ulは「unordered list（順序なしリスト）」で、順番が入れ替わっても意味が変わらないときに使う、という役割の違いがありました。この考え方を押さえておくことで、リスト表現をするときに迷いにくくなります。
基本構文としては、<ol>の中に<li>を並べて書く、というシンプルな形でした。liは「list item（リストの項目）」を意味し、olの中身は原則としてliの連続になるというルールがありました。番号はHTMLに直接書くのではなく、ブラウザが自動で付けてくれるため、途中で項目を追加・削除しても番号が自動調整される点も、実務でのメンテナンス性を高めるポイントでした。また、インデントを揃えて書くことで、入れ子構造やliの範囲が視覚的に分かりやすくなることも確認しました。
活用場面としては、会員登録やログイン、インストール手順、問い合わせの流れ、学習ステップなど、「この順番で進めてください」という意味を持つコンテンツと相性が良いことを学びました。チュートリアルやマニュアルでは、「ステップ1」「ステップ2」のように、ユーザーが現在位置と次の行動を把握しやすくなる形でolを使うことができます。また、olとulを入れ子にして、「大きな流れ」と「その中のチェック項目」を分けるような表現も、情報の整理に役立つパターンでした。
olタグには、番号の表示方法を調整するための属性として、type・start・reversedが用意されていました。typeではアラビア数字・アルファベット・ローマ数字など形式の変更ができ、startでは「何番から始めるか」を指定できました。reversedを使うと、リストを逆順にカウントでき、カウントダウン表示や下位から上位へ紹介するランキングなどに活用できます。これらを組み合わせることで、章番号や問題番号、特典一覧など、より柔軟な番号付き表現が可能になることも確認しました。
見た目の調整については、CSSと組み合わせることが重要でした。list-style-typeで番号のスタイルを変えたり、margin・paddingでインデントや余白を整えたり、font-sizeやline-heightで読みやすさを調整したりと、olはCSSとの連携でデザインの幅が広がります。また、枠線や背景色をつけてボックス風にしたり、ラベル用のspanを使って一部のテキストだけを強調したりすることで、単なる箇条書きを「ステップナビゲーション」や「手順ボックス」のように見せることもできました。意味はHTML、見た目はCSSという役割分担を意識することで、保守しやすいコードを書く習慣につながります。
一方で、初心者がつまずきやすいポイントとして、liタグの書き忘れ・閉じタグの省略・olとulの使い分けを見た目だけで判断する、といったミスがありました。これらは、「olの中は必ずli」「タグは開いたら閉じる」「順番が入れ替わると意味が変わるかどうかでタグを選ぶ」といった基本ルールを意識することで、防ぎやすくなります。入れ子リストでは、インデントを丁寧につけることで構造が崩れにくくなり、属性の意味を理解しておくことで、意図しない番号表示にも落ち着いて対処できるようになります。
総合すると、olタグを正しく使いこなすための鍵は、「順序に意味がある情報を、構造として素直にマークアップする」という発想です。そのうえで、番号のスタイルや見た目の細かな調整はCSSや属性を駆使して行う、という考え方を持っておくと良いです。これらを意識して実際に手を動かしながらコードを書いていくことで、olタグは単なる番号付きリストではなく、「ユーザーにとって理解しやすい手順や流れを表現するための強力な道具」として、自然に使いこなせるようになっていきます。