HTMLのolタグの使い方を完全ガイド！初心者でもわかる番号付きリストの基本
生徒
「HTMLで手順書みたいに番号が付いた一覧を作りたいんですが、どう書けばいいんですか？」
先生
「その場合はolタグを使います。番号付きリストを表すためのHTMLタグです。」
生徒
「数字は自分で書くんですか？それとも自動で付くんですか？」
先生
「数字はブラウザが自動で付けてくれます。だから順番が変わっても安心ですよ。」
1. HTMLのolタグとは？
olタグは、HTMLで番号付きのリストを作るためのタグです。olは「順序付きリスト」という意味を持ち、手順や流れ、ランキングなど、順番に意味がある内容を書くときに使います。文章の前に一、二、三と番号が並ぶことで、読む人が内容の流れを理解しやすくなります。紙の説明書に書かれている作業手順を、そのままWebページに再現するようなイメージです。
2. olタグとliタグの基本的な関係
olタグは、単体では使いません。必ずliタグとセットで使います。liタグは「リストの項目」を表すタグで、olタグの中に複数書くことで、番号付きの一覧が完成します。olは箱、liは中身と考えると分かりやすいです。箱の中に項目を順番に並べることで、自然に番号が付いて表示されます。
<ol>
<li>パソコンの電源を入れる</li>
<li>ブラウザを起動する</li>
<li>Webサイトを開く</li>
</ol>
このように書くだけで、数字は自動的に一番から順に表示されます。数字を自分で入力する必要はありません。
3. なぜ番号付きリストを使うのか
番号付きリストを使う最大の理由は、順番の意味を正しく伝えるためです。例えば料理の作り方や、申し込み手順などは、順番を間違えると理解しにくくなります。olタグを使うことで、見た目だけでなく、HTMLとしても「これは順序が大切な情報です」と伝えることができます。検索エンジンや読み上げソフトにも意味が伝わりやすくなるため、SEOやアクセシビリティの面でも重要です。
4. start属性で番号の開始位置を変える
olタグには、番号の開始位置を指定できる機能があります。これを使うと、途中から番号を始めたい場合に便利です。例えば続きの説明を書きたいとき、同じ番号を手で調整する必要がありません。startという属性を使うことで、簡単に設定できます。
<ol start="3">
<li>設定を確認する</li>
<li>保存ボタンを押す</li>
</ol>
この場合、表示される番号は三から始まります。長い説明を分けて書くときに役立ちます。
5. type属性で番号の見た目を変える
olタグでは、番号の種類を変更することもできます。数字以外に、アルファベットやローマ数字で表示することが可能です。これはtype属性を使って指定します。見た目を変えるだけでなく、資料の雰囲気を整えたいときにも使われます。
<ol type="A">
<li>基本情報の入力</li>
<li>内容の確認</li>
<li>送信完了</li>
</ol>
アルファベットで表示されることで、少し違った印象のリストになります。
6. olタグの中に別のリストを書く
番号付きリストの中に、さらに詳しい項目を書きたい場合もあります。そのときは、liタグの中に別のolやulを書くことができます。これを入れ子構造と呼びます。親と子の関係のように、情報を整理できるため、長い説明でも読みやすくなります。
<ol>
<li>準備するもの
<ol>
<li>パソコン</li>
<li>インターネット環境</li>
</ol>
</li>
<li>作業を開始する</li>
</ol>
このように階層を作ることで、情報のまとまりが一目で分かります。
7. olタグを使うときの注意点
olタグは、順番に意味がある場合にのみ使うことが大切です。単なる箇条書きであれば、番号が不要な場合も多く、そのときはulタグを使います。また、見た目だけを理由にolタグを選ぶと、内容の意味が伝わりにくくなることがあります。HTMLは見た目だけでなく、情報の意味を表すものだと意識することが重要です。
8. 初心者がつまずきやすいポイント
初心者がよく間違える点として、liタグを書かずに直接文章を書いてしまうことがあります。olタグの中には、必ずliタグが必要です。また、番号を自分で書いてしまうと、後から順番を変更したときに修正が大変になります。olタグに任せて、自動で番号を付けてもらうのが正しい使い方です。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
