この記事の要点

<ul> は順序のない（順不同）リストを表す HTML 要素 内部の各項目は <li>（list item）で表す。直接の子要素は li のみが許される 番号順が意味を持つ場合は <ol>（順序付きリスト）を使う マーカー（黒丸 / 白丸 / 四角）の見た目は CSS の list-style-type / list-style-image で制御 ナビゲーション / FAQ / メニュー / タグ一覧など、項目が並列な情報の構造化に最適

ul 要素とは

<ul>（unordered list）は、HTML で順序を持たない（並列な）項目の集まりを表す要素です。中身は <li>（list item）で各項目を記述し、ブラウザは既定で黒丸（•）のマーカーを付けて整形表示します。

基本構文

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>バナナ</li>
</ul>

表示結果は次のような箇条書きになります。

• りんご
• みかん
• バナナ

ol との使い分け

要素	意味	用途例
<ul>	順序が重要でないリスト	機能一覧 / タグ / 用語
<ol>	順序が重要なリスト	手順書 / ランキング / 章立て
<dl>	用語と説明のペア	用語集 / 設定項目

並べ替えても意味が変わらないなら ul、順序が意味を持つなら ol、を選びます。

ネストしたリスト

li の中にさらに ul / ol を入れられます。マーカーは階層ごとに自動で変化するブラウザが多いです。

<ul>
  <li>果物
    <ul>
      <li>りんご</li>
      <li>みかん</li>
    </ul>
  </li>
  <li>野菜
    <ul>
      <li>トマト</li>
      <li>キャベツ</li>
    </ul>
  </li>
</ul>

マーカーの種類（list-style-type）

CSS の list-style-type で見た目を変えられます。

値	表示
disc（既定）	黒丸 •
circle	白丸 ○
square	黒四角 ■
none	マーカーなし（ナビ等で多用）

ul.no-marker { list-style-type: none; padding-left: 0; }
ul.square    { list-style-type: square; }

カスタムマーカー（list-style-image / ::marker）

/* 画像をマーカーにする */
ul.fancy {
  list-style-image: url("/img/check.png");
}

/* CSS3 の ::marker で自由にスタイル */
ul.colored li::marker {
  color: #ff5722;
  font-size: 1.2em;
}

マーカーを消してアイコンに置き換える典型パターン

ul.checklist {
  list-style: none;
  padding: 0;
}
ul.checklist li {
  position: relative;
  padding-left: 1.4em;
}
ul.checklist li::before {
  content: "\2713";       /* ✓ */
  position: absolute;
  left: 0;
  color: #2ecc71;
  font-weight: bold;
}

li の中身に置けるもの

li の内側にはほぼあらゆるフロー要素が置けます。段落、画像、別のリスト、テーブル、コードブロックなど。

<ul>
  <li>
    <h3>機能 A</h3>
    <p>機能 A の説明文。</p>
    <ul>
      <li>サブ機能 1</li>
      <li>サブ機能 2</li>
    </ul>
  </li>
</ul>

ul の直接の子は li のみ

HTML 仕様上、<ul> の直接の子要素は <li>（または <script> / <template>）に限定されます。div を直接入れるとバリデーション NG です。

<!-- NG: div を直接 -->
<ul>
  <div>項目 A</div>
  <div>項目 B</div>
</ul>

<!-- OK: li 経由 -->
<ul>
  <li><div>項目 A</div></li>
  <li><div>項目 B</div></li>
</ul>

ナビゲーションでの典型パターン

グローバルナビは <nav> + <ul> の組み合わせがセマンティクス的に推奨されます。

<nav aria-label="メインメニュー">
  <ul class="navbar">
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/">概要</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

.navbar { display: flex; gap: 1em; list-style: none; padding: 0; }
.navbar a { text-decoration: none; padding: 0.5em 1em; }

アクセシビリティ

• スクリーンリーダーは ul の項目数を読み上げる（「リスト、3 項目」など）
• 意味的にリストでないものを ul で囲まない（装飾だけが目的なら div / span）
• list-style:none を当てる場合、Safari 等ではリストの意味が失われることがある。意味を残したいなら role="list" を付与

<ul role="list" style="list-style:none;padding:0">
  <li>...</li>
</ul>

余白とインデントの調整

目的	CSS
左インデントを消す	padding-left: 0; list-style-position: inside;
マーカーをテキストと揃える	list-style-position: inside;
項目間の余白	li + li { margin-top: .4em; }
横並び	display: flex; または display: inline;

SEO / セマンティクスの観点

箇条書きとして適切に ul を使うと、検索エンジンに箇条書きの意味（並列項目）として認識されます。装飾だけのためにリストを使うのは避け、div / span で十分な場合はそちらにします。

FAQ

Q: ul と ol で並列・順序の判定はどう？
A: 「A, B, C」と「C, A, B」が同じ意味として読めるなら ul。逆に「最初に A、次に B」のように順番に意味があるなら ol。

Q: マーカーの色だけ変えたい
A: li::marker { color: red; } で個別指定可能。CSS Lists Level 3 で正式に対応しました。

Q: 入れ子の段差を制御したい
A: 子の ul に margin / padding を当てて調整します。深い階層は読みづらくなるので 2〜3 階層に留めるのが望ましい。

関連

• リスト — 親カテゴリ
• ol要素 — 順序付きリスト
• li要素 — リスト項目
• dl/dt/dd — 用語と説明
• list-style プロパティ — マーカー指定