HTMLのul・liタグとは？olとの違い・入れ子・CSSを初心者向けに解説

HTMLのulとliは、買い物リストや特徴の一覧など、順番に意味がない項目をまとめる要素です。見た目を箇条書きにするだけでなく、「複数の項目がひとまとまりのリストである」とブラウザや支援技術へ伝えます。

この記事では、ul・liの基本、olとの使い分け、入れ子リスト、CSSによるマーカー変更、ナビゲーションへの応用まで初心者向けに解説します。

ulタグとliタグとは

ulはunordered list（順序なしリスト）、liはlist item（リスト項目）の略です。ulでリスト全体を囲み、その直下へ項目ごとのliを並べます。

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ブラウザでは、各項目の先頭に黒い丸が付くのが一般的です。ただし、丸は既定の見た目にすぎません。HTMLはリストの意味と構造、CSSはマーカーや余白などのデザインを担当します。

ul・ol・liの使い分け

順番を入れ替えても意味が変わらない項目にはul、手順や順位のように順番が意味を持つ項目にはol（ordered list）を使います。どちらの場合も、各項目はliで表します。

順番に意味がない一覧はulを使う

<h2>必要なもの</h2>
<ul>
  <li>パソコン</li>
  <li>テキストエディタ</li>
  <li>ブラウザ</li>
</ul>

この3項目は並び替えても内容が変わらないため、ulが適切です。「黒丸で表示したいからul」ではなく、「順序に意味がないからul」と判断します。

手順や順位はolを使う

<h2>ファイルを開く手順</h2>
<ol>
  <li>フォルダを開く</li>
  <li>index.htmlを選ぶ</li>
  <li>ブラウザで表示を確認する</li>
</ol>

この例は上から順に進める必要があるため、olを使います。項目を入れ替えたときに意味や結果が変わるか考えると、ulとの違いを判断しやすくなります。

ulとliの正しい書き方

ulの直接の子要素には、基本的にliを置きます。文章や見出しをulの直下へそのまま書かず、必要な内容はliの中へ入れてください。

<!-- 正しい構造 -->
<ul>
  <li>
    <h3>デザイン</h3>
    <p>画面の見た目を整えます。</p>
  </li>
  <li>
    <h3>コーディング</h3>
    <p>HTMLとCSSで実装します。</p>
  </li>
</ul>

liの中には文章、リンク、画像、見出しなどを入れられます。カード一覧のように1項目が複数の要素で構成される場合でも、リストとして関係があるならulとliで表現できます。

リストを入れ子にする方法

大項目の中へ小項目を作る場合は、親項目のliの中に新しいulまたはolを入れます。子リストを親のul直下へ並べるのではなく、対応するliの内側へ置く点が重要です。

<ul>
  <li>
    フロントエンド
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    バックエンド
    <ul>
      <li>PHP</li>
      <li>Ruby</li>
    </ul>
  </li>
</ul>

ブラウザは入れ子の深さに応じて、マーカーの形や字下げを変えることがあります。階層は見た目だけに頼らず、HTMLの親子関係でも正しく表しましょう。

CSSでリストの点・マーカーを変更する

旧記事で使われていた<ul type="circle">のtype属性は非推奨です。マーカーの形は、CSSのlist-style-typeで指定します。

.circle-list {
  list-style-type: circle;
}

.square-list {
  list-style-type: square;
}

discは黒丸、circleは白丸、squareは四角です。list-style-typeは子のliへ継承されるため、通常はulやolへ指定するとまとめて変更できます。

::markerでマーカーの色や大きさを変える

.feature-list li::marker {
  color: #0f766e;
  font-size: 1.25em;
}

::markerは、liの先頭に表示される丸や番号を選ぶ擬似要素です。項目本文の色を変えず、マーカーだけを装飾できます。

リストの点を消す

.navigation-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

list-style: noneはマーカーを非表示にします。見た目を消しても項目同士の関係はリストのままなので、ナビゲーションやカード一覧でもul・liを使えます。

CSSの基本的なプロパティを目的別に確認したい方は、次の記事も参考にしてください。

ulとliでナビゲーションを作る

Webサイトのメニューは関連するリンクの集まりなので、navの中でulとliを使えます。リンク先が分かる具体的な文言を書き、キーボードでも操作できるa要素を使用します。

<nav aria-label="メインメニュー">
  <ul class="navigation-list">
    <li><a href="/">ホーム</a></li>
    <li><a href="/service/">サービス</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

.navigation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation-list a {
  color: #1f2937;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

横並びはulに指定し、個々のliへ固定幅を与えすぎないようにします。Flexboxの仕組みはこちらで詳しく解説しています。

ul・liでよくある間違い

• 順番が重要な手順なのにulを使う
• ulの直下へpやdivを置き、liで囲まない
• 入れ子のulを対応するliの外へ置く
• マーカーを変えるために非推奨のtype属性を使う
• 見た目だけを理由に、関係のない項目まで1つのリストへまとめる

divは意味を持たない汎用コンテナです。複数項目がリストとして関係するならul・ol・liを使い、単にレイアウトをまとめたいだけならdivなどを検討します。

まとめ

ulは順番に意味がないリスト全体、olは順番に意味があるリスト全体、liはその中の1項目を表します。並び替えて意味が変わるかを考えると、ulとolを正しく選べます。

マーカーの形は非推奨のtype属性ではなく、CSSのlist-style-typeや::markerで変更してください。入れ子では子リストを親のli内へ置き、HTMLの構造と見た目の両方を分かりやすく整えましょう。

参考資料

• MDN：<ul> unordered list element
• MDN：<li> list item element
• MDN：list-style-type
• MDN：::marker