• divタグとは
• レイアウトの基本構成
• コンテンツのグループ化
• CSSを適用する
• フレックスボックスでの配置
• グリッドレイアウトでの配置
• レスポンシブデザイン
• JavaScriptとの組み合わせ
• ネスト（入れ子）構造
• 具体的な使用例

divタグとは

<div>タグはHTMLのブロック要素で、主にコンテンツをグループ化し、ページのレイアウトを構築するために使われます。特にCSSと組み合わせることで、デザインの自由度が高まります。

レイアウトの基本構成

ウェブページのレイアウトを構成する際、<div>タグを使ってヘッダー、ナビゲーション、メインコンテンツ、フッターなどを分けることが一般的です。

<div id="header">ヘッダー</div>
<div id="nav">ナビゲーション</div>
<div id="main">メインコンテンツ</div>
<div id="footer">フッター</div>
    

コンテンツのグループ化

<div>タグを使用すると、関連する要素をまとめて一つのグループとして扱えます。

<div class="article">
    <h2>記事タイトル</h2>
    <p>記事の本文…</p>
</div>
    

CSSを適用する

<div>タグにCSSを適用することで、デザインをカスタマイズできます。

<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: lightblue;
    }
</style>
<div class="box">青いボックス</div>
    

フレックスボックスでの配置

フレックスボックスを使うと、<div>タグの配置が簡単になります。

<style>
    .container {
        display: flex;
        justify-content: space-between;
    }
    .item {
        width: 100px;
        height: 100px;
        background-color: lightcoral;
    }
</style>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
    

グリッドレイアウトでの配置

CSSのグリッドを使って、柔軟なレイアウトを作成できます。

<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .grid-item {
        background-color: lightgreen;
        padding: 20px;
        text-align: center;
    }
</style>
<div class="grid-container">
    <div class="grid-item">A</div>
    <div class="grid-item">B</div>
    <div class="grid-item">C</div>
</div>
    

レスポンシブデザイン

<div>を活用して、画面サイズに応じたデザインを作成できます。

<style>
    .responsive-box {
        width: 100%;
        max-width: 600px;
        background-color: yellow;
    }
</style>
<div class="responsive-box">レスポンシブなボックス</div>
    

JavaScriptとの組み合わせ

JavaScriptと組み合わせることで、インタラクティブな動作を追加できます。

<script>
    function changeColor() {
        document.getElementById("colorBox").style.backgroundColor = "red";
    }
</script>
<div id="colorBox" style="width:100px; height:100px; background-color:blue;"></div>
<button onclick="changeColor()">色を変える</button>
    

ネスト（入れ子）構造

<div>は入れ子にすることで、より複雑なレイアウトを作成できます。

<div class="outer">
    <div class="inner">入れ子の要素</div>
</div>
    

具体的な使用例

<div>タグを活用した実際のレイアウト例を紹介します。

<div id="container">
    <div id="header">サイトのヘッダー</div>
    <div id="content">
        <div id="sidebar">サイドバー</div>
        <div id="main">メインコンテンツ</div>
    </div>
    <div id="footer">フッター</div>
</div>
    

<div>タグはHTMLで非常に多くの用途に使われます。CSSやJavaScriptと組み合わせることで、さまざまなデザインや機能を実現できます。