Yugien - 遊戯苑
テーマ

HTML

この記事では、画面に表示する文章や操作部品をまとめる<body>要素の役割と、設定を置く<head>との違いを初心者向けに説明します。

この記事でわかること

The HTML <body> element represents the document’s content area shown to users, and it is always present in the DOM even if you omit the tag in markup.

body要素

<body> は、ページに表示される本文（見出し・文章・画像・フォームなど）をまとめる要素です。HTMLとして <body> の開始/終了タグを省略できる場合もありますが、DOM上では常に document.body として存在します。

このページでできるようになること

まずは直感：<body> って何？

ざっくり言うと、<body> は「ブラウザに表示される中身の箱」です。

正確な定義（仕様に沿った説明）

何のために存在するか

<body> は、文書の「内容（content）」を表す要素です。ユーザーに表示され、ユーザーが操作する対象（リンク、フォーム、ボタンなど）を含みます。

何に適用されるか（位置）

<body> は <html> の子要素として1つだけ置きます。典型的には <head> の後に置かれます。

できること / できないこと（制約）

できること
  • 表示される本文（フローコンテンツ）をまとめる
  • ページ全体に効く基準スタイル（背景、文字色、余白など）を設定する
  • イベント属性（onload など）を使って、文書読み込みのタイミングにフックできる（ただし実務ではJS側での登録が主流）
できないこと（重要）
  • <body> を複数置くこと（HTMLとして不正）
  • <head> に置くべきメタ情報（<title> や <meta>）を置くこと
  • 本文以外の「文書全体の外枠」を表現すること（その役割は <html>）

内容モデル（中に入れられるもの）

<body> の中は基本的に「フローコンテンツ」です。細かい分類は試験では用語として問われることがありますが、実務では次の感覚で十分です。

入れる
見出し（<h1> 等）、段落（<p>）、画像（<img>）、リスト（<ul>）、フォーム（<form>）、セクション（<main>/<section>/<article>）など
入れない
<title>、<meta>、<link> などのメタデータ要素（原則 <head>）

基本の書き方（最短の型）

最小サンプル（コピペ用）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ページタイトル</title>
</head>
<body>
    <h1>見出し</h1>
    <p>ここが本文です。</p>
</body>
</html>

まずは「<head> に設定、<body> に本文」を分けて書くのが最短です。

よく使う指定／典型パターン

全体テーマの切り替え（クラスを付ける）
<body class="theme-dark"> のように、ページ全体の状態を class で表す
ヘッダー固定などでスクロールを止める
body { overflow: hidden; }（戻し忘れると「スクロールできない」事故になる）
デフォルト余白を消す
body { margin: 0; }（デザインシステムやリセットCSSでよく行う）

開始/終了タグの省略ルール（試験で狙われる）

<body> の開始タグ・終了タグは、条件を満たすと省略できます。ただし、省略できる＝存在しないではありません（DOMには作られます）。

開始タグを省略できる典型
<head> が終わった直後に本文コンテンツが始まる場合（ブラウザが <body> を補う）
終了タグを省略できる典型
文書の末尾が <body> の内容で終わる場合（続く兄弟要素がない）
省略しない方が安全な場面（実務）
テンプレート分割、サーバーサイドの差し込み、複数人編集などで、境界が曖昧になるとき

デモ：<body> にクラスを付け替えて、全体の挙動を確認する

実務では <body> に class を付けて「ページ全体の状態（モーダル表示中、テーマ切替など）」を表すことが多いです。ここでは3つの典型操作をボタンで切り替えます。

A) 背景を変える（テーマ切替のイメージ）

背景は body に指定すると、ページ全体に一貫して効かせやすいです。

B) 余白を消す（margin: 0）

リセットCSSが入ると「余白が消える」ので、仕様として把握しておくと事故りません。

C) スクロールを止める（overflow: hidden）

モーダル中に使いがちですが、戻し忘れると「スクロールできない」事故になります。

現在の状態（body.className）

loading…

DevTools では Elements パネルで <body> のクラス付け替えを確認できます。

JavaScript

document.addEventListener("click", (e) => {
    const btn = e.target.closest("[data-demo-body]");
    if (!btn) return;

    document.body.classList.toggle("demoBodyBg", btn.dataset.demoBody === "bgOn");
    document.body.classList.toggle("demoBodyNoMargin", btn.dataset.demoBody === "noMarginOn");
    document.body.classList.toggle("demoBodyNoScroll", btn.dataset.demoBody === "noScrollOn");
});

よくある事故と回避策

事故：<body> が2つある（テンプレ結合で起きがち）
原因：部分テンプレートに <body> まで含めてしまった。対策：レイアウト側に <body> を固定し、部分テンプレートは本文だけを差し込む。
事故：ページの初期余白が思った通りじゃない
原因候補：ブラウザ既定の body の margin / リセットCSS / 共通CSS。確認：DevTools の Computed で margin を見る。
事故：スクロールできない
原因候補：overflow: hidden を body か html に付けたまま。確認：Computed の overflow と、どの要素に指定されているか。
事故：JSで document.body が null になる
原因：<body> 生成前に実行している。対策：defer を使う、または DOMContentLoaded 後に実行する。

試験（HTML5プロ レベル1）でのチェックポイント

まとめ：迷ったときの判断軸（短いチェックリスト）