実行できるHTMLドキュメント: HTML リスト

Q: HTML で箇条書きを作るにはどうすればいいですか？

順序なしリストを使います。 の中に項目ごとに を 1 つずつ入れます。例: Milk Eggs 。ブラウザは各項目の前に行頭記号を付け、リストをインデントします。

Q: ul と ol の違いは何ですか？

は順序なしリストで、行頭記号付きで表示され、順番に意味のない項目に使います。 は順序付きリストで、番号付きで表示され、手順やランキングのように順番に意味がある場合に使います。どちらも を項目として持ちます。

Q: HTML のリストの点 (行頭記号) を消すには？

CSS で に list-style: none を指定します。さらに padding-inline-start: 0 (または padding: 0) を指定すると、ブラウザが行頭記号のために付けるインデントも消えます。

Q: 番号付きリストを 1 以外の番号から始めるには？

start 属性を使います。 なら最初の項目が 5 になります。reversed を付けると番号が減っていき、 の value はその項目と以降の項目の番号を決めます。

Q: HTML で入れ子のリストを作るには？

内側の や を、外側のリストの の中、その項目のテキストの後ろに置きます。外側の の直下、 と の間にリストを置くのは無効です。

HTML のリスト: ul、ol、li

HTML の主なリストは 2 種類です。<ul> (順序なしリスト) は行頭記号の付いた箇条書き、<ol> (順序付きリスト) は番号付きのリストになります。各項目は <li> (リスト項目) です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

順番に意味があるとき (手順、ランキング、目次) は <ol>、ないときは <ul> を使います。スクリーンリーダーはどちらも「リスト、3 項目」のように項目数付きでリストとして読み上げます。「•」や「1.」を手で打った行より本物のリストがよいのはそのためです。

リストの直下に置けるのは <li> 要素だけです。見出し、段落、別のリストなど、それ以外のものは <li> の中に入れます。

行頭記号のスタイル

<ul> の list-style-type で行頭記号が変わります。::marker 疑似要素を使うと、テキストとは別に行頭記号や番号そのものにスタイルを付けられます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

文字列を指定すると、そのテキストが行頭記号になります。"\2713 " はチェックマークの後に空白が 1 つです。最初の空白は \2713 のエスケープを終わらせるだけのものです。::marker に指定できるプロパティは少なく、主に color、font-size などのフォント関連ですが、「行頭記号に色を付けたい」という要望なら余分なマークアップなしで対応できます。

番号付きリスト: 数字、アルファベット、ローマ数字

<ol> には番号付けのための属性があります。

属性	例	結果
`type`	`type="a"`	a, b, c (`A`、`i`、`I`、`1` も使えます)
`start`	`start="5"`	5 から数え始める
`reversed`	`reversed`	番号が減っていく
`value` (`<li>` に指定)	`<li value="10">`	この項目が 10 になり、以降はそこから続く

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

文字そのものに意味がある場合 (「選択肢 B を選ぶ」など) があるので、HTML で type を使うのは問題ありません。見た目だけを変えたいなら、CSS の list-style-type: upper-alpha や lower-roman でも同じことができます。

入れ子のリスト

サブリストは、それが属する <li> の中、その項目のテキストの後ろに置きます。ブラウザは階層ごとに行頭記号を disc、circle、square と変えていきます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

</li> の位置に注意してください。「Frontend」の項目は、サブリストの後で初めて閉じています。<ul> の前で閉じると、サブリストが外側の <ul> の直下に置かれることになり、見た目はほぼ同じでも無効な HTML になります。

番号付きリストも同じように入れ子にでき、番号はサブリストごとに 1 から始まり直します。1.1 や 1.2 のような番号にするには CSS カウンターが必要です。

説明リスト: dl、dt、dd

説明リストは用語とその説明を組にします。用語集、注文の詳細、FAQ のような組み合わせに使います。<dt> が用語、<dd> が説明です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

1 つの用語に複数の <dd> を付けることも、複数の <dt> で 1 つの <dd> を共有することもできます。ブラウザは初期状態で <dd> をインデントしますが、上の margin のルールでそれを消しています。複数の列があるデータにはテーブルのほうが適しています。

行頭記号のないリスト: メニューと横並びのリスト

ナビゲーションメニューはリンクのリストです。list-style: none で行頭記号を、padding: 0 でインデントを消し、flexbox で項目を横に並べます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

スクリーンリーダーにとっては、これもリストのままです (「ナビゲーション、リスト、3 項目」)。例外が 1 つあり、Safari と VoiceOver の組み合わせでは、行頭記号を消すとリストとして扱われなくなることがあります。項目数を伝えることが大事なら、<ul> に role="list" を追加しましょう。

初期の余白

ブラウザはリストの上下に 1em の margin を付け、padding-inline-start: 40px でインデントします。行頭記号はこの padding の中に表示されます。padding は開始側に付くので、右から左に書く言語では行頭記号とインデントが自動的に反対側に移ります。padding を消すと行頭記号がリストの箱の外に出て、切れてしまうことがあります。padding を少し残すか、list-style-position: inside を使いましょう。

よくある間違い

親のリストがない <li>。 <ul>、<ol>、<menu> のどれかの中に置く必要があります。
入れ子のリストが <li> の外にある。 サブリストは、それが属する項目の中に入れましょう。
<ul> の直下にテキストや他のタグを置く。 たとえば <ul><p>Note</p><li>...</li></ul> です。<li> の中かリストの外に移しましょう。
• と <br> で行頭記号や番号を手で書く。 スクリーンリーダーにはリストではなく段落として聞こえます。
list-style: none だけで padding: 0 を指定しない。 原因のわからない 40 ピクセルのインデントが残ります。
見た目のために <ol> を使う。 順番に意味がないなら <ul> を使い、スタイルで見た目を整えましょう。

よくある質問

HTML で箇条書きを作るにはどうすればいいですか？

順序なしリストを使います。<ul> の中に項目ごとに <li> を 1 つずつ入れます。例: <ul><li>Milk</li><li>Eggs</li></ul>。ブラウザは各項目の前に行頭記号を付け、リストをインデントします。

ul と ol の違いは何ですか？

<ul> は順序なしリストで、行頭記号付きで表示され、順番に意味のない項目に使います。<ol> は順序付きリストで、番号付きで表示され、手順やランキングのように順番に意味がある場合に使います。どちらも <li> を項目として持ちます。

HTML のリストの点 (行頭記号) を消すには？

CSS で <ul> に list-style: none を指定します。さらに padding-inline-start: 0 (または padding: 0) を指定すると、ブラウザが行頭記号のために付けるインデントも消えます。

番号付きリストを 1 以外の番号から始めるには？

start 属性を使います。<ol start="5"> なら最初の項目が 5 になります。reversed を付けると番号が減っていき、<li> の value はその項目と以降の項目の番号を決めます。

HTML で入れ子のリストを作るには？

内側の <ul> や <ol> を、外側のリストの <li> の中、その項目のテキストの後ろに置きます。外側の <ul> の直下、<li> と <li> の間にリストを置くのは無効です。

HTML のリスト: 箇条書き、番号付きリスト、入れ子