【初心者向け】HTMLとCSSのレイアウト・セクション構成｜sectionとdivの違い・区切りの基準・実例コード

意味のある情報の塊で区切る。sectionは「章」、divは「箱」

ページは「意味のあるトピックごとの塊（セクション）」で区切ります。
セマンティック要素（header / nav / main / section / article / aside / footer）を優先し、 どうしても意味を付けられないときにdivで“箱”を作ってスタイルを当てます。

アクセシビリティ・SEO・メンテの3つが強くなる

• アクセシビリティ： セマンティック要素はスクリーンリーダー等に“ここは何の領域か”を伝えやすい（ランドマーク）。
• SEO： 意味構造が明確＝クローラが文脈を理解しやすい。適切な見出し階層は評価にも寄与。
• メンテ性： 「章立て」が明快だと、改修・追加が楽。CSSの責務分離もしやすい。

最小構成の“意味ある”ページ骨組み

<header>
  <h1>サイト名（ページ全体のタイトル）</h1>
  <nav aria-label="主なナビゲーション">...</nav>
</header>

<main id="main-content">
  <section aria-labelledby="about-title">
    <h2 id="about-title">私たちについて</h2>
    <p>サイトの概要...</p>
  </section>

  <section aria-labelledby="service-title">
    <h2 id="service-title">サービス</h2>
    <article>
      <h3>プランA</h3>
      <p>...</p>
    </article>
    <article>
      <h3>プランB</h3>
      <p>...</p>
    </article>
  </section>

  <aside aria-label="補足情報">最新記事・広告など</aside>
</main>

<footer>© 2025 Example</footer>

ポイント：mainは1ページ1つ。section直下には原則h2/h3...等の見出しを置き、章立てを明確に。

使い分け：sectionとdivの違い

section（意味あり）

• トピックが自立した “章” になっているとき。
• 見出し（h2/h3...）を持つのが基本。
• 例：会社概要、料金、事例、FAQ、問い合わせ など。

div（意味なしの箱）

• 純粋にレイアウト用・装飾用のグルーピング。
• 意味づけできない場合に限って使う。
• 例：グリッドの内側の列、カードの中のテキストラッパ、アイコンと文字の横並び など。

区切りの基準：どこでセクション分けする？（迷わない3ステップ）

1. 目的を一言で言えるか？（例：「料金を伝える」「事例で信頼を高める」）
2. 見出しを付けられるか？（付けられる＝sectionにする価値がある）
3. 独立しても文脈が保てるか？（Yesならsectionかarticle）

実装（Practice）：よくある3つのレイアウトパターン

① 1カラムLP（ヒーロー→ベネフィット→実績→FAQ→CTA）

<main>
  <section class="hero">...（ファーストビュー）...</section>
  <section class="benefits">...（ベネフィット）...</section>
  <section class="proof">...（実績・レビュー）...</section>
  <section class="faq">...（FAQ）...</section>
  <section class="cta">...（行動喚起）...</section>
</main>

:root { --container: 1100px; --gap: 24px; }
main > section { padding: 64px 20px; }
.container { width: min(100%, var(--container)); margin-inline: auto; }
.hero { min-height: 60vh; display: grid; place-items: center; }
.benefits .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .benefits .grid { grid-template-columns: 1fr; } }

② 2カラム（本文＋サイドバー）

<main class="l-two">
  <section class="content">...</section>
  <aside class="sidebar">...</aside>
</main>

.l-two { display: grid; gap: 32px; grid-template-columns: 1fr 320px; }
@media (max-width: 1024px) { .l-two { grid-template-columns: 1fr; } .sidebar { order: -1; } }

③ カードグリッド（実績・商品一覧）

<section class="cards">
  <h2>制作実績</h2>
  <div class="grid">
    <article class="card">...</article>
    <article class="card">...</article>
    <article class="card">...</article>
  </div>
</section>

.cards .grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { border: 1px solid #eee; border-radius: 12px; padding: 16px; }

見出し階層の作法（SEO×可読性）

• h1：ページ全体のタイトル（通常は1つ）
• h2：大見出し（主要セクション）
• h3：中見出し（セクション内の小テーマ）
• h4：補足・項目

見出しは順番を飛ばさない（h2→h4…は避ける）。各sectionの直下に見出しを置くとアウトラインが明快に。

セマンティック要素の選び方・早見表

ダメになりやすい例

何でもdivで包む

<div class="main">
  <div class="sec"><div class="ttl">会社概要</div> ... </div>
</div>

意味要素へ置き換え

<main>
  <section aria-labelledby="about-title">
    <h2 id="about-title">会社概要</h2>
    <p>...</p>
  </section>
</main>

CSSレイアウトの基礎：FlexとGridの使い分け

• Flexbox： 1次元（横一列/縦一列）の並び。ナビ、ボタン行、カードの整列。
• Grid： 2次元の配置。複雑なカードレイアウト、LPのセクション基盤。

/* 横並び（Flex） */
.nav { display: flex; gap: 16px; align-items: center; }

/* 2D配置（Grid） */
.features { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px){ .features { grid-template-columns: 1fr; } }

よくある質問（FAQ）

Q1. section直下に見出しは必須？

原則“必須”。章にはタイトルがあるからです。見出しが置けないならdivで十分な可能性が高いです。

Q2. articleとsectionの違いは？

articleはそれ単体で独立して成立（他ページに埋め込んでも意味が通る）。sectionはページを構成する章の一部。

Q3. SEO的にセクションの順番は重要？

重要性は文脈依存ですが、「ユーザーが知りたい順」「検索意図の順」「ビジネス上の訴求順」を一致させるのが基本。ヒーロー→価値→証拠→行動の流れは汎用性が高いです。

意味のある章立て＋正しい要素選択＝“プロっぽい”構造

• 「意味のある塊」で区切る → sectionに見出しを置く。
• 意味が付けられない箱はdivでOK。
• FlexとGridを使い分け、モバイル先行で余白・行間を設計。