divタグの基本的な使い方ガイド！初心者でも楽しく学ぼう
1. divタグって何？
divタグの要素の役割について
divタグの使い方
1. divタグの基本的な書き方
2. 実際にdivタグをいじってみよう！
ウェブサイトのコンテンツ
1. divタグでグループ化するときの書き方
2. divタグでグループ化またはスタイルの適用
divタグのまとめ

divタグの基本的な使い方ガイド！初心者でも楽しく学ぼう

divタグって何？

divタグは、ウェブページの部分をグループ化するための便利なツールです。

グループ化することで、スタイルやデザインを効率的に適用できるようになります。

コンテンツのグループ化：関連する要素を一つのグループにまとめるために使用されます。例えば、記事内の段落や見出しをdivタグで囲んでグループ化することができます。

スタイルの適用：divタグにはCSSのクラスやIDを追加することができ、スタイルの適用範囲を指定することができます。これにより、特定の要素やセクションに対して独自のスタイルを適用することができます。

HTML のコンテンツ区分要素 (<div>) は、フローコンテンツの汎用コンテナーです。 CSS を用いて何らかのスタイル付けがされる (例えば、スタイルが直接適用されたり、親要素にフレックスボックスなどの何らかのレイアウトモデルが適用されるなど) までは、コンテンツやレイアウトには影響を与えません。
参考：mdn web docs

divタグの要素の役割について

divタグは単なるコンテナであり、特定の意味を持つ要素ではありません。そのため、意味的な情報を伝えることはありませんが、以下の役割を果たします。

グループ化とセクション分け：関連する要素をまとめ、ページのセクションを作成します。これにより、コンテンツの意味や構造を明確にすることができます。
スタイルの適用：CSSクラスやIDを使用してdivタグにスタイルを適用することができます。これにより、特定の要素やセクションに対してスタイリングを行うことができます。
JavaScriptとの連携：divタグにはイベントハンドラやJavaScriptの処理を追加することができます。これにより、ユーザーの操作に応じた動的な振る舞いを実現することができます。

divタグの使い方

グループ化したい部分を選んでみましょう！例えば、ヘッダー、メニュー、コンテンツなどです。
divタグを使うには、HTMLで <div></div> のように囲んであげます。

divタグの基本的な書き方

<div>
  ここに大切なコンテンツが入ります！
</div>

実際にdivタグをいじってみよう！

レイアウトを組む際にセクションを作成しましょう。
グループごとに背景色やボーダーを設定してページを彩りましょう。

<body>
  <!-- ヘッダーセクション -->
  <div class="header1">
    <h1>ウェブサイトのヘッダー</h1>
  </div>

  <!-- メニューセクション -->
  <div class="menu1">
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>

  <!-- コンテンツセクション -->
  <div class="content1">
    <h2>ウェブサイトのコンテンツ</h2>
    <p>ここに大切な情報やコンテンツが入ります。</p>
  </div>

  <!-- フッターセクション -->
  <div class="footer1">
    <p>© 2023 ウェブサイト名. All rights reserved.</p>
  </div>
</body>

 /* 全体のスタイル */
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    /* ヘッダーセクション */
    .header1 {
      background-color: #3498db;
      color: white;
      text-align: center;
      padding: 20px;
    }

    /* メニューセクション */
    .menu1 {
      background-color: #2ecc71;
      text-align: center;
      padding: 10px;
    }

    /* コンテンツセクション */
    .content1 {
      background-color: #f39c12;
      padding: 20px;
    }

    /* フッターセクション */
    .footer1 {
      background-color: #e74c3c;
      color: white;
      text-align: center;
      padding: 10px;
    }

⇓プレビュー

ウェブサイトのヘッダー

ウェブサイトのコンテンツ

ここに大切な情報やコンテンツが入ります。

⇑プレビュー

このコードでは、各セクションごとに異なる背景色とスタイルが適用され、ウェブページが彩られることになります。

divタグとCSSの組み合わせ

上の各セクションのクラス名（header、menu、content、footer）に対してCSSでスタイルを指定し、色やフォントサイズなどデザインをカスタマイズして実際に試してみてください。

理解がより深まるはずです。

divタグでグループ化するときの書き方

<div class="wrap">
  <article>
    <h1>見出し</h1>
　　<p>ここに記事が入ります</p>
  </article>
</div>

上記の例では、divタグの開始タグ<div>と終了タグ</div>の間にコンテンツが挿入されます。このコンテンツはグループ化され、divタグによって囲まれたセクションとして扱われます。

divタグでグループ化またはスタイルの適用

この例では、containerというCSSクラスを持つdivタグで要素をグループ化しています。このdivタグには背景色のbackground-colorなど特定のスタイルを適用することができます。

<div class="container">
  <h1 class="text-color">見出し</h1>
  <p>ここに文章がはいります</p>
  <img src="image.jpg" alt="Image">
</div>

.container {
  background-color: #999;
  text-align: center;
  padding: 30px;
}
h1.text-color {
  color: #fff;
}