模写コーディングの過程で、「ヘッダーとメインコンテンツの背景を同じ色（または画像）でつなげたい」という場面に出くわしました。
いざ実装しようとすると、HTMLのセマンティクス（意味）とデザインの見た目上の要請が衝突し、どのように書くのが正解か迷うことがありました。
この記事では、その疑問を整理しながら、HTML5 の基本ルールを守りつつ、見た目も破綻しない実装パターンを3つ紹介します。
やりたいこと
- ヘッダー（ロゴ・ナビ）と Hero エリア を 1 つの大きな背景にまとめたい
- Hero エリアの後ろからは通常の白背景で記事が続く
よくないやり方
<header class="hero-area">…</header>
<div class="timer hero-area">…</div>
| 問題点 | なぜ問題か |
|---|---|
| 構造と役割の混乱 | 意味の異なる要素に同じクラスを付けると「このクラスは何を示すのか？」が判別しづらく、HTML を読むだけで構造が把握しにくい |
| スタイルの分散 | 背景色や余白などのスタイルが複数タグに広がり、一箇所で調整できず副作用が出やすい |
| 再利用しづらい |
.hero-area が特定画面に強く依存し、別画面で流用しようとするとレイアウト崩れなどのトラブルになりやすい |
よりよい 3 つのパターン
パターン A — <main> を外に出し、Hero を <section> として内包（推奨）
<header class="site-header">…ナビ…</header>
<main>
<section class="hero-area">
<!-- Hero コンテンツ -->
</section>
<section class="content">
…記事本文…
</section>
</main>
ポイント
-
<main>は 1 ページに 1 つ の原則を順守 - Hero と本文を 兄弟
<section>として並べ、構造が明快 - ヘッダーの背景は透過させるか、Hero 上端まで背景を延ばす
パターン B — ラッパーで <header> + <main> を包む
<div class="hero-area">
<header class="site-header">…ナビ…</header>
<main>
<!-- Hero コンテンツ -->
</main>
</div>
<section class="content">
…記事本文…
</section>
- Hero 用
<main>しか存在しない ⇒ 後続コンテンツは<section>等で構造化 - セマンティクス的には ややグレー だが、コードが最小で中央寄せが楽
パターン C — .hero-area を 2 つ配置してヘッダーと Hero を分割
<div class="hero-area">
<header class="site-header">…ナビ…</header>
</div>
<main>
<div class="hero-area">
<!-- Hero コンテンツ -->
</div>
<section class="content">
…記事本文…
</section>
</main>
メリット
-
<header>はページ先頭、<main>は 1 つ、セマンティクスは問題ない -
.hero-areaクラスは 1 か所に定義 すれば OK
デメリット
- HTML だけ見た人には Hero が 2 つある 構造に見える
- 2 つの
.hero-areaが ピタッと重ならないと隙間 が出るおそれ - 高さ調整を誤ると背景が切れる
比較
| 案 | セマンティクス | 実装難度 | 採用場面 |
|---|---|---|---|
| A | ◎ 正しい | ○ 普通 | 基本形 |
| B | △ ややズレ | ◎ 最短 | スピード重視 |
| C | ◎ 正しい | △ 手間 | LP など |
まとめ
- パターン A を選べば間違いなし
- パターン B はプロトタイプや小規模サイトで有効
- パターン C はヘッダーを独立制御したい LP 向け
- どの案でもクラス名とコメントで意図を明示するとチーム全体で迷わない
感想
模写コーディングを通して、HTMLには意味としての正しさと見た目としての美しさの両立が求められることを実感しました。
見た目が整っていればいいように感じてしまいがちですが、構造を意識して記述することで、後々の保守や拡張が格段に楽になると感じました。