HTMLでWebページを作成するとき、「箇条書きのリスト」を表現したい場面はとても多いです。メニューの一覧、特徴の箇条書き、注意事項、問い合わせ先の一覧など、文章を読みやすく整理するためにリストは欠かせない要素です。そのような「順番のない箇条書きリスト」を表すために使われるタグが、ulタグです。ulは “unordered list（順序なしリスト）” の略で、先頭に黒い点（・）や丸いマークが付いたリストをイメージしていただくと分かりやすいと思います。
ulタグとは？HTMLの箇条書きリストの基本
まず、HTMLとは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webページの骨組みや意味付けを行うための言語です。「マークアップ」とは、文章のどの部分が見出しなのか、どの部分がリストなのか、といった情報をタグと呼ばれる印を使って指定することを指します。ulタグもこの「タグ」の一種で、「ここからここまでが箇条書きのまとまりですよ」とブラウザに伝える役割を持ちます。
ulタグは、それ単体ではなく、通常はliタグと組み合わせて使います。liは “list item（リストの項目）” を表すタグで、1つ1つの箇条書きの行を意味します。ulタグが「リスト全体の箱」、liタグが「箱の中に入る1つ1つの要素」とイメージしていただくと理解しやすくなります。たとえば、3つの項目を箇条書きにしたい場合、ulタグの中にliタグを3つ並べて記述します。
実際のコード例は次のようになります。
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>このように書くと、ブラウザ上では「りんご」「バナナ」「オレンジ」が、それぞれ行の先頭に黒い点が付いた箇条書きとして表示されます。この黒い点のような記号は「マーカー」や「ビュレット」と呼ばれ、ulタグの標準的な見た目の一部です。見た目は後からCSSというデザイン用の言語で変更できますが、まずは「意味として箇条書きであること」をHTMLで正しくマークアップすることが大切です。
ここで重要なポイントは、「ulタグはあくまで“順番のない”リストを表す」という点です。「1番目、2番目」のように順序が意味を持つ場合には、ulタグではなくolタグという別のタグを使います。たとえば、レシピの手順や、ランキングのように順番に意味がある場合はolタグ、商品の特徴の列挙や、メニューの一覧のように順番が特に重要でない場合はulタグが適しています。このように、リストの性質に応じてタグを使い分けることで、ブラウザだけでなく検索エンジンや支援技術（画面読み上げソフトなど）にも正しく意味が伝わるようになります。
ulタグは、テキストを読みやすく整理するだけでなく、「情報のグループ化」にも役立ちます。複数の関連する項目をひとまとまりとして囲むことで、「これは同じカテゴリの情報です」という意図がはっきりします。たとえば、プロフィールページで「趣味」を箇条書きにしたり、FAQページで「質問の一覧」を表示したりする場合などです。ulタグを使うことで、視覚的にも論理的にも整理された情報を提供できるようになります。
さらに、ulタグはWebデザインの現場で非常によく使われるタグの1つです。見た目としては単なる箇条書きですが、CSSと組み合わせることで、ヘッダーのナビゲーションメニュー、サイドバーのリンクリスト、フッターのサイトマップなど、さまざまなレイアウトの基礎として利用されます。つまり、ulタグを使いこなせるようになることは、単に文章を箇条書きにできるだけでなく、「構造化されたHTMLを書ける」という大きな一歩になります。
また、ulタグは入れ子（ネスト）して使うこともできます。入れ子とは、あるタグの中に同じ種類、または別のタグを入れて階層構造を作ることです。ulタグの中に別のulタグを入れることで、「親項目」と「子項目」を持つリストを表現でき、階層的なメニューや複雑なリスト構造を表すことが可能になります。このような入れ子構造は、少しだけ難しく感じるかもしれませんが、考え方は「グループの中にさらに小さなグループを作る」というイメージです。
初心者の方が最初に意識してほしいのは、ulタグを使うときに、見た目だけを目的にしないことです。単に「先頭に点を付けたいからulを使う」というよりも、「この情報は順序を持たない箇条書きのグループだからulを使う」と考えることで、意味のあるHTMLを書く習慣が身につきます。意味が正しく表現されたHTMLは、後からデザインを変更するときにも扱いやすく、また別の人がコードを読んだときにも理解しやすくなります。
ulタグとliタグの関係と基本構造
HTMLにおいてリストを正しく表現するためには、ulタグとliタグの関係を理解することが重要です。ulタグは「unordered list（順序なしリスト）」という意味を持ち、リスト全体を包み込む“親要素”の役割を果たします。一方で、liタグは「list item（リスト項目）」を意味し、リストの中に含まれる一つひとつの項目を表す“子要素”として機能します。この親子関係はHTMLの構造を理解するうえで非常に大切で、リストをつくる際には必ずulタグの中にliタグを配置する必要があります。
実際の構造をイメージしやすくするために、まずシンプルな例を考えてみます。例えば、買い物リストを箇条書きで表現したい場合、次のように記述します。
<ul>
<li>牛乳</li>
<li>卵</li>
<li>小麦粉</li>
</ul>このコードでは、ulタグがリスト全体の枠組みを作り、liタグがそれぞれの項目を示しています。ブラウザはこの構造を読み取り、「これは順序を持たない箇条書きのリストである」ことを理解し、視覚的には項目ごとに黒い点（ビュレット）を付けて表示します。このように、ulとliはセットで使用することで、意味的にも視覚的にも正しい箇条書きを表現できます。
ここで大切なのは、liタグは単独で使うことができないという点です。liタグは必ずul、ol、またはmenuタグなどのリスト系タグの内部に置かなければなりません。これは、liタグがリスト構造の一部として意味付けされているためで、HTMLの文法としても正しくありません。もしliタグのみを単独で使用した場合、ブラウザによっては表示されるものの、構造として不正であるため後々のレイアウト調整やアクセシビリティに影響が出る可能性があります。
また、ulタグの中には必ず複数のliタグを並べなければならないわけではなく、1つのliタグだけを配置することも可能です。しかし、一般的には項目が複数ある前提で使用されるため、複数の要素をリスト化する場面で活用されることが多いです。ulタグ自体には「順序がない」という意味が含まれており、あくまで項目同士が同列で、順位や優先度がないことを表現します。
さらに、ulタグの内部に記述する要素は、基本的にliタグのみであることが望ましいです。HTMLの仕様上、ulタグの子要素として直接テキストを記述することは正しくありません。必ずliタグを使い、「リストの項目はすべてliタグで囲む」というルールを守ることで、文書構造が明確になります。これは検索エンジンやスクリーンリーダーなどの支援技術に対しても有効で、ユーザーに分かりやすい情報提供が可能となります。
また、ulタグとliタグの構造は、CSSと組み合わせてさまざまなデザインを実現するうえでも重要です。例えば、liタグに余白やボーダーを設定したり、ulタグ全体に外部余白を設定したりすることで、見た目を整えることができます。構造が正しく記述されていないと、CSSによるデザイン調整が難しくなってしまうため、HTMLの段階でしっかりとした基本構造を作っておく必要があります。
さらに応用的な使い方としては、ulとliタグをネスト（入れ子）にすることで階層的なリストを表現したり、ナビゲーションメニューとして利用したりする方法があります。特にWebサイトのヘッダーやサイドバーに配置されるナビゲーションは、ほとんどがulタグを基盤として構築されています。その際にも、親子関係となる構造が明確であることが求められます。
最後に、ulタグとliタグの関係を理解することで、HTML文書の構造をより意識しながらコーディングできるようになります。単に表示のためだけにリストを作るのではなく、「意味として適切であるかどうか」を考えてタグを選択することで、より質の高いマークアップが可能になります。それは読みやすく、管理しやすいWebサイトを作るうえでとても大切な考え方です。
ulタグを使ったシンプルな箇条書きの作り方
ここでは、実際にulタグを使って、もっとも基本的な「シンプルな箇条書きリスト」を作る手順を整理してご説明します。難しいテクニックは使わず、「まずはこれができれば十分」というレベルの内容に絞りますので、HTML初心者の方でも安心して読み進めていただけます。
まず前提として、HTMLファイルは「文書全体の骨組み」となる基本構造を持っています。代表的なものが、<!DOCTYPE html>、<html>、<head>、<body>といったタグです。これらは、ブラウザに対して「これはHTML5というバージョンのHTML文書ですよ」「ここからがページの中身ですよ」といった情報を伝える役割を持っています。箇条書きを作るulタグは、このうちページ本体の内容を記述する<body>タグの中に書くのが一般的です。
シンプルな箇条書きを作るまでの流れを、順番に整理すると次のようになります。
- HTMLファイルを用意する
bodyタグの中にulタグを書くulタグの中にliタグで項目を並べる- ブラウザで表示を確認する
まず1つ目のステップとして、テキストエディタで新しいファイルを作成し、拡張子を.htmlにして保存します。テキストエディタとは、文字だけを扱うシンプルなソフトのことで、メモ帳のようなものです。このファイルの中に、次のような基本構造を書きます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ulタグの練習</title>
</head>
<body>
</body>
</html>ここまでで、最小限のHTMLの骨組みができました。次に、<body>タグの中にulタグを追加します。ulタグは「これから順序のない箇条書きが始まります」という宣言のようなものです。
<body>
<ul>
</ul>
</body>まだこの状態では、リストの中身がないため画面には何も表示されません。そこで、ulタグの中にliタグを使って項目を追加していきます。liタグは「list item（リストの項目）」という意味で、それぞれの箇条書きの行を表します。
<body>
<ul>
<li>HTMLの勉強をする</li>
<li>CSSの基礎を理解する</li>
<li>JavaScriptにチャレンジする</li>
</ul>
</body>ここまで書けたらファイルを保存し、ブラウザ（ChromeやEdgeなど）で開いてみます。すると、「HTMLの勉強をする」「CSSの基礎を理解する」「JavaScriptにチャレンジする」という3つの文章が、先頭に黒い点が付いた箇条書きとして表示されるはずです。この黒い点はビュレット（箇条書き記号）と呼ばれ、ulタグの標準の表示スタイルです。
シンプルな箇条書きを作る際のポイントとして、以下の点を意識していただくとよいです。
ulタグの中にはliタグだけを書く- 各
liタグは1つの項目を完結させる - 半角の山かっこ
<>を正しく閉じる - タグの入れ子（開始タグと終了タグの順番）を崩さない
特に、タグの入れ子構造は初心者の方がつまずきやすいポイントです。<ul>タグを開いたら、その中で<li>タグを開き、必ず</li>で閉じてから、最後に</ul>でリスト全体を閉じます。開始タグと終了タグの対応関係を意識してコーディングすると、エラーを減らすことができます。
また、読みやすいコードを書くために「インデント」を付ける習慣も大切です。インデントとは、タグの内側に入る行を1段下げて（スペースやタブで）揃えることです。先ほどの例でも、<ul>の内側にある<li>が右に1段下がっていました。このようにインデントを揃えることで、どのタグがどのタグの中に入っているかが一目で分かるようになります。プログラミング全般に通じる良い習慣ですので、ulタグを練習する段階から意識しておくことをおすすめします。
さらに、シンプルな箇条書きであっても、テキストの内容を意識するとより実践的な練習になります。例えば、学習計画、買い物リスト、作業手順、自己紹介の項目（好きなこと、得意なことなど）といった、身近なテーマを箇条書きにしてみるとよいです。ただのサンプルではなく、自分に関係のある内容でリストを作ることで、HTMLの記述がより身近に感じられるようになります。
このように、ulタグとliタグだけでも、シンプルで分かりやすい箇条書きリストを作ることができます。まずは基本の形をしっかり身につけ、その上で徐々にデザインの調整や階層構造など、応用的な表現に挑戦していくと良い流れになります。
ulタグとolタグ・dlタグの違い
HTMLでリストを表現するときによく登場するタグに、ul、ol、dlの3種類があります。どれも「複数の情報をまとめる」という点では共通していますが、それぞれが表している意味や向いている使い方が異なります。この違いを理解しておくと、「とりあえず何でもul」ではなく、内容にふさわしいタグを選べるようになり、意味のあるマークアップができるようになります。
まず、ulタグは「unordered list（順序なしリスト）」の略で、順番に意味がない箇条書きのリストを表します。商品の特徴、チェック項目、注意点の一覧、メニューの一覧など、「どの項目が先でも意味が変わらない」情報に適しています。中身はliタグで1つずつの項目を表現します。
<ul>
<li>送料無料</li>
<li>24時間サポート</li>
<li>30日間返金保証</li>
</ul>ここでは3つの特徴の順番が入れ替わっても意味はあまり変わりません。このような場合にulが向いています。
次に、olタグは「ordered list（順序付きリスト）」の略で、「1番目、2番目」のように順番に意味があるリストを表します。レシピの手順、操作手順、ランキング、優先順位の高い順など、「上から順に意味がある」情報を表すときに使います。こちらも中身はliタグで項目を表現しますが、ブラウザは標準で数字付きのリストとして表示します。
<ol>
<li>オーブンを180度に予熱する</li>
<li>材料をボウルに入れて混ぜる</li>
<li>型に流し込み20分焼く</li>
</ol>この例では、手順の順番が入れ替わると意味が大きく変わってしまいます。そのため、順序の意味を正しく伝えるためにolタグを使うことが重要です。また、olタグにはstart属性やtype属性を指定することで、番号の開始値や表示形式（1, 2, 3 や a, b, c など）を変えることもできます。こうした属性は「タグに付ける追加情報」であり、細かな見た目や動作を調整するために使われます。
そして、dlタグは「description list（説明リスト）」の略で、「用語とその説明の組み合わせ」を表すためのタグです。dlタグの中でdtタグとddタグをセットで使います。dtは「description term（説明される用語）」、ddは「description definition（用語の説明や定義）」を表します。用語集、Q&Aの一覧、プロフィールの項目と値の組み合わせなどに向いています。
<dl>
<dt>HTML</dt>
<dd>Webページの構造や意味を記述するためのマークアップ言語です。</dd>
<dt>CSS</dt>
<dd>HTMLで作られた構造にデザイン（色やレイアウト）を指定するスタイルシート言語です。</dd>
</dl>このように、dlでは「言葉」と「その説明」がペアになっていることが前提です。単なる箇条書きではなく、「ラベルと内容」のような関係を表現するのに適しています。
3つのタグの違いを整理すると、次のようになります。
ul：順番に意味のない並列の項目の集まりol：順番に意味のある手順やランキングdl：用語と説明、項目名と値のセット
どのタグも「複数の情報をまとめる」という役割は共通ですが、「その情報同士の関係性」が異なる点が重要です。Webページを利用するユーザーや検索エンジン、支援技術（スクリーンリーダーなど）は、この構造情報を手がかりに内容の意味を解釈しています。そのため、意味に合ったリストの種類を選ぶことで、アクセシビリティやSEOの観点からもより良いマークアップになります。
実際の現場では、「全部ulで書いてしまう」ケースも少なくありませんが、たとえばFAQのように「質問」と「答え」の組み合わせが並ぶ場合にはdlを使う選択肢があります。また、「人気記事ランキング」や「申し込み手順」のように順番が重要な場合にはolを使うことで、「これは順序付きの情報ですよ」という意図を明確に伝えることができます。
さらに、CSSを使って見た目を自由に変更できることも意識しておくとよいです。たとえば、olで数字が付いていても、CSSで番号を非表示にしたり、カスタムのアイコンに変更したりすることが可能です。見た目だけを理由にulとolを選ぶのではなく、「意味として順番が必要かどうか」を基準にすることが大切です。dlも同様で、用語集風のデザイン、2カラムのレイアウトなどにアレンジできますが、あくまで「用語と説明のペア」であることが前提になります。
このように、ul、ol、dlそれぞれの役割と違いを理解しておくと、HTMLでリストを作成するときの判断がしやすくなります。リストを作る場面が来たら、「これは順番が必要な情報か」「これは用語と説明のセットか」を一度考え、タグを選ぶ習慣をつけると、より意味の通ったHTMLを書くことができるようになります。
ナビゲーションメニューをulタグでマークアップする方法
Webサイトの「ナビゲーションメニュー」は、ユーザーがページの中を移動するときの道しるべのような役割を持っています。画面の上部にある「ホーム」「サービス」「料金」「お問い合わせ」といったリンクの並びをイメージしていただくと分かりやすいです。このナビゲーションメニューをHTMLでマークアップするときによく使われるのが、ulタグとliタグ、そしてaタグの組み合わせです。ここでは、その基本的な書き方と考え方を整理してご説明します。
まず、ナビゲーションメニューは「複数のリンクが並んだリスト」です。並んでいる各項目は同じレベルの選択肢であり、特に順番に意味がないことが多いため、「順序なしリスト」を表すulタグが適しています。ulタグの中にliタグでメニューの項目を作り、その中にaタグ（リンクを表すタグ）を書いて構成します。
基本的な例は次のようになります。
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">このサイトについて</a></li>
<li><a href="service.html">サービス</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>ここで、aタグにはhref属性が付いています。href属性は「どのURLに移動するか」を指定するためのもので、href="index.html"であれば同じサイト内のindex.htmlというファイルに移動することを意味します。このように、ulがリスト全体、liが1つのメニュー項目、aが実際にクリックできるリンクという役割をそれぞれ持っています。
さらに、最近のHTMLでは、このナビゲーション部分全体を<nav>タグで囲む書き方が推奨されます。navタグは「ナビゲーション領域であること」をブラウザや支援技術（画面読み上げソフトなど）に伝えるためのタグです。これにより、ページのどこがメインの移動用メニューなのかが機械にも理解しやすくなります。
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">このサイトについて</a></li>
<li><a href="service.html">サービス</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>このような構造にしておくと、スクリーンリーダーと呼ばれる読み上げソフトは「ここはナビゲーションです」と認識し、ユーザーがすばやくメニューに移動する手助けができます。これがアクセシビリティと呼ばれる考え方で、より多くの人にとって使いやすいWebサイトを作るための重要なポイントです。
ナビゲーションメニューをulタグでマークアップするメリットは、意味的な正しさだけではありません。CSSを使ってデザインを変更しやすくなるという利点もあります。例えば、デフォルトでは縦方向の箇条書きとして表示されますが、CSSでli要素を横並びにしたり、ビュレットを消してボタン風に見せたりすることができます。HTML側でリスト構造をきちんと作っておけば、見た目の変更はCSS側に集中させることができ、コードの管理もしやすくなります。
ナビゲーション用のulを書いているときには、次のような点を意識すると良いです。
- 各
liの中には原則として1つのaタグだけを置き、項目をシンプルに保つ - メニュー名は短く、分かりやすい言葉を使う
- ファイル名やパスは後から変更する可能性もあるため、意味のある名前を付ける
navタグでナビゲーション全体を囲んでおく
また、現在表示しているページを強調したい場合、「今どのページを見ているのか」をユーザーに伝えるために、該当するliやaにクラス名（後からCSSでスタイルを当てるためのラベル）を付けることがあります。クラス名はclass属性で指定し、CSS側で「このクラスのときだけ色を変える」などの設定を行います。
<nav>
<ul>
<li class="current"><a href="index.html">ホーム</a></li>
<li><a href="about.html">このサイトについて</a></li>
<li><a href="service.html">サービス</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>この例では、class="current"が付いた項目が「現在のページ」を表しているイメージです。CSS側で.current a { font-weight: bold; }のような指定をすると、そのページのメニューだけ太字にすることができます。このように、ulタグとliタグで構造を作り、クラス名で意味を補足しておくと、デザインの自由度が高まり、ユーザーにとっても分かりやすいナビゲーションを実現しやすくなります。
ulタグとCSSを組み合わせたデザイン例
ulタグは、HTMLの段階では「順序のない箇条書き」という意味だけを持っていますが、CSSと組み合わせることで、見た目を大きく変化させることができます。CSSとは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、HTMLで作られた構造に対して色・余白・フォント・配置などのデザインを指定するための言語です。ここでは、ulタグを使ったリストにCSSで装飾を加える、いくつかの代表的なパターンをご紹介します。
まず、もっともよく行われるのが「ビュレット（先頭の点）を消す」というカスタマイズです。ナビゲーションメニューやボタン風のリストを作りたいとき、標準の黒い点が邪魔になることがあります。その場合は、list-style-typeというプロパティを使います。プロパティとは、「どのような見た目にするか」をCSSで指定する項目のことです。
<ul class="no-marker">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>.no-marker {
list-style-type: none;
}このようにクラス名（ここではno-marker）を使うことで、特定のulだけにスタイルを適用できます。list-style-type: none;と指定すると、先頭の点が非表示になり、すっきりとした見た目になります。
次に重要なのが、ulやliに設定される余白の調整です。ブラウザは標準でulに対して左右の余白（padding）や上下の余白（margin）を付けています。そのままだと、デザインによっては「思ったより右に寄っている」「上に余白が空きすぎている」と感じることがあります。このときは、marginやpaddingを明示的に指定します。
.no-marker {
list-style-type: none;
margin: 0;
padding: 0;
}margin: 0;は外側の余白を0に、padding: 0;は内側の余白を0にする指定です。これにより、ulが不要なスペースを持たない、フラットな状態になります。このあと、必要な場所にだけ余白を付けていくと、意図したとおりのレイアウトを作りやすくなります。
次に、li要素を横並びにするパターンです。ナビゲーションメニューなどでよく使われます。標準ではliは縦に積み重なる「ブロック要素」として扱われますが、CSSのdisplayプロパティをinline-blockやflexを使って変更することで横一列に並べることができます。ここでは、分かりやすいinline-blockの例を示します。
.nav-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-list li {
display: inline-block;
margin-right: 16px;
}<ul class="nav-list">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">料金</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>display: inline-block;と指定すると、li要素が横方向に並び、かつ幅や高さ、余白などの指定も行いやすくなります。margin-rightで右側にスペースを空けることで、メニュー項目同士が詰まりすぎないように調整しています。
さらに、ul全体に背景色や枠線を付けることで、ボックスとしてのまとまりを視覚的に示すこともできます。
.feature-list {
list-style-type: disc;
background-color: #f5f5f5;
padding: 16px 24px;
border-radius: 4px;
}<ul class="feature-list">
<li>初心者向けの分かりやすい説明</li>
<li>実践的なサンプルコード</li>
<li>質問しやすい学習環境</li>
</ul>background-colorで背景色を、paddingで内側の余白を、border-radiusで角の丸みを指定しています。このように、ulをひとつのカードのように見せることで、リストをコンテンツのブロックとして強調することができます。
ビュレットの種類を変えることも可能です。list-style-typeにはdisc（黒丸）、circle（白抜きの丸）、square（四角）などの値を設定できます。
.circle-list {
list-style-type: circle;
}
.square-list {
list-style-type: square;
}用途やデザインに応じて、ulごとにビュレットのスタイルを変えることができます。たとえば、「注意事項は四角」「補足情報は丸」といった形で視覚的な区別をつけると、ユーザーにとっても意味が分かりやすくなります。
さらに一歩進んだ例として、カスタムアイコンをビュレットの代わりに表示する方法があります。list-style-typeではなく、background-imageや疑似要素（::beforeなど）を使って、好きなアイコンを先頭に表示するパターンです。ここでは考え方だけを示します。
.icon-list {
list-style-type: none;
padding: 0;
}
.icon-list li {
padding-left: 24px;
position: relative;
}
.icon-list li::before {
content: "★";
position: absolute;
left: 0;
top: 0;
}このように、::beforeという疑似要素で文字や記号を挿入し、それを先頭のマーカーのように見せることができます。疑似要素とは、「実際のHTMLには書かれていないが、見た目として追加したい要素」をCSS側で擬似的に作る機能です。アイコンフォントや画像を使えば、より自由度の高いデザインが可能になります。
ulタグとCSSを組み合わせる際に共通して大事なのは、「HTML側では意味と構造を表現し、CSS側で見た目をコントロールする」という役割分担です。ulはあくまで「箇条書きのまとまり」としてマークアップし、その後のバリエーションはCSSで表現していく流れを意識すると、拡張性の高いコードになります。
ネストされたulタグで階層構造を表現する方法
ulタグは、単なる1段の箇条書きだけでなく、「階層構造（かいそうこうぞう）」を表現するためにもよく使われます。階層構造とは、親子関係を持った入れ物のようなもので、「大きな項目の中に、より細かい項目が含まれている」状態を指します。これをHTMLで表すときに重要になるのが、ulタグのネストです。ネストとは「入れ子にする」「中に入れる」という意味で、あるulタグの中に、さらに別のulタグを置く書き方のことを指します。
まず、シンプルな例として「メニュー」と「その中に含まれる小メニュー」というイメージを考えます。たとえば、「言語」という項目の下に、「HTML」「CSS」「JavaScript」という小項目がぶら下がっているようなリストです。これをulとliのネストで表現すると、次のようになります。
<ul>
<li>プログラミング言語
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>デザインツール</li>
<li>開発環境</li>
</ul>このコードでは、外側のulが「大項目」のリストを表し、その中の1つのli（プログラミング言語）の中に、さらにulが入っています。この内側のulが「小項目」のリストです。ブラウザで表示すると、「プログラミング言語」という行の下に、少し右にずれた形で「HTML」「CSS」「JavaScript」が箇条書きになります。右にずれることによって、視覚的にも階層関係が分かりやすくなります。
ここで大事なポイントは、ネストされたulは「必ずliの中に書く」というルールです。つまり、次のような構造は避ける必要があります。
<!-- 良くない例 -->
<ul>
<li>プログラミング言語</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</ul>この書き方だと、外側のulの直下にliとulが同じ階層で並んでしまい、文法的に不正な構造になります。正しくは、liタグの中に内側のulを入れ子にする形にする必要があります。構造を言葉で表すと、「親のリストの1項目の中に、子のリストがある」というイメージです。
インデント（字下げ）もネストしたulを書くときには重要です。インデントとは、ネストの階層ごとに行の先頭位置をそろえてずらして書くことです。先ほどの例でも、外側のulより内側のulを1段下げ、その中のliもさらに1段下げていました。インデントをきちんと付けると、どのulがどのliの中に入っているのかが一目で分かり、コードの読みやすさが大きく向上します。
ネストされたulは、サイトのサイドバーに表示する「カテゴリとサブカテゴリ」の表現にもよく使われます。たとえば、次のような構造です。
<ul>
<li>入門コース
<ul>
<li>HTML基礎</li>
<li>CSS基礎</li>
<li>Webの仕組み</li>
</ul>
</li>
<li>応用コース
<ul>
<li>JavaScript基礎</li>
<li>フロントエンド入門</li>
</ul>
</li>
<li>その他</li>
</ul>このように書くことで、「入門コース」に属する詳細な講座と、「応用コース」に属する講座を、それぞれの配下にまとめて表現できます。視覚的な見た目だけでなく、HTMLとしての構造的な意味も明確になります。
ネストが深くなるほど、構造の把握が難しくなるため、「どこからどこまでが1つのliなのか」「内側のulはどの項目に属しているのか」を意識しながらコーディングすることが大切です。特に</li>や</ul>の閉じ忘れはよくあるミスですので、エディタの自動補完機能や構文チェック機能を活用すると作業が楽になります。
また、ネストされたulは、CSSを使うことでさらに分かりやすい階層表示にすることができます。たとえば、内側のulにだけ余白や線を付けたり、フォントサイズを少し小さくしたりすることで、階層ごとの違いを強調できます。
.nested-list ul {
list-style-type: disc;
}
.nested-list ul ul {
list-style-type: circle;
margin-left: 20px;
font-size: 0.95em;
}<ul class="nested-list">
<li>フロントエンド
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>バックエンド</li>
</ul>このように、CSSでul ulという指定をすると、「親ulの中にある子ul」だけにスタイルを当てることができます。list-style-typeを変えることで、親子で異なる種類のマーカーを使い分けることもできます。
アクセシビリティの観点からも、ネストされたulは「階層構造を持つ情報」を表す手段として有効です。スクリーンリーダーは、入れ子になったリストを読み上げる際に階層を意識した読み方をしてくれるため、視覚以外の方法でも構造が伝わりやすくなります。これは、単に見た目だけでインデントを付けた段落を並べるのとは大きく異なる点です。HTMLでしっかりとネストされたulを使うことで、構造化された情報提供が可能になります。
ネストの深さについては、あまりに多くの階層を作りすぎると、ユーザーにとっても開発者にとっても分かりにくくなります。一般的には2〜3階層程度に抑え、必要であれば別ページに分けるなどの工夫を行うと、コードの保守性も上がります。ネストを行うときは「この階層分けは本当に必要か」「ユーザーにとって理解しやすいか」という視点で整理していくと、より扱いやすいHTMLになります。
まとめ
この記事では、HTMLのulタグを中心に、箇条書きリストの基本から応用的な使い方まで、段階的に学んでいただきました。あらためて全体を振り返ることで、頭の中の知識を整理し、今後の学習や実践に活かしやすくしていきたいと思います。
まず最初にお伝えしたのは、ulタグの役割でした。ulは「unordered list（順序なしリスト）」の略で、「順番に意味のない箇条書き」を表すためのタグでした。ここで大切だったのは、「先頭に黒い点が付く見た目」だけが本質ではなく、「関連する項目をひとまとめにする」「その項目同士に順位はない」という“意味”をHTML上で表現することでした。HTMLは見た目だけではなく、文書構造や意味を機械にも人間にも伝えるための言語である、という視点が基礎としてありました。
次に、ulタグとliタグの関係や基本構造について学びました。ulがリスト全体の“親”となる箱であり、liがその中に含まれる1つひとつの“子”の項目であるという考え方です。liタグは単独で使うものではなく、必ずulやolといったリスト系のタグの中に配置する必要がありました。これにより、「これはリストで、その中の1つの項目です」という情報をブラウザや支援技術に正しく伝えることができます。開始タグと終了タグの対応、インデントによる見やすいコードの書き方も、構造を理解するうえで重要なポイントでした。
さらに、「シンプルな箇条書きの作り方」として、<!DOCTYPE html>から始まる基本的なHTML文書の骨組みの中に、<body>タグ内でulとliを使う実例も確認しました。学習計画や買い物リストなど身近な題材を箇条書きにすることで、実際に手を動かしながら理解を深めるイメージを持っていただけたかと思います。小さな成功体験を積み重ねることで、「HTMLを書くこと」に慣れていくことがとても大切です。
また、ulタグだけでなく、olタグやdlタグとの違いも整理しました。ulは「順序なしリスト」、olは「順序付きリスト」、dlは「用語と説明のセットを表現する説明リスト」という役割を持っていました。どれも複数の情報をまとめるタグですが、「順番に意味があるか」「用語とその説明のようなペアの関係か」といった観点で使い分けることが重要でした。意味に合わせてタグを選ぶ習慣を身につけると、アクセシビリティや検索エンジンへの伝わり方もよくなり、より質の高いマークアップへとつながります。
さらに一歩進んだ内容として、ナビゲーションメニューをulでマークアップする方法も確認しました。navタグでナビゲーション全体を囲み、その中でul・li・aタグを組み合わせることで、「複数のリンクからなるメニュー」を意味と構造の両面から正しく表現できました。現在のページを示すクラス名を付けて強調する工夫など、実際のWebサイト制作に直結する考え方も紹介しました。
デザイン面では、CSSと組み合わせることでulの見た目を自由にカスタマイズできることも学びました。ビュレット（先頭の点）を消すlist-style-type: none;、marginやpaddingによる余白の調整、display: inline-block;などでliを横並びにしてナビゲーション風のレイアウトを作る方法、背景色や枠線、角丸をつけてカード風に見せる方法など、HTMLとCSSの役割分担を意識しながら、さまざまな表現が可能であることをご説明しました。見た目の変更はCSS側で行い、HTMLは「意味と構造」に集中させるという考え方が、今後のフロントエンド学習でも重要になっていきます。
最後に、ネストされたulで階層構造を表現する方法も取り上げました。親リストのliの中に、子リストのulを入れ子にすることで、「大項目」と「小項目」の関係を表現できることを確認しました。カテゴリとサブカテゴリ、コースと各レッスンなど、現実の情報も階層構造で整理されていることが多く、それをHTMLで表現するのにネストされたulはとても役立ちます。インデントやタグの閉じ忘れに注意しながら、分かりやすいコードを書くことの大切さもあわせてお伝えしました。
ここまでの内容を通して、「ulタグはただの箇条書き用タグではなく、情報を整理し、構造化し、デザインの基盤にもなる重要な要素である」というイメージを持っていただけたならうれしいです。今後、実際にWebページを作成する際には、「この情報は箇条書きにできるか」「順序は必要か」「階層構造にしたほうが分かりやすいか」といった視点でulやol、dlを使い分けてみてください。少しずつ経験を重ねていくことで、自然と「読みやすく、意味の通ったHTML」を書けるようになっていきます。