リスト

買い物リストもレシピもリストですが、順番を変えるとおかしくなるのは一方だけです。HTMLには、それぞれに別の要素があります。

順序なしリストと順序つきリスト

項目の順番が関係ないなら、順序なしリスト <ul> を使います。ブラウザーは各項目に黒丸をつけます。レシピの手順や順位のように順番が大切なら、順序つきリスト <ol> を使えば、ブラウザーが番号をつけてくれます。どちらの場合も、各項目はリスト項目 <li> で、<ul> や <ol> の直下に置けるのは <li> 要素だけです。文字やほかの要素は項目の中に入れます。

<h2>You will need</h2>
<ul>
  <li>500 g flour</li>
  <li>10 g salt</li>
  <li>350 ml warm water</li>
</ul>

<h2>Method</h2>
<ol>
  <li>Mix everything in a bowl.</li>
  <li>Leave it covered for 12 hours.</li>
  <li>Shape and bake at 230 degrees for 40 minutes.</li>
</ol>

番号やダッシュを自分で入力すればいいのでは、と思うかもしれません。そうすると、ブラウザーにはリストがあることがわかりません。スクリーンリーダーは本物のリストを「リスト、3項目」のように長さといっしょに読み上げるので、聞く人はどれだけ続くかがわかり、読み飛ばすこともできます。<ol> に手順を一つ追加すると、そのあとの番号はすべて自動で更新されます。番号を入力していたら、手で振り直すことになります。

順序つきリストのオプション

<ol> にはいくつかの属性があります。start="4" は4から数え始めるので、段落をはさんでリストが続くときに便利です。reversed は、ベストテンのように逆順に数えます。type は印をアルファベットやローマ数字に切りかえます。type="a"、type="A"、type="i"、type="I" です。<li value="10"> のように、value で一つの項目だけ番号を飛ばすこともできます。黒丸や番号の見た目（形、色、表示するかどうか）はCSSで決めます。

リストの中のリスト

リスト項目には、リスト全体を入れることができます。内側の <ul> や <ol> は、それが属する <li> の中の、項目の文字のあと、終了タグの前に置きます。よくあるまちがいは、内側のリストを外側のリストの直下、二つの <li> 要素の間に置くことで、これは認められていません。入れ子のリストは、サイトがサブメニューつきのメニューをつくったり、アウトラインが小項目を示したりするのに使われます。

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

説明リスト

三つ目のリストは、用語集や質問と答えの一覧のように、用語と説明を組にします。<dl> が説明リスト、<dt> が用語、<dd> がその説明です。一つの用語にいくつかの説明があっても、いくつかの用語が一つの説明を共有してもかまいません。ブラウザーは初期設定で説明を字下げします。

リストは思わぬところにも出てきます。ほとんどのサイトの上部にあるメニューは、<nav> の中のリンクの <ul> で、CSSが項目を横一列に並べて黒丸を隠しています。商品カードの列や検索結果の一覧も、リストであることがよくあります。似たものがまとまっているのを見たら、リストかどうか考えてみましょう。たいていはリストです。

どちらを使うか手早く決める方法があります。項目をシャッフルするところを想像してみましょう。レシピの手順やベストテンのように、シャッフルすると意味が変わるなら順序つきリストで、<ol> が必要です。持ち物リストのように何も変わらないなら <ul> を使います。各項目は短くし、書き出しの形をそろえると、ざっと見やすいリストになります。