LTech

レッスン4: HTMLの入れ子構造をマスター！親要素と子要素を理解しよう

HTMLの親子関係を学び、より良い構造のページを作りましょう。

🎯 学習目標

  • HTMLにおける親要素・子要素の関係を理解する
  • ネスト構造（入れ子構造）の考え方を学ぶ
  • 読みやすく正しいHTMLを書くための基礎力をつける

📘 目次

  1. 親要素・子要素とは？
  2. ネスト（入れ子）とは？
  3. ネストに関する注意点
  4. 今日のまとめ
  5. 演習：入れ子構造を書いてみよう
  6. 理解度チェック

📚 レッスン

1. 親要素・子要素とは？

HTMLでは、タグの中にさらに別のタグを入れることができます。こうした入れ子の関係がHTMLの基本的な考え方です。

このとき、

  • 外側にある要素を 親要素（parent element）
  • 内側にある要素を 子要素（child element）

と呼びます。これはまるで家族のような関係で、親が子どもを包み込むイメージです。

例：

<div>
  <p>Hello, world!</p>
</div>

この例では：

  • <div> が <p> の 親要素
  • <p> は <div> の 子要素

この親子関係を理解することは、きれいに整理されたHTMLを書く上でとても重要です。

2. ネスト（入れ子）とは？

HTMLでは、要素の中に他の要素を入れ子（ネスト）にして書くことができます。これは「箱の中に箱を入れる」ようなイメージです。

例：リストの場合

<ul>
  <li>りんご</li>
  <li>みかん</li>
</ul>

この例では：

  • <ul>（箇条書きリスト）が親要素
  • 各 <li>（リストアイテム）は <ul> の子要素
  • 1つの親要素に複数の子要素を持たせることも可能です

このネスト構造によって、Webページの内容を整理し、読みやすく構造化されたHTMLを作成できます。

3. ネストに関する注意点

HTMLでは、入れ子構造を正しく書くことがとても大切です。特に気をつけたいのは、「タグを閉じる順序」です。

✅ 正しい例：

<div>
  <p>文章</p>
</div>

❌ 間違いの例（閉じ順がおかしい）：

<div>
  <p>文章</div>
</p>

間違った書き方をすると、ブラウザでうまく表示されなかったり、レイアウトが崩れる原因になります。箱を正しく閉じることを意識しましょう。

今日のまとめ

  • HTMLはツリー構造（枝分かれする木のような構造）で成り立っている
  • 親要素が子要素を内包する形で書くのが基本
  • 入れ子（ネスト）が複雑になっても正しい順番でタグを閉じることが重要
  • きれいな入れ子構造は、ページの構造を明確にし、メンテナンスもしやすくなる

📚 リファレンス

このレッスンで学んだHTML要素の詳細については、リファレンスページで確認できます。

✍️ 演習問題

ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。

右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。

1. 好きな食べ物リスト

「私の好きな食べ物」の見出し(h2)の下に、リスト形式で「寿司」「カレー」「ハンバーグ」と表示されるようにHTMLを書いてみましょう。

<div>
  <h2>私の好きな食べ物</h2>
  <!-- ここにリストを追加 -->
</div>
好きな食べ物リスト：解答例
<div>
  <h2>私の好きな食べ物</h2>
  <ul>
    <li>寿司</li>
    <li>カレー</li>
    <li>ハンバーグ</li>
  </ul>
</div>

2. 階層を深くしたリスト

次の構造をHTMLで書いてみましょう。リストの中にさらにリストを入れる、階層が深い入れ子構造です。

  • 「おすすめの本」の見出し(h2)の下に、以下の内容をリスト表示する
    • プログラミング
      • 『HTML入門』
      • 『JavaScript実践』
    • ビジネス
      • 『7つの習慣』
      • 『イシューからはじめよ』
<div>
  <h2>おすすめの本</h2>
  <!-- ここに階層化されたリストを追加 -->
</div>
階層を深くしたリスト：解答例
<div>
  <h2>おすすめの本</h2>
  <ul>
    <li>プログラミング
      <ul>
        <li>HTML入門</li>
        <li>JavaScript実践</li>
      </ul>
    </li>
    <li>ビジネス
      <ul>
        <li>7つの習慣</li>
        <li>イシューからはじめよ</li>
      </ul>
    </li>
  </ul>
</div>

このように、親子関係・入れ子構造に慣れることが、HTMLの正しいマークアップの第一歩です！

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. 「親要素」とは何を指しますか？

2. ネストが正しくないとどうなる可能性がありますか？

3. 次の中で <ul> の正しい子要素はどれですか？

📘 次回予告

「HTMLフォーム入門 ─ テキスト・ボタン・ラジオボタンの基本を学ぼう」では、ウェブサイトでよく使われるフォーム要素（入力欄、ボタン、選択メニューなど）の作り方を学びます。ユーザーの入力を受け付ける機能を追加して、よりインタラクティブなページを作成しましょう！

« レッスン3へ戻る レッスン5へ進む »

インラインエディタ