リストで箇条書き

買い物メモ、手順、好きなものリスト。「いくつかのものが並ぶ」場面って、意外とたくさんありますよね。そういうときに使うのがリスト。段落でだらだら書くより、ぐっと読みやすくなります。

まずは点つきリスト

順番のない箇条書きは、<ul> の中に <li> を並べます。

<ul>
  <li>あんぱん</li>
  <li>牛乳</li>
  <li>りんご</li>
</ul>

<ul> という箱の中に、<li> をいくつも入れる。「入れ子」がさっそく登場しています。表示すると、各項目のあたまに「・」のような点がつきます。

番号つきにしたいときは

「手順1、2、3」のように順番が大事なときは、<ul> を <ol> に変えるだけ。

<ol>
  <li>お湯をわかす</li>
  <li>粉を入れる</li>
  <li>3分まつ</li>
</ol>

<ol> はordered list（順番のあるリスト）。中身の <li> はそのまま。すると、点のかわりに 1. 2. 3. と番号がついてくれます。番号は自分で書かなくても、ブラウザが順番につけてくれます。

リストの中に、リスト（入れ子）

「くだもの」の下に、さらに細かい項目をぶら下げたい——そんなときは、<li> の中にもうひとつリストを丸ごと入れます。

<ul>
  <li>くだもの
    <ul>
      <li>りんご</li>
      <li>みかん</li>
    </ul>
  </li>
  <li>やさい</li>
</ul>

こうすると、「りんご」「みかん」が「くだもの」の下に一段さがって表示され、親子の関係が見た目でも伝わります。目次やカテゴリ分けにぴったり。

このレッスンのまとめ

1. リストは <ul>（または <ol>）で囲み、項目を <li> で書く
2. 点つきは <ul>、番号つきは <ol>
3. <li> はかならずリストの中に入れる

できたら、自分のすきなものに書きかえてみましょう。これで、あなたのページに「すきなもの」がつきました。 :::