JavaScript | HTML / CSS 連携：HTML基礎 － div要素

div 要素は「意味のついていない“箱”」＝レイアウト用のコンテナ

まず一番大事なことから。

<div> は
「特別な意味を持たない、ただの“箱（コンテナ）”」 です。

「段落」でもない
「見出し」でもない
「ボタン」でもない

そういう「意味の名前がつけられないまとまり」を
ひとまずまとめておくための箱が <div> です。

だからこそ便利で、だからこそ乱用されやすい要素でもあります。
本当に意味のあるタグ（<header>, <main>, <section>, <p>, <button> など）が使えるなら、
そちらを優先して、どうしても当てはまらないときに <div> を使う、という感覚が大事です。

div の基本的な使い方とイメージ

「ひとまとまりのブロック」を作るための箱

例えば、プロフィールカードのようなものを作るとします。

<div class="profile-card">
  <h2>山田太郎</h2>
  <p>フロントエンドエンジニア</p>
  <p>東京在住。コーヒーと猫が好きです。</p>
</div>

ここで <div class="profile-card"> は、
「プロフィールカード一式」をひとまとめにする箱です。

<h2> や <p> はそれぞれ意味を持っていますが、
それらを「一つのコンポーネント」として扱いたいときに
外側に <div> を置くと扱いやすくなります。

CSS では、このクラスを使って見た目を整えます。

.profile-card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
  max-width: 320px;
}

このように、
「意味のある要素たちを、レイアウトやスタイルのためにまとめる箱」
として <div> を使うのが基本です。

div は「意味がない」からこそ、意味のあるタグを優先する

なんでもかんでも div にしない

初心者がやりがちなパターンは、
全部を <div> だけで書いてしまうことです。

悪い例：

<div class="title">自己紹介</div>
<div class="text">こんにちは。山田太郎です。</div>
<div class="text">東京でエンジニアをしています。</div>

これは、見た目は作れても
HTML 的には「意味が伝わらない」構造です。

正しい方向性はこうです。

<h1>自己紹介</h1>
<p>こんにちは。山田太郎です。</p>
<p>東京でエンジニアをしています。</p>

ここでは、
「タイトル」は <h1>
「文章」は <p>

と、意味のあるタグを使っています。

その上で、どうしてもレイアウトのために箱が必要なら、
外側に <div> を置きます。

<div class="intro">
  <h1>自己紹介</h1>
  <p>こんにちは。山田太郎です。</p>
  <p>東京でエンジニアをしています。</p>
</div>

この順番がとても大事です。

先に意味のあるタグを選ぶ
足りないときにだけ div で「箱」を作る

「とりあえず全部 div」は、
後から必ず自分の首を絞めます。

レイアウトと div：グリッドやフレックスの“枠”として使う

横並び・縦並びのグループを作る

CSS の Flexbox や Grid と組み合わせるとき、
<div> は「並べる対象の親コンテナ」としてよく使われます。

例：カードを横に並べる

<div class="card-list">
  <div class="card">
    <h2>記事タイトル 1</h2>
    <p>概要テキストが入ります。</p>
  </div>
  <div class="card">
    <h2>記事タイトル 2</h2>
    <p>概要テキストが入ります。</p>
  </div>
  <div class="card">
    <h2>記事タイトル 3</h2>
    <p>概要テキストが入ります。</p>
  </div>
</div>

CSS：

.card-list {
  display: flex;
  gap: 16px;
}

.card {
  border: 1px solid #ddd;
  padding: 12px;
  flex: 1;
}

ここでの役割はこうです。

.card-list の div
「カードたちを横に並べるための親コンテナ」

.card の div
「1 枚のカードをひとまとめにする箱」

どちらも「特定の意味を持つコンテンツ」ではなく、
レイアウトとスタイルのための箱 として使っています。

JavaScript と div：コンポーネントの“入れ物”として使う

動的に中身を入れ替える場所としての div

JavaScript で動的にコンテンツを差し替えるとき、
<div> は「中身を入れ替える枠」としてよく使われます。

例：タブ切り替えのコンテンツ

HTML：

<div class="tabs">
  <button data-tab="profile">プロフィール</button>
  <button data-tab="works">制作実績</button>
</div>

<div id="tabContent"></div>

JavaScript（イメージ）：

const content = document.querySelector("#tabContent");

function showProfile() {
  content.innerHTML = `
    <h2>プロフィール</h2>
    <p>東京在住のエンジニアです。</p>
  `;
}

function showWorks() {
  content.innerHTML = `
    <h2>制作実績</h2>
    <p>Web アプリや LP の制作を行っています。</p>
  `;
}

const content = document.querySelector("#tabContent");

function showProfile() {
  content.innerHTML = `
    <h2>プロフィール</h2>
    <p>東京在住のエンジニアです。</p>
  `;
}

function showWorks() {
  content.innerHTML = `
    <h2>制作実績</h2>
    <p>Web アプリや LP の制作を行っています。</p>
  `;
}

ここで #tabContent の <div> は、
「タブに応じて中身が変わるコンテンツ領域」という“箱”です。

このように、
「ここに何かを描画する」「ここを JS で差し替える」
という場所として <div> を使うのは、とても自然な使い方です。

セマンティックな要素との違いを意識する

div と section / main / header などの使い分け

HTML5 には、意味のある「箱」も増えました。

<header>
ページやセクションのヘッダー部分

<main>
ページの主な内容

<section>
意味のあるまとまり（トピック）

<article>
独立した記事・コンテンツ

これらが使える場面では、
<div> よりもこちらを優先した方が
構造が分かりやすくなります。

例：お知らせセクション

悪い例（全部 div）：

<div class="section">
  <div class="title">お知らせ</div>
  <div class="item">新メニューを追加しました。</div>
</div>

より良い例：

<section class="news">
  <h2>お知らせ</h2>
  <p>新メニューを追加しました。</p>
</section>

それでも、
細かいレイアウト調整や、
セマンティック要素の中でさらに箱が必要なときには
<div> が活躍します。

「意味の名前を付けられるならセマンティック要素」
「どうしても名前が付けられない箱は div」
という意識を持てると、使い分けがうまくなります。

初心者として「div 要素」で絶対に掴んでほしいこと

<div> は、
「特別な意味を持たない、レイアウトとグルーピングのための箱」 です。

意味のあるタグ（h1, p, button, section, header など）が使えるならそちらを優先する
コンポーネントやカードなど「ひとかたまり」をまとめる外側の箱として使う
Flexbox や Grid の“親コンテナ”としてレイアウトに使う
JavaScript で中身を差し替える“描画領域”として使う
「とりあえず全部 div」はやめて、「意味を考えてから div にする」

あなたが <div> を書くときに、
「この箱にはどんな“意味”がある？ それとも本当に“意味のない箱”でいい？」
と一度立ち止まれるようになったら、
もう div を“便利なゴミ箱”ではなく、“意図のあるコンテナ”として扱えている状態です。