HTMLの属性に続いて、「親要素と子要素」の関係を学びました。要素を入れ子にすることで、HTMLの構造を整理できます。
リストを作る：<li>要素
リスト（箇条書き）を作るには、<li> 要素を使います。
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
<li> は「list item（リスト項目）」の略です。
<ul>要素：黒点付きリスト
<li> 要素を <ul> 要素で囲むと、黒点（・）で始まるリストになります。
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
表示結果:
- りんご
- バナナ
- オレンジ
<ul> は「unordered list（順不同リスト）」の略です。
<ol>要素：番号付きリスト
<li> 要素を <ol> 要素で囲むと、数字で連番が振られます。
<ol>
<li>起床</li>
<li>朝食</li>
<li>出発</li>
</ol>
表示結果:
- 起床
- 朝食
- 出発
<ol> は「ordered list（順序付きリスト）」の略です。
入れ子：要素を要素で囲む
入れ子とは、要素を要素で囲むことです。
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
この例では、<li> 要素が <ul> 要素の中に入っています。
親要素と子要素
入れ子構造では、要素の関係を「親」と「子」で表現します。
- 親要素: 囲む方の要素
- 子要素: 囲まれる要素
<ul> <!-- 親要素 -->
<li>項目1</li> <!-- 子要素 -->
<li>項目2</li> <!-- 子要素 -->
</ul>
この例では：
<ul>が親要素<li>が子要素
インデントで分かりやすくする
子要素は、**インデント（字下げ）**することで、構造が分かりやすくなります。
<!-- ❌ 分かりにくい -->
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
<!-- ✅ 分かりやすい -->
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
インデントは、通常スペース2つまたはタブ1つで行います。
より深い入れ子
入れ子は、何段階でも深くできます。
<ul>
<li>果物
<ul>
<li>りんご</li>
<li>バナナ</li>
</ul>
</li>
<li>野菜
<ul>
<li>にんじん</li>
<li>トマト</li>
</ul>
</li>
</ul>
表示結果:
- 果物
- りんご
- バナナ
- 野菜
- にんじん
- トマト
実用例：ナビゲーションメニュー
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">私たちについて</a></li>
<li><a href="service.html">サービス</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
リストとリンクを組み合わせることで、ナビゲーションメニューが作れます。
<ul>と<ol>の使い分け
<ul>を使う場合
- 順番が重要でないリスト
- 例：買い物リスト、機能一覧
<ol>を使う場合
- 順番が重要なリスト
- 例：手順、ランキング
<!-- 順番が重要（手順） -->
<ol>
<li>材料を準備する</li>
<li>材料を切る</li>
<li>炒める</li>
<li>完成</li>
</ol>
<!-- 順番は重要でない（買い物リスト） -->
<ul>
<li>牛乳</li>
<li>卵</li>
<li>パン</li>
</ul>
今日の学びのポイント
<li>要素: リスト項目（箇条書き）<ul>要素: 黒点付きリスト（順不同）<ol>要素: 番号付きリスト（順序付き）- 入れ子: 要素を要素で囲むこと
- 親要素: 囲む方
- 子要素: 囲まれる方
- インデント: 子要素を字下げして分かりやすくする
親要素と子要素の関係を理解することで、HTMLの構造を整理して書けるようになります。
コメント