LESSON 30分

リストを作ろう

ストーリー

先輩「見出しと段落が書けたら、次はリストだ。箇条書きとか、手順とか、リストは本当によく使うよ」

確かに、スキルの一覧とか趣味の一覧とか、リストで書きたいものってたくさんありますね。

先輩「HTMLには3種類のリストがあるんだ。それぞれ使い方を覚えよう」

順序なしリスト <ul>

箇条書き を作るときに使います。項目の順番に意味がない場合に使います。

html
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

表示結果:

• HTML
• CSS
• JavaScript
タグ役割
<ul>Unordered List（順序なしリスト）の親要素
<li>List Item（リスト項目）

順序ありリスト <ol>

番号付きリスト を作るときに使います。手順など、順番に意味がある場合に使います。

html
<ol>
  <li>HTMLファイルを作成する</li>
  <li>基本構造を書く</li>
  <li>ブラウザで確認する</li>
</ol>

表示結果:

1. HTMLファイルを作成する
2. 基本構造を書く
3. ブラウザで確認する
タグ役割
<ol>Ordered List（順序ありリスト）の親要素
<li>List Item（リスト項目）

<ul> と <ol> の使い分け

使う場面タグ理由
趣味の一覧<ul>順番に意味がない
スキルの一覧<ul>順番に意味がない
料理の手順<ol>順番が重要
ランキング<ol>順位が重要
学習ステップ<ol>順番が重要

ネストしたリスト（入れ子）

リストの中にリストを入れることができます。

html
<ul>
  <li>フロントエンド
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>バックエンド
    <ul>
      <li>Python</li>
      <li>Java</li>
      <li>Go</li>
    </ul>
  </li>
</ul>

表示結果:

• フロントエンド
  ◦ HTML
  ◦ CSS
  ◦ JavaScript
• バックエンド
  ◦ Python
  ◦ Java
  ◦ Go

先輩「ネストは何段階でもできるけど、3段階くらいまでにしておくのが見やすいよ」

説明リスト <dl>

用語とその説明 をセットで表示するときに使います。

html
<dl>
  <dt>HTML</dt>
  <dd>Webページの構造を作る言語</dd>

  <dt>CSS</dt>
  <dd>Webページの見た目を整える言語</dd>

  <dt>JavaScript</dt>
  <dd>Webページに動きを付ける言語</dd>
</dl>
タグ役割
<dl>Description List（説明リスト）の親要素
<dt>Description Term（用語）
<dd>Description Details（説明）

実践：リストを使ったページを作ろう

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リストの練習</title>
</head>
<body>
  <h1>自己紹介</h1>

  <h2>趣味</h2>
  <ul>
    <li>読書</li>
    <li>プログラミング</li>
    <li>映画鑑賞</li>
  </ul>

  <h2>今月の学習計画</h2>
  <ol>
    <li>HTMLの基本を学ぶ</li>
    <li>CSSでデザインする</li>
    <li>自己紹介ページを完成させる</li>
  </ol>

  <h2>学習中の技術</h2>
  <ul>
    <li>Web技術
      <ul>
        <li>HTML</li>
        <li>CSS</li>
      </ul>
    </li>
    <li>ツール
      <ul>
        <li>VS Code</li>
        <li>Chrome DevTools</li>
      </ul>
    </li>
  </ul>

  <h2>用語集</h2>
  <dl>
    <dt>タグ</dt>
    <dd>要素の始まりと終わりを示すしるし</dd>

    <dt>属性</dt>
    <dd>タグに付ける追加情報</dd>
  </dl>
</body>
</html>

まとめ

ポイント内容
<ul>順序なしリスト（箇条書き）
<ol>順序ありリスト（番号付き）
<li>リスト項目（ul/ol の子要素）
<dl>説明リスト（用語 + 説明）
ネストリストの中にリストを入れられる

チェックリスト

  • <ul> で箇条書きリストを作れる
  • <ol> で番号付きリストを作れる
  • <ul> と <ol> を適切に使い分けられる
  • ネストしたリストを作れる
  • <dl> で説明リストを作れる

次のステップへ

リストが作れるようになりました。次は、データを表形式で表示するテーブルタグを学びましょう。

推定読了時間: 30分