<ul> / <ol> / <li>

対応:		HTML 4（1997）

『ul』は順序のない箇条書きリスト、『ol』は順序のある番号付きリストを作成する要素で、リストの各項目は『li』要素で記述します。

構文

<!-- 箇条書きリスト（順序なし） -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<!-- 番号付きリスト（順序あり） -->
<ol>
  <li>手順1</li>
  <li>手順2</li>
  <li>手順3</li>
</ol>

属性一覧

タグ・属性	概要
ul	順序のないリストを作成します。各項目の先頭にはデフォルトで黒丸（●）が付きます。
ol	順序のあるリストを作成します。各項目の先頭にはデフォルトで連番数字が付きます。
li	リストの各項目を表します。『ul』または『ol』の直接の子要素として使用します。
ol[type]	番号の種類を指定します。『1』（数字）、『a』（小文字アルファベット）、『A』（大文字）、『i』（ローマ数字小）、『I』（ローマ数字大）が指定できます。
ol[start]	リストの開始番号を指定します。例：『start="3"』と指定すると3から始まります。
ol[reversed]	番号を逆順（降順）にします。値の指定は不要です。
li[value]	『ol』内の特定の『li』に番号を上書き指定します。

サンプルコード

sample_ul_ol_li.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- 箇条書きリスト -->
  <h2>好きな食べ物</h2>
  <ul>
    <li>ラーメン</li>
    <li>カレー</li>
    <li>寿司</li>
  </ul>

  <!-- 番号付きリスト（3から開始） -->
  <h2>準備手順（続き）</h2>
  <ol start="3">
    <li>ファイルを保存する</li>
    <li>ブラウザで確認する</li>
    <li>修正して繰り返す</li>
  </ol>

  <!-- リストのネスト（入れ子） -->
  <h2>プログラミング言語</h2>
  <ul>
    <li>フロントエンド
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>バックエンド
      <ul>
        <li>PHP</li>
        <li>Python</li>
      </ul>
    </li>
  </ul>

</body>
</html>

実行結果

『ul』の項目には黒丸が付き、『ol』には連番が付いて表示されます。リストをネストすると、内側のリストは字下げされて表示されます。

サンプルページはこちら

list-style-type の値一覧

CSSの『list-style-type』プロパティでマーカーの種類を変更できます。

値	表示例	概要
disc	● 黒丸	『ul』のデフォルト値。
circle	○ 白丸	白抜きの丸。
square	■ 黒四角	黒四角のマーカー。
none	（なし）	マーカーを非表示にします。ナビゲーションメニューに使います。
decimal	1. 2. 3.	『ol』のデフォルト値。算用数字。
decimal-leading-zero	01. 02. 03.	ゼロ埋めの算用数字。
lower-alpha	a. b. c.	小文字アルファベット。
upper-alpha	A. B. C.	大文字アルファベット。
lower-roman	i. ii. iii.	小文字ローマ数字。
upper-roman	I. II. III.	大文字ローマ数字。
lower-greek	α. β. γ.	小文字ギリシャ文字。
cjk-earthly-branch	子. 丑. 寅.	十二支（環境によって異なる場合あり）。

CSSカスタムマーカーとナビゲーションメニュー

『list-style-image』でカスタム画像マーカーを指定したり、疑似要素『::marker』でマーカーのスタイルを細かく調整できます。また、ナビゲーションメニューはリストを使って作るのが一般的です。

<style>
  /* カスタム絵文字マーカー */
  ul.emoji-list {
    list-style: none;
    padding-left: 0;
  }
  ul.emoji-list li::before {
    content: "✅ ";
  }

  /* ::marker 擬似要素でマーカーの色と大きさを変える */
  ol.styled-list li::marker {
    color: #4a90e2;
    font-weight: bold;
    font-size: 1.1em;
  }

  /* ナビゲーションメニュー（横並び） */
  nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px;
  }
  nav ul li a {
    text-decoration: none;
    color: #333;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
  }
  nav ul li a:hover {
    border-bottom-color: #4a90e2;
  }
</style>

<ul class="emoji-list">
  <li>HTMLの基礎を学ぶ</li>
  <li>CSSでスタイルを付ける</li>
  <li>JavaScriptで動かす</li>
</ul>

<!-- ナビゲーションメニューの実装 -->
<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/tutorial.html">チュートリアル</a></li>
    <li><a href="/dictionary.html">辞典</a></li>
  </ul>
</nav>

概要

『ul』と『ol』はどちらもリストを表す要素ですが、意味が異なります。順番に意味がない（「好きな食べ物」など）場合は『ul』、順番が重要な（「手順」「ランキング」など）場合は『ol』を選ぶと適切な文書構造になります。

リスト要素の中には別のリストを入れ子にすることができます。入れ子にする際は『li』の中に直接テキストを書いてから子リストを書くのが正しい構造です。『ul』や『ol』の直接の子として『li』以外の要素を置くのはHTMLの仕様上無効な構造となります。

リストのマーカー（黒丸や番号）の表示はCSSで自由にカスタマイズできます。『list-style-type』プロパティでマーカーの種類を変えたり、『list-style: none』で非表示にしたりすることもよく行われます。ナビゲーションメニューも『ul』と『li』で作られることが多く、その場合はマーカーをCSSで非表示にします。