HTMLの学習を始めると、まず登場するのが「タグ」という考え方です。タグとは、ブラウザに「ここからここまでが見出しです」「ここは段落です」「ここはリストです」といった意味を伝えるための印のようなものです。<html> や <head>、<body> などもタグの一種ですが、その中でも「箇条書きの1項目」を表すタグが <li>タグ です。
HTMLのliタグとは何かを理解する基本知識
li は “list item（リストアイテム）” の略で、「リストの中の1つの項目」という意味を持ちます。たとえば、買い物メモをWebページ上に表示したいとき、「りんご」「みかん」「牛乳」といった1つ1つの項目を表現するのに、<li>タグを使います。実際のコードは次のようになります。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>牛乳</li>
</ul>この例では、<li>りんご</li> が「りんご」という1つの項目（リストアイテム）を表しています。同じように、2行目と3行目もそれぞれ別のリスト項目です。このように、<li>タグは「中に書かれたテキストや要素を、リストの1つの要素として扱う」ためのタグです。
<li>タグを使うときに重要なのは、「必ずリストを表すタグの中に書く」という点です。一般的には、<ul>タグ（順番なしリスト：丸ポチ付きの箇条書き）か、<ol>タグ（番号付きリスト：1,2,3…のような順序付き箇条書き）のどちらかの中で使用します。<li>タグだけを単独でページに書いても、HTMLのルールとして正しくない書き方になります。
もう少し具体的に整理すると、<li>タグには次のような特徴があります。
- リストの項目を表すためだけに使うタグ であること
<ul>または<ol>の中で使うことが前提 であること- 中にはテキストだけでなく、画像タグやリンクタグ（
<a>タグ）など、他のHTML要素も入れられること - ブラウザは
<li>タグを認識すると、自動的に適切な余白やマーカー（丸ポチや数字）を表示してくれること
また、<li>タグはシンプルな箇条書きだけでなく、Webサイトのメニュー（ナビゲーション）などでもよく利用されます。たとえば、画面上部に横並びのメニューがあるサイトでは、見た目はボタン風でも、実際のHTML構造は <ul> と <li> の組み合わせでできていることが多いです。これは、リスト構造を使うことで「複数のリンクが並んでいるまとまり」であることをブラウザや検索エンジンに伝えやすくなるためです。
初心者のうちは、<li>タグは「箇条書きの1行を作るタグ」というイメージからスタートすると理解しやすくなります。そのうえで、<li>が単独ではなく、必ずリスト全体を表す<ul>または<ol>とセットで使う、という構造的なルールを意識して書いていくと、HTMLの「文書構造」を自然と身につけることができます。
ulタグ・olタグとliタグの関係性を正しく把握する
HTMLで箇条書きを作るときには、主に3つのタグが関わってきます。それが <ul>タグ・<ol>タグ・<li>タグ です。これらはそれぞれ役割が分かれていて、「リスト全体」と「リストの1項目」をきちんと区別して表現するために存在します。この関係性を理解しておくと、文書構造がきれいになり、CSSでのデザイン変更もしやすくなります。
まず、<ul>タグは 「順番のないリスト（unordered list）」 を表すタグです。unordered とは「順序がない」という意味で、項目同士に「1番・2番」といった意味上の順位がないときに使います。ブラウザでは通常、小さな丸いマーカー（黒い点）を先頭につけて表示されます。買い物リストやチェックリストのように、並び順が重要ではないものに向いているタグです。
一方、<ol>タグは 「順番のあるリスト（ordered list）」 を表すタグです。ordered は「順序づけられた」という意味で、ステップや手順、ランキングのように、「1番目」「2番目」という並びに意味がある場合に使用します。ブラウザではデフォルトで、「1. 2. 3.」のような番号付きで表示されます。<ol>タグには type という属性を付けて、数字ではなくアルファベットやローマ数字で表示させることもできますが、初心者のうちは「番号付きのリストを表すタグ」と覚えておくと十分です。
そして、<li>タグは リストの中の1つ1つの項目（list item）を表すタグ です。ここが重要なポイントですが、<li>タグ単体では「どのリストに属しているのか」が分からないため、必ず <ul> か <ol> の中に書く必要があります。HTMLの文法上も、「<li> は原則として ul または ol の子要素でなければならない」というルールがあります。
実際のコード例を見ると関係性が分かりやすくなります。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>この例では、<ul>が「果物の一覧」というリスト全体を表し、その中に3つの<li>が入っています。それぞれが1つずつの項目で、ブラウザはこの構造を見て「箇条書きのリスト」と判断します。<li>の数を増やせば項目が増え、減らせば項目が減る仕組みです。
同じように、手順を表現したい場合には <ol> と <li> を組み合わせます。
<ol>
<li>鍋に水を入れる</li>
<li>火にかけて沸騰させる</li>
<li>具材を入れて煮込む</li>
</ol>このコードでは、<ol>が「調理手順のリスト全体」を表し、その中の<li>が「手順1・手順2・手順3」として番号付きで表示されます。同じ<li>タグでも、親要素が<ul>か<ol>かによって、見た目や意味が変わることが分かります。
ここで意識したいのが、意味的な違い（セマンティクス） です。セマンティクスとは「タグが持つ意味や役割」のことで、見た目だけでなく、「その情報が文書の中でどんな意味を持つのか」をタグで表現する考え方です。順番が重要でないときは<ul>、順番が重要なときは<ol>を選ぶと、ブラウザや検索エンジン、スクリーンリーダー（音声読み上げソフト）などが文書の意図を正しく理解しやすくなります。
また、<ul>や<ol>は、入れ子にして使うことも可能です。例えば、ある項目の中にさらに細かいリストを入れたい場合、<li>の中に別の<ul>や<ol>を書くことがあります。このときも、リスト全体を表すのは<ul>または<ol>、個々の要素を表すのは<li>という関係性は変わりません。
HTMLを書き始めたばかりの方によくある間違いとして、<li>を<p>タグ（段落）と同じように単独で使ってしまうパターンがあります。この書き方は文法違反であり、ブラウザが自動補正することもありますが、意図しない表示やCSSの崩れにつながる原因になります。必ず「リスト全体（<ul>か<ol>） → その中の項目（<li>）」という階層構造を意識して記述することが大切です。
このように、<ul>・<ol>・<li>は、それぞれがバラバラに存在するのではなく、「リスト全体」と「リストの各要素」を分担して表現するためにセットで使われるタグです。役割の違いと親子関係をイメージしながらコードを書くことで、HTMLの構造理解が深まり、後から修正や装飾を行うときにも迷いにくくなります。
liタグを使ったシンプルなリスト作成方法
liタグを実際に使いこなすためには、まず「最も基本的なリストの作り方」をしっかり押さえておくことが大切です。ここでは、初心者の方がすぐに真似できる、シンプルなリストの作成手順を具体的なコード例とともに解説します。専門用語は簡単な説明を添えながら進めますので、テキストエディタとブラウザがあれば、そのまま試すことができます。
シンプルなul（順番なし）リストの作成手順
最初に覚えていただきたいのは、順番なしリスト（unordered list） です。これは、項目同士に優先順位や順番の意味がなく、単に並べて表示したいときに使うリストです。代表的な例としては、買い物リストや持ち物リストなどがあります。
基本のコードは次のようになります。
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>ぶどう</li>
</ul>このコードの構造を整理すると、次のようになります。
<ul>… リスト全体を囲むタグ<li>りんご</li>… 1つ目の項目（リストアイテム）<li>バナナ</li>… 2つ目の項目<li>ぶどう</li>… 3つ目の項目
ブラウザで表示すると、それぞれの行の先頭に黒い丸（●のようなマーカー）が付き、縦方向に並んだ箇条書きとして表示されます。<li>タグの中身（今回であれば「りんご」など）を変更することで、自由に項目名を変えることができます。
ここでのポイントは、<ul>タグの中にだけ<li>タグを書き、行頭・行末のインデント（字下げ）を揃える ことです。インデント自体は見た目に直接影響しませんが、コードの見通しが良くなり、後から修正しやすくなります。
シンプルなol（順番あり）リストの作成手順
次に、順番ありリスト（ordered list） を見ていきます。これは、手順書やランキングなど、「1番、2番、3番」といった順序に意味があるときに使うリストです。<ul>の代わりに <ol> を使う点だけが異なり、<li>タグの書き方は同じです。
<ol>
<li>HTMLファイルを作成する</li>
<li>ブラウザで開く</li>
<li>表示を確認する</li>
</ol>このコードをブラウザで表示すると、「1.」「2.」「3.」という番号が自動的に付与されます。番号はあくまで表示のためであり、<li>タグ自体には数字は書いていません。ブラウザが<ol>を読み取って、自動的に連番を振ってくれる仕組みです。
順番ありリストでは、手順の入れ替えを行うときに、<li>タグの並び順を変更するだけで済みます。たとえば2番目と3番目の手順を入れ替える場合、HTMLコードの行を入れ替えれば、ブラウザ側で番号を振り直してくれます。手で「2 → 3」に書き換える必要がないため、ミスが減り、メンテナンス性も高くなります。
コードを実際に書いてブラウザで確認する流れ
シンプルなリスト作成に慣れるためには、次のような手順で「書く → 保存する → 開く」を繰り返すことが有効です。
- テキストエディタを開く
- 最低限のHTML構造とリストのコードを書く
- ファイル名を
index.htmlなどで保存する - ブラウザでそのファイルを開く
たとえば、次のようなサンプルコードを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストの練習</title>
</head>
<body>
<h1>今日のやることリスト</h1>
<ul>
<li>メールを確認する</li>
<li>資料を作成する</li>
<li>コードの復習をする</li>
</ul>
</body>
</html>この例では、<h1>タグでページのタイトル（大見出し）を表示し、その下に<ul>と<li>を使ったシンプルなリストを配置しています。<!DOCTYPE html> から始まる部分は、HTML文書全体の基本的な枠組みであり、ブラウザに対して「これはHTML5の文書です」と宣言するものです。初心者のうちは、ひな形としてそのまま使っていただいて問題ありません。
よくあるつまずきポイントと確認方法
シンプルなリスト作成でよくあるつまずきポイントとして、次のようなものがあります。
<ul>や<ol>を閉じ忘れている（</ul>や</ol>を書いていない）<li>の閉じタグ</li>を書き忘れている<li>を<ul>や<ol>の外に書いてしまう- タグのスペルミス（
<lu>、<oi>など）をしている
エラーがあってもブラウザがある程度自動修正して表示してくれる場合がありますが、その場合は思ったとおりの結果にならなかったり、CSSでデザインを付ける際に意図しない動きをしたりします。タグの開きと閉じがセットになっているかどうか、階層構造が正しいかどうかを、こまめに確認しながら書き進めると安定した表示になります。
liタグを使ったシンプルなリスト作成では、「リスト全体を囲むタグ（<ul>か<ol>）と、その中で繰り返される<li>」というパターンを頭に定着させること が重要です。サンプルコードを実際にエディタへ入力し、ブラウザで表示してみることで、このパターンを視覚的に理解できるようになります。
liタグとCSSを組み合わせたデザインカスタマイズ
liタグは、ただの「箇条書きの1行」としてだけでなく、CSS（スタイルシート） と組み合わせることで、見た目を大きく変えたり、ナビゲーションメニューのようなパーツとして活用できたりします。CSSとは、「HTMLで作った骨組みに、色・余白・線・並び方などの見た目のルールを指定する仕組み」のことです。ここでは、liタグをCSSで装飾する基本的なパターンをいくつか紹介しながら、どのようにデザインを調整していくのかを解説します。
箇条書きのマーカー（点や数字）を消す・変える
<ul>や<ol>を使ったリストは、デフォルトでは先頭にマーカーが表示されます。<ul>なら黒い点、<ol>なら数字が付きますが、デザインによっては「点を消したい」「別のスタイルにしたい」という場面がよくあります。このときに使うのが、list-style-type というCSSプロパティです。プロパティとは、CSSで「何を」「どうするか」を指定するための項目名のようなものです。
<ul class="no-marker">
<li>ホーム</li>
<li>サービス</li>
<li>お問い合わせ</li>
</ul>.no-marker {
list-style-type: none; /* マーカーを非表示にする */
padding-left: 0; /* 左の余白をなくす */
}ここでは、class="no-marker" としてクラス名を付けた<ul>に対して、マーカーを非表示にし、ブラウザが自動で付ける左の余白もゼロにしています。list-style-typeには disc（黒丸）、circle（白丸）、square（四角）なども指定できますので、点の形を変えたい場合にも利用できます。
liタグ同士の余白を調整して読みやすくする
liタグで作ったリストは、項目同士の間隔が狭いと読みにくくなります。そこで使うのが margin（外側の余白）と padding（内側の余白）というプロパティです。
<ul class="spaced-list">
<li>HTMLの基礎を学ぶ</li>
<li>CSSで見た目を整える</li>
<li>JavaScriptで動きをつける</li>
</ul>.spaced-list li {
margin-bottom: 8px; /* 各項目の下に余白をつける */
padding: 4px 8px; /* 項目内の上下左右に余白をつける */
}このように、ulではなく ul li に対してスタイルを指定することで、各項目の間隔を整えられます。margin-bottomは項目と項目の間の距離を広げ、paddingは文字と枠の間の空間を増やすイメージです。行間を広げるような感覚で調整すると、リスト全体が見やすくなります。
liタグを横並びにしてメニュー風にする
リストは通常、縦に並んで表示されますが、CSSを使うことで横並びのメニューとして表示することもできます。ここでは、displayというプロパティを使います。displayは「この要素をどのような表示形式で並べるか」を指定するもので、inline-block や flex といった値がよく使われます。
<ul class="nav-list">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>.nav-list {
list-style-type: none;
padding-left: 0;
}
.nav-list li {
display: inline-block; /* 横並びにする */
margin-right: 16px; /* 右側に余白をつけて間隔を空ける */
}ここでは、liに display: inline-block; を指定することで、通常は縦に並ぶ要素を横に並べています。inline-blockは、「横に並ぶけれど、幅や高さ、余白も設定できる」という性質を持っている表示形式です。margin-rightで右側にスペースを作ることで、メニュー同士がくっつきすぎないように調整できます。
ホバー時のデザイン変更でインタラクティブにする
Webサイトでは、マウスカーソルを乗せたとき（ホバーしたとき）に色が変わるメニューをよく見かけます。これは、擬似クラス と呼ばれる仕組みを使って実現できます。擬似クラス :hover は、「ユーザーがマウスオーバーしている状態」を表す特殊な指定です。
.nav-list li a {
text-decoration: none; /* リンクの下線を消す */
padding: 4px 8px;
}
.nav-list li a:hover {
background-color: #eee; /* ホバー時に背景色を変更 */
}このように書くと、リスト内のリンクにマウスを乗せたときだけ背景色が変わり、ボタンのようなインタラクティブな印象になります。CSSで色や背景、枠線などを自由に組み合わせることで、liタグを使ったリストが単なるテキストの並びではなく、操作しやすいUIパーツとして機能するようになります。
nth-childで特定のliだけを装飾する
リストの中で「1つ目だけ太字にしたい」「偶数番目だけ背景色を変えたい」といった場合には、nth-child という擬似クラスを使います。これは、「何番目の要素か」を指定することで、特定のliだけにスタイルを当てられる機能です。
.spaced-list li:nth-child(1) {
font-weight: bold; /* 1つ目の項目だけ太字 */
}
.spaced-list li:nth-child(even) {
background-color: #f9f9f9; /* 2,4,6…偶数番目の背景色を変更 */
}このように、CSS側で「どの項目か」を判別して装飾できるため、HTMLのliを増減してもスタイルのパターンを維持しやすくなります。
liタグに直接クラスを付けて細かくカスタマイズする
さらに細かくデザインを分けたい場合は、liタグごとにクラス名を付けてスタイルを分岐させることも可能です。
<ul class="status-list">
<li class="done">完了：仕様書の作成</li>
<li class="progress">進行中：デザインの調整</li>
<li class="todo">未着手：テストケース作成</li>
</ul>.status-list {
list-style-type: none;
padding-left: 0;
}
.status-list li.done {
color: #666;
text-decoration: line-through; /* 打ち消し線で完了を表現 */
}
.status-list li.progress {
font-weight: bold;
}
.status-list li.todo {
color: #c00;
}このように、liタグとCSSを組み合わせることで、単なる箇条書きを「意味の違いを見た目で伝えられるリスト」に変える ことができます。状態ごとに色やスタイルを変えれば、ユーザーにとって現在の状況が直感的に理解しやすくなります。
liタグを使った階層リスト（入れ子構造）の作り方
liタグは単に1段の箇条書きだけでなく、階層構造（入れ子構造） を表現することができます。階層構造とは、「大きな項目の中に小さな項目が含まれている」ような構造のことです。フォルダとファイルの関係や、章・節・項のようなアウトラインをイメージしていただくと分かりやすいと思います。HTMLでは、liタグの中にさらに<ul>や<ol>を入れることで、この階層を表現します。
liタグの中にul・olを入れる基本形
階層リストの基本構造は、「親の<li>の中に、子どものリスト（<ul>または<ol>）を入れる」形になります。まずはカテゴリとサブカテゴリを持つシンプルな例です。
<ul>
<li>フロントエンド
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>バックエンド
<ul>
<li>データベース</li>
<li>API設計</li>
</ul>
</li>
</ul>ここでのポイントは次のとおりです。
- 「フロントエンド」「バックエンド」という親項目も
<li>タグで囲まれていること - その
<li>タグの中に、さらに<ul>が書かれていること - 子の
<ul>の中に、再び<li>で小さな項目（HTML, CSSなど）が並んでいること
このように、liタグの内側に別のリストを入れることで、ブラウザは自動的にインデント（字下げ）を行い、階層構造として表示してくれます。
インデントと改行で構造を見やすくする書き方
コードを書くときは、人間が見て構造を理解しやすくするために、インデント（先頭のスペースやタブ）を揃える ことが重要です。先ほどの例も、インデントがそろっているからこそ、「ここが親」「ここが子」といった関係が分かりやすくなっています。
たとえば、次のようにすべてを左端から書いてしまうと、文法的には動いても、構造の把握が非常に難しくなります。
<ul>
<li>フロントエンド<ul>
<li>HTML</li><li>CSS</li><li>JavaScript</li>
</ul></li>
<li>バックエンド<ul>
<li>データベース</li><li>API設計</li>
</ul></li>
</ul>ブラウザはそれなりに表示してくれますが、人が読んだときにどこからどこまでが1つのブロックなのか分かりにくくなります。階層リストを扱うときほど、インデントのルールを自分なりに決めておくと管理が楽になります。
ulとolを組み合わせた階層リスト
階層構造では、<ul>と<ol>を混在させても問題ありません。たとえば、「大きな流れは番号付き（手順）だけれど、その中の細かい項目は順不同」といった場面で役立ちます。
<ol>
<li>環境準備
<ul>
<li>エディタをインストールする</li>
<li>ブラウザを準備する</li>
</ul>
</li>
<li>HTMLの基本を学ぶ
<ul>
<li>タグと要素の概念</li>
<li>よく使うタグの確認</li>
</ul>
</li>
<li>CSSの基本を学ぶ</li>
</ol>外側は<ol>で手順を表し、内側の細かい項目は<ul>で順番無しのリストとして表現しています。このように、「外側の意味」「内側の意味」を意識してタグを選ぶと、文書全体の構造がよりわかりやすくなります。
階層が深くなるときの注意点
階層リストは必要に応じてさらに深くすることもできますが、階層が深くなりすぎるとユーザーにとって分かりづらくなる場合があります。コードも右に右にずれていくため、メンテナンスが難しくなりやすいです。
<ul>
<li>Web開発
<ul>
<li>フロントエンド
<ul>
<li>マークアップ
<ul>
<li>HTMLの文書構造</li>
<li>アクセシビリティ</li>
</ul>
</li>
<li>スタイリング</li>
</ul>
</li>
</ul>
</li>
</ul>この程度でもそれなりに読めますが、実務では3〜4階層を超えるような構造は、別の表現（テーブルや見出し構造、別ページの分割など）を検討することが多くなります。入れ子構造はとても便利ですが、「どこまで階層化するか」を設計段階で意識することが大切です。
CSSで階層ごとの見た目を変える基本
階層リストは、CSSと組み合わせることで、階層ごとにマーカーや余白を変える といったカスタマイズが可能です。たとえば、「第1階層は丸、第2階層は四角」といった表現ができます。
ul.level-1 {
list-style-type: disc; /* 黒丸 */
}
ul.level-1 ul {
list-style-type: square; /* 四角いマーカー */
}
ul.level-1 ul ul {
list-style-type: circle; /* 白丸 */
}<ul class="level-1">
<li>項目A
<ul>
<li>項目A-1
<ul>
<li>項目A-1-1</li>
</ul>
</li>
</ul>
</li>
</ul>このように、「親リストの内側にあるul」「さらにその内側のul」というように書き分けることで、階層に応じてマーカーのスタイルを変えられます。視覚的にも階層が分かりやすくなり、ユーザーが文書構造を理解しやすくなります。
階層リストをアウトライン設計の道具として考える
階層リストの考え方は、サイト構造の設計や、記事の見出し構成を考えるときにも役立ちます。まずは紙やメモアプリに「大きな見出し」「中くらいの見出し」「小さなトピック」というように階層的に書き出し、それをそのまま<ul>と<li>で表現すると、ページ全体の骨組みが整理されます。
HTMLのliタグと入れ子構造を使いこなせるようになると、単なる箇条書きを超えて、「情報のまとまり」と「その中の細かな要素」をきれいに整理して表現できるようになります。階層リストは見た目だけでなく、情報設計のツールとしても非常に重要な機能を持つパーツです。
ナビゲーションメニューにおけるliタグの実用例
liタグは、単なる箇条書きだけでなく、Webサイトのナビゲーションメニューを作るときにもとてもよく利用されます。ナビゲーションメニューとは、ページ上部やサイドバーなどに配置されている「ホーム」「サービス」「お問い合わせ」などのリンクのまとまりのことです。ユーザーがサイト内を移動するための道しるべとなる部分で、HTMLの構造としては「リンクのリスト」と考えられるため、<ul>・<li>・<a>タグの組み合わせがよく使われます。
基本的なナビゲーションメニューのHTML構造
まず、最もシンプルなナビゲーションメニューの例を見てみます。
<nav>
<ul class="global-nav">
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/service">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>ここでのポイントは次のとおりです。
<nav>タグは、「ここがナビゲーションの領域です」という意味を表すタグです。<ul>が「メニュー全体（リンクの一覧）」を表しています。- それぞれの
<li>が、「メニューの1項目」を表しています。 <li>の中には<a>タグ（リンク）が入っており、実際にクリックできるボタンの役割を持っています。
このように、ナビゲーションメニューは「リンクのリスト」という性質があるため、<li>タグでそれぞれの項目を表現するのが自然です。
CSSで横並びのメニューにする
デフォルトの表示では、<ul>と<li>を使ったメニューは縦方向に並びます。しかし、サイトの上部に横並びのメニューを置きたいことがほとんどです。その場合、CSSでliタグの表示形式を変更します。
.global-nav {
list-style-type: none;
padding-left: 0;
}
.global-nav li {
display: inline-block;
margin-right: 20px;
}
.global-nav a {
text-decoration: none;
padding: 8px 12px;
}このスタイルでは、display: inline-block; によって liが横方向に並ぶようになります。margin-rightでメニュー同士の間隔を空けることで、クリックしやすい見た目になります。aタグに対して余白（padding）を加えることで、ボタンのような感覚で操作しやすくなります。
現在表示中のページを強調する
ナビゲーションメニューでは、ユーザーに「今どのページを見ているのか」を伝えるために、現在のページのメニュー項目だけスタイルを変える ことがあります。その場合、liやaに特定のクラス名を付けてCSSで装飾します。
<ul class="global-nav">
<li class="current"><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/service">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>.global-nav li.current a {
font-weight: bold;
border-bottom: 2px solid #333;
}この例では、「ホーム」の項目のliに current クラスを付け、その中のaタグの文字を太字にし、下線代わりにボーダーを追加しています。このように、liに状態を表すクラスを付けることで、どの項目が「現在地」なのかを視覚的に示すことができます。
ドロップダウンメニューへの応用
liタグを使うと、階層構造を持ったドロップダウンメニューも表現しやすくなります。上位のメニュー項目の中に、さらに子メニューを入れ子で配置します。
<ul class="global-nav">
<li><a href="/">ホーム</a></li>
<li class="has-sub">
<a href="/service">サービス</a>
<ul class="sub-nav">
<li><a href="/service/web">Web制作</a></li>
<li><a href="/service/system">システム開発</a></li>
</ul>
</li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>このように、liの中にもう一つ<ul>を入れることで、「サービス」という項目に関連する子メニューを束ねることができます。CSSやJavaScriptを組み合わせることで、マウスを乗せたときに子メニューを表示するような動きをつけることができます。
ナビゲーションにliタグを使うメリット
ナビゲーションメニューでliタグを使うことには、いくつかのメリットがあります。
- メニューの項目が「リスト」として明確に構造化される
- CSSで
liごとに余白やボーダーを設定しやすい - 階層構造をそのままHTMLで表現しやすい
- JavaScriptで
li単位の操作（クリックイベント、開閉処理など）が行いやすい
リスト構造を使うことで、「メニューの各項目が同じレベルの要素である」ことがHTMLの段階で表現され、後からスタイルや振る舞いを自由に追加していくことができます。
スマホ表示も見据えたliの扱い
スマートフォンでの表示（レスポンシブデザイン）を考えるときも、liタグを使ったナビゲーションは扱いやすいです。PCでは横並びにし、画面幅が狭い場合は縦並びに戻す、という切り替えをCSSで行うことができます。liそれぞれが1つのメニュー項目として独立しているため、幅や配置の変更がしやすい構造になります。
このように、ナビゲーションメニューにおけるliタグの利用は、見た目の制御だけでなく、構造の明確化や保守性の向上にもつながる重要な実用例となります。
アクセシビリティを意識したliタグの記述ポイント
Webページを作るときには、見た目だけでなく アクセシビリティ を意識することが重要です。アクセシビリティとは、「できるだけ多くの人が、年齢や障がいの有無、利用している機器に関わらず、情報にアクセスしやすくすること」という考え方です。liタグは単なる箇条書きの部品ですが、正しく使うことでスクリーンリーダー（画面を音声で読み上げるソフト）などにとって理解しやすい構造になり、結果的にアクセシビリティの向上につながります。
正しいリスト構造で情報のまとまりを伝える
アクセシビリティの観点では、リストとして意味のある情報は必ず<ul>・<ol>と<li>でマークアップする ことが大切です。見た目だけをリスト風にするために、<br>で改行を重ねたり、単なる段落タグ<p>を並べたりすると、スクリーンリーダーはそれを「リスト」と認識できません。
<!-- 良い例：リスト構造が分かる -->
<ul>
<li>氏名</li>
<li>メールアドレス</li>
<li>お問い合わせ内容</li>
</ul>
<!-- 良くない例：単なる改行の羅列 -->
<p>氏名<br>メールアドレス<br>お問い合わせ内容</p>良い例では、スクリーンリーダーが「3項目のリストです」と案内し、1つずつの項目をリストとして読み上げます。これにより、ユーザーは「これは関連のある項目のまとまりだ」と理解しやすくなります。
意味のある順番かどうかでulとolを使い分ける
アクセシビリティを考えるときには、並び順に意味があるかどうか も重要なポイントです。手順やプロセスなど、順番が変わると意味が変わってしまう場合は<ol>（番号付きリスト）を使います。順番が入れ替わっても問題ない場合は<ul>（順番なしリスト）を使います。
<!-- 手順なのでolを使用 -->
<ol>
<li>フォームに必要項目を入力する</li>
<li>内容を確認する</li>
<li>送信ボタンをクリックする</li>
</ol>スクリーンリーダーは、<ol>を使った場合「1番目」「2番目」といった情報を読み上げることがあり、ユーザーにとって手順の流れをつかみやすくなります。このように、意味に合ったタグ選びがアクセシビリティの向上につながります。
リンクテキストは「ここをクリック」ではなく内容が分かる表現にする
ナビゲーションメニューやリスト内でリンクを設置するとき、liタグと合わせて<a>タグを使いますが、リンクの文言（リンクテキスト） もアクセシビリティに大きく関係します。「詳しくはこちら」「ここをクリック」といった表現は、音声で聞いても何を示しているのか分かりにくくなってしまいます。
<!-- 良くない例 -->
<ul>
<li><a href="/service">詳しくはこちら</a></li>
<li><a href="/price">詳しくはこちら</a></li>
</ul>
<!-- 良い例 -->
<ul>
<li><a href="/service">サービスの内容を見る</a></li>
<li><a href="/price">料金プランを確認する</a></li>
</ul>良い例のように、「そのリンク先で何が分かるのか」を具体的に書くことで、スクリーンリーダーのユーザーでも、リンク一覧から目的の場所を探しやすくなります。liタグはリンクの集合をまとめる役割を持つため、その中の<a>タグのテキストも含めて設計する意識が大切です。
リストを装飾しても構造は崩さない
CSSを使ってliタグのデザインをカスタマイズする際、見た目を整えることに集中しすぎて、構造を崩してしまうケースがあります。たとえば、リストマーカーを消してボタン風にする、グリッドやフレックスレイアウトでカード状に並べるといったことは問題ありませんが、「見た目を表組みのようにしたいから」といって本来リストであるものをテーブル（<table>タグ）に変えてしまうと、情報の意味が変わってしまいます。
アクセシビリティの観点では、見た目が変わってもHTMLの意味的な構造は維持する ことが重要です。liタグで表せる箇条書きやメニューは、CSSでどんな装飾をしてもliのままにしておくと、スクリーンリーダーや検索エンジンが正しい構造を把握しやすくなります。
liタグを使ったナビゲーションとキーボード操作
キーボード操作のみでサイトを利用しているユーザーにとっても、リスト構造は有効です。liタグを使ったナビゲーションメニューで、<a>タグに正しくフォーカス（カーソルが当たること）が移動するようになっていれば、タブキーで順番にリンクをたどることができます。
CSSでoutline（フォーカス時の枠線）を消してしまうと、今どのリンクにフォーカスがあるのかが見えなくなってしまうことがあります。アクセシビリティを考える場合、フォーカスの見た目を変更することは構いませんが、完全に見えなくするのは避けることが望ましいです。li自体というよりは、その中のリンクの扱いですが、リストナビゲーション全体の設計として意識しておく必要があります。
ARIA属性と役割の補足
より高度なアクセシビリティ対応として、ARIA属性 を使って役割や状態を補足することがあります。ARIAとは、Accessible Rich Internet Applications の略で、「支援技術に対して追加の情報を伝えるための属性」のことです。たとえば、タブ型のメニューやツリー状のナビゲーションなど、見た目・動きが複雑なUIを作るときに使われます。
基本的なリストであれば、<ul>・<ol>・<li>だけで十分に意味が伝わるため、必ずしもARIA属性を追加する必要はありません。しかし、JavaScriptで開閉するメニューなどを作る場合には、「現在開いているかどうか」などの状態を属性で補足することがあります。その際も、liタグを本来の位置づけのまま使い、過剰に別の役割を持たせないようにすることが大切です。
見出し構造とのバランスを考えたliタグの使用
アクセシビリティの高いページを作るうえでは、liタグだけでなく、<h1>〜<h6>といった見出しタグとのバランスも重要です。見出しはページ全体のアウトラインを示し、リストはその中の項目を並べる役割を持ちます。見出しで大きな章を示し、その配下にliで要素を並べることで、スクリーンリーダーのユーザーは「章 → リスト」の順に情報を把握しやすくなります。
見出しを省略してリストだけを多用すると、どこからどこまでが1つのまとまりなのかが分かりにくくなることがあります。liタグはあくまで「項目」であって、「セクション全体」を表すものではないため、見出しと組み合わせて使うことがアクセシビリティ向上につながります。
まとめ
HTMLのliタグについて、基礎から実践的な使い方、さらにアクセシビリティまで一通り学んでいただきました。まず最初に、liタグが「list item（リストアイテム）」の略であり、リストの1つ1つの項目を表すためのタグであることを確認しました。単独では使わず、必ず<ul>（順番なしリスト）または<ol>（順番ありリスト）の中に記述するというルールがあることが、理解の出発点でした。
次に、ulタグ・olタグとの関係性について整理しました。ulは順番に意味がないリスト、olは順番に意味があるリストを表し、それぞれが「リスト全体」を担当し、その内側でliが「個々の項目」を担当するという役割分担がポイントでした。意味（セマンティクス）に応じてulとolを使い分けることで、ブラウザや検索エンジン、スクリーンリーダーに正しい文書構造を伝えられることも確認しました。
続いて、liタグを使ったシンプルなリスト作成方法として、実際に<ul>と<ol>を使った具体例を通して、買い物リストや手順リストのような場面での使い方を学びました。<!DOCTYPE html>から始まる最低限のHTML構造の中に、見出しとリストを組み合わせて記述する流れを確認し、インデントやタグの閉じ忘れといったよくあるつまずきポイントにも触れました。ここで、「リスト全体 → その中に複数のli」というパターンを自然に身につけることができたと思います。
そのうえで、CSSと組み合わせたデザインカスタマイズの方法も扱いました。list-style-typeでマーカーの表示を変更・非表示にする方法、marginやpaddingで項目同士や項目内に余白をつけて読みやすくする方法、display: inline-block;を使ってリストを横並びにしてメニュー風に見せる方法などを紹介しました。また、:hover擬似クラスでホバー時の背景色を変えることで、インタラクティブな印象のリストにできること、nth-childで特定の順番のliだけスタイルを変えられることなど、実務でもよく使うテクニックにも触れました。
さらに一歩進んで、liタグを使った階層リスト（入れ子構造）についても学びました。liの内側にさらに<ul>や<ol>を入れることで、「大項目」と「小項目」の関係を表現し、カテゴリとその配下の詳細、章と節のような構造まで表せることを確認しました。インデントを丁寧に付けることで、コード上でも階層が把握しやすくなること、ulとolを組み合わせて「手順の中の順不同項目」を表現するなど、意味に応じた構造設計ができることも重要なポイントでした。
ナビゲーションメニューにおける実用例では、<nav>タグと<ul>・<li>・<a>タグの組み合わせが、実際のWebサイトで非常によく使われることを確認しました。liごとにリンクを配置して横並びのメニューを作り、現在ページにだけクラスを付けて強調表示するパターンや、liの中に別の<ul>を入れてドロップダウンメニューとして階層ナビゲーションを表現するパターンなど、より実践的な使い方をイメージしていただけたと思います。スマートフォン表示も含めて、li単位の構造が保守性と拡張性を高めることも確認しました。
最後に、アクセシビリティを意識したliタグの書き方について整理しました。リストであるべき情報を単なる改行や段落で表現せず、<ul>・<ol>・<li>で正しくマークアップすることの重要性、「順番の有無」によってulとolを適切に選ぶこと、リンクテキストを「ここをクリック」ではなく内容が分かる表現にすることなど、支援技術を利用するユーザーの視点を取り入れた記述のポイントを学びました。また、見た目の都合だけで構造を変えてしまわず、CSSで装飾しながらもHTMLの意味的な構造は維持することがアクセシビリティ向上につながる、という考え方も押さえました。
この記事全体を通じて、liタグは単に「箇条書きの点を出すためのタグ」ではなく、文書構造やナビゲーション、デザイン、アクセシビリティなど、Webページづくりのさまざまな場面で重要な役割を担っていることが分かっていただけたと思います。今後、実際にコードを書くときには、「ここはリストと呼べる情報のまとまりか」「順番に意味があるのか」「ユーザーにとって分かりやすい構造か」という視点を意識しながら、ul・ol・liタグを選び、CSSで必要な見た目を整えていく練習を続けていただければと思います。