はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。
HTMLでウェブページを作るとき、要素同士の関係を理解することが重要です。特に「親子要素」や「兄弟要素」の関係を知ると、HTMLやCSSでページをデザインしたり、レイアウトを整えたりするのに役立つと考えました。今回は親子要素と兄弟要素の理解を深めるためにgridレイアウトを参考に考察してみました。

親子要素と兄弟要素の基礎

1. 親子要素とは？
親子要素は、HTMLの構造で使われる用語です。ある要素が別の要素の中に含まれているとき、それを「親子関係」と呼びます。外側にある要素が「親要素」、内側にある要素が「子要素」となります。

親子要素の例:

<div>
    <p>これは段落です。</p>
</div>

<div> は親要素です
<p> はその中に含まれている子要素です。

2. 兄弟要素とは？
兄弟要素は、同じ親要素の中で並んでいる要素同士のことです。これらは「兄弟」として認識されます。

兄弟要素の例:

<div>
    <h1>見出しです</h1>
    <p>段落です。</p>
</div>

<h1> と <p> は同じ <div> の中にある兄弟要素です。

親子要素と兄弟要素が重要な理由

ウェブ開発では、ページの構造やスタイリングを正しく行うために、要素の親子関係や兄弟関係を理解することが重要です。ここではその理由を詳しく説明します。

1. ページの構造を整理するため
親子要素や兄弟要素の概念を使うことで、ページの構造がはっきりし、コードが整理されます。例えば、ページ全体を表す

の中に、ヘッダーやフッター、メインコンテンツを入れると、それぞれの役割が分かりやすくなります。

構造の例:

<body>
    <header>サイトのヘッダー</header>
    <main>メインコンテンツ</main>
    <footer>フッター</footer>
</body>

2. CSSでスタイリングするため
CSSでスタイルを適用する際、親子要素や兄弟要素の関係に基づいて、指定範囲を決めます。例えば、親要素に対してスタイルを適用すると、その中の子要素にも自動的にスタイルが反映されます。

親要素にスタイルを適用する例:

div {
    color: red;
}

<div>
    <p>この文章は赤くなります。</p>
</div>

3. 要素の位置や動きをコントロールするため
CSSでレイアウトを制御するとき、親要素を基準に子要素の配置を設定したり、兄弟要素の並びを調整したりします。

親要素を基準に位置を調整する例:

div {
    position: relative;
}
p {
    position: absolute;
    top: 10px;
    left: 20px;
}

<div>
    <p>この段落は指定された位置に配置されます。</p>
</div>

gridレイアウトを使用して考えてみる

1. 4 ✖︎ 4のgridレイアウト
縦4列、横4行のgridレイアウトを作成してみました。

HTMLコード (4 ✖︎ 4のgridレイアウト)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <!-- 横4×縦4のグリッドレイアウト -->
    <div class="grid grid-4">
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
      <div class="grid-item">
        <div class="block"></div>
      </div>
    </div>

CSSコード (4 ✖︎ 4のgridレイアウト)

.grid-4 .grid-item {
  width: 25%;
}

@media screen and (max-width: 768px) {
  .grid-4 .grid-item {
    width: 100%;
  }

.block {
  display: block;
  background: blue;
  width: 100%;
  min-height: 50px;
}

2. この構成だと何が良いか？
<div class="grid grid-4">が親要素、<div class="grid-item">が子要素、<div class="block"></div>が孫要素になります。

親要素の役割
→全体の箱としての役割。この中に何を入れるかは自由
子要素の役割
→縦を何列に設定するか、レスポンシブ対応させるかなど箱の中のレイアウトを作ってあげる
孫要素の役割
→ブロック一つ一つの詳細（色、横幅、高さ、要素）などを設定。

上記のように、親要素、子要素、孫要素で役割を分けてあげる事で、下記のメリットがある

目的に合わせて内容を変更しやすくなる
また、子要素、孫要素を変更するだけで、gridレイアウトを使い回す事が出切る

まとめ

親子要素と兄弟要素の関係を理解することで、HTMLの構造をしっかり作り、CSSでのスタイリングも効率的に行えます。この基礎を押さえておけば、ウェブページのレイアウトやデザインがスムーズに進められるようになります。今後のウェブ開発で、この知識を活用していこうと思います。

最後までご覧いただき本当にありがとうございました！！