HTML・はじめの一歩

リストで箇条書き

ulとolで箇条書きのリストを作る方法。点つきリストと番号つきリストの使い分け、リストの中にリストを入れる入れ子の書き方、liの中に文章や画像を入れる使い方まで、よく使う形を紹介します。

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

まずは点つきリスト

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

<ul>
  <li>あんぱん</li>
  <li>牛乳</li>
  <li>りんご</li>
</ul>
各項目のあたまに「・」の点がつき、3つがたてにならびます。
タグ意味
<ul>unordered list(順番のないリスト)の目印。外側の箱
<li>list item(項目)の目印。中に並ぶひとつひとつ

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

番号つきにしたいときは

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

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

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

上が<ul>(点つき)、下が<ol>(番号つき)。中身は同じ書き方でも、あたまの印だけが変わります。
べんりワザコピペで使えるCSSリストデザイン集リストの見た目をおしゃれに変えるアイデア集はこちら6

リストの中に、リスト(入れ子)

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

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

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

「りんご」「みかん」だけが一段右にさがって表示され、親子の関係がひと目で伝わります。

liの中身は短い言葉だけじゃない

ここまでの例は<li>に短い言葉だけを入れてきましたが、<li>は箱なので、もっと長い説明を入れることもできます。

<ul>
  <li>
    <p>朝ごはん</p>
    <p>パンとたまごを用意する</p>
  </li>
  <li>
    <p>お昼ごはん</p>
    <p>おにぎりをにぎる</p>
  </li>
</ul>

タイトルと説明を、ひとつの<li>にまとめて入れています。「項目ひとつぶんの中身」であれば、<p>を何個入れても、<li>は気にしません。

<p>が2つ入っていても、リストとしては変わらず1項目として扱われているのが分かります。

このレッスンのまとめ

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

やってみよう:すきなものリスト

しまちゃんのページに「すきなもの」を足しましょう。<h2>で見出しを立てて、その下に<ul>と<li>でならべます。

<h2>すきなもの</h2>
<ul>
  <li>🎨 おえかき</li>
  <li>🍜 ラーメン</li>
  <li>🎮 ゲーム</li>
  <li>🐤 しま</li>
</ul>

ブラウザで開くと、こう表示されます。

ブラウザ表示。「すきなもの」の見出しの下に、おえかき・ラーメン・ゲーム・しまが点つきの箇条書きで並んでいる
「・」つきで、4つがたてにならびます。ふやしたいときは<li>を1行足すだけ。

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

よくある質問

liの中に文章を2行以上書いてもいい?
書けます。liは項目をひとつ入れる箱なので、短い言葉だけでなく、pタグを使った長めの説明を入れることもできます。
olの番号を1からではなく途中から始めたいときは?
olにstart属性を足すと変えられます。たとえばstart="5"と書けば、5番から数字が始まります。
・や1.2.3.の見た目を消したり変えたりしたいときは?
それはCSSの仕事です。HTMLでは「これはリストである」という意味だけを持たせておき、見た目の調整はCSSの回で覚えます。