HTML 無順序リスト <ul> タグ

JPKODA 編集部 May 6, 2026

無順序リスト（Unordered List）は、特定の順序や優先順位を強調することなく、関連する項目のグループを表示するために使用されます。

本セクションでは、<ul> タグとその属性について深く掘り下げ、HTML ドキュメント内で整理された分かりやすいリストを効率的に作成する方法を解説します。

1. `<ul>` タグの基本理解

HTML における <ul> タグは「Unordered List」の略です。
これはコンテナ要素であり、複数の項目をグループ化するために使用されます。デフォルトでは各項目の先頭に「ブレットポイント（黒丸）」が表示されます。リスト内の各項目は <li>（List Item）タグで定義します。<ul> タグは、項目の並び順に重要な意味がないことを示します。

1.1 基本的な構造

無順序リストの基本的な構造は以下の通りです。

<ul>
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ul>

このコードは、3 つのブレットポイント（項目 1、項目 2、項目 3）を含むリストをレンダリングします。

2. 無順序リストのネスト（入れ子）

無順序リストを相互にネストさせることで、階層構造を作成できます。これは、大きなリストの中のサブカテゴリや関連項目を表現するのに非常に有用です。

<ul>
  <li>主要項目 1</li>
  <li>
    主要項目 2
    <ul>
      <li>子項目 1</li>
      <li>子項目 2</li>
    </ul>
  </li>
  <li>主要項目 3</li>
</ul>

この例では「主要項目 2」の中にネストされた無順序リストが含まれています。ブラウザは通常、階層を視覚的に区別するために、ネストされたリストに対して異なるブレットスタイル（白抜き丸や四角など）を適用します。

3. type 属性（非推奨）

旧バージョンの HTML では、<ul> タグにはブレットのスタイルを指定するための type 属性が存在していました（例: disc 実心円、circle 空心円、square 四角形）。

しかし、この属性は HTML5 において非推奨（Deprecated）となっており、現在は CSS を使用してスタイルを設定することが推奨されています。古いコードで見かけることはあるかもしれませんが、新規プロジェクトでは使用を避けてください。

4. CSS を使用したリストのスタイリング

非推奨となった type 属性と比較して、CSS はリストの外観をより強力に制御できます。記号のスタイル変更、記号の完全な削除、さらにはカスタム画像を記号として使用することも可能です。

4.1 箇条書き記号のスタイル変更

CSS の list-style-type プロパティを使用すると、記号のスタイルを変更できます。主な値は以下の通りです。

disc: 実心円（デフォルト）。
circle: 空心円。
square: 実心正方形。
none: 記号を削除。

例：

<ul style="list-style-type: circle;">
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ul>

このコードは、空心円の記号を持つリストを表示します。

4.2 箇条書き記号の削除

リストから記号を削除するには、list-style-type プロパティを none に設定します。これは、ナビゲーションバーなどを作成する際によく使用される手法です。

<ul style="list-style-type: none;">
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ul>

4.3 カスタム画像を記号として使用する

CSS の list-style-image プロパティを使用すると、独自の画像をリストの記号として利用できます。url() 関数で画像のパスを指定します。

<ul style="list-style-image: url('bullet.png');">
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ul>

この場合、各項目の前に "bullet.png" が表示されます。最適な視覚効果を得るために、画像のサイズが適切であることを確認してください。

4.4 リスト項目の余白制御

margin（外余白）や padding（内余白）を使用して、リスト項目の周囲のスペースを制御できます。これにより、可読性とデザイン性が向上します。

<ul style="margin-left: 20px; padding-left: 0;">
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ul>

このコードでは、リスト全体に左マージンを追加し、デフォルトのパディングを削除することで、インデント（字下げ）を細かく調整しています。

5. 実践的なサンプルとデモ

HTML における無順序リストの具体的な活用シーンを見ていきましょう。

5.1 例 1：シンプルなナビゲーションメニュー

無順序リストは、ナビゲーションメニューの作成に最適です。記号を削除し、CSS でレイアウトを整えることで、プロフェッショナルなメニューを構築できます。

<ul style="list-style-type: none; padding: 0; margin: 0;">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">私たちについて</a></li>
  <li><a href="#">サービス</a></li>
  <li><a href="#">お問い合わせ</a></li>
</ul>

ここでは、list-style-type: none で記号を消し、padding と margin を 0 にリセットしています。

5.2 例 2：機能リスト

製品の特徴やメリットをリストアップする際にも重宝します。

<ul>
  <li>シンプルで使いやすい</li>
  <li>高いカスタマイズ性</li>
  <li>レスポンシブデザイン</li>
  <li>優れたサポート体制</li>
</ul>

5.3 例 3：ToDo リスト

完了した項目に打消し線を引くなどして、簡単なタスク管理リストを作成できます。

<ul>
  <li><s>スーパーで買い物</s></li>
  <li>請求書の支払い</li>
  <li>犬の散歩</li>
  <li>プロジェクト報告書の完了</li>
</ul>

この例では、<s> タグを使用して完了済みの項目に打消し線を表示しています。

1. <ul> タグの基本理解