この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
ページ更新者:guest
更新日時:2026-06-11 07:10:02

タイトル: body要素
SEOタイトル: HTML body 要素完全ガイド

この記事の要点
  • <body> は HTML ドキュメントの表示コンテンツを格納するルート要素
  • 直下には <header> / <main> / <footer> 等のセクション要素を配置するのが現代的
  • onload / onunload 等のイベント属性は非推奨、addEventListener を使う
  • CSS で body { margin: 0; } はリセット CSS の定番。ブラウザ既定の 8px 余白を消す
  • Dark Mode は color-scheme: dark light + prefers-color-scheme メディアクエリで実装

<body> の役割

<body> 要素は HTML ドキュメントにおける表示コンテンツのルートコンテナです。ブラウザがユーザーに見せるテキスト、画像、フォーム、スクリプトなど、ほぼすべての可視要素は <body> の内側に配置されます。HTML ドキュメントには <body> がただ 1 つ存在し、<head> と兄弟関係になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
</head>
<body>
    <header>
        <h1>サイトタイトル</h1>
        <nav>...</nav>
    </header>
    <main>
        <article>...</article>
    </main>
    <footer>
        <small>&copy; 2026 Example</small>
    </footer>
</body>
</html>

HTML5 のセクション要素

HTML5 では <body> 直下を、用途別のセマンティック要素で構造化するのが推奨されています。<div> ばかり並べる旧来の書き方より、SEO・アクセシビリティ・保守性が向上します。

要素用途ARIA role
<header>ページ/セクションの先頭 (ロゴ、見出し、ナビ)banner
<nav>ナビゲーションリンクの集まりnavigation
<main>ページの主コンテンツ (1 ページに 1 つ)main
<article>独立した記事 (ブログ投稿、商品情報)article
<section>関連するコンテンツのまとまりregion
<aside>補足情報、サイドバーcomplementary
<footer>ページ/セクションの末尾 (著作権、関連リンク)contentinfo

body の属性

かつての HTML4 では bgcolor、text、link、vlink、background 等の見た目属性が定義されていましたが、HTML5 ではすべて廃止されました。スタイルは CSS で指定します。

現在使われる属性は、グローバル属性 (id / class / lang / dir 等) とイベント属性のみです。

<!-- ❌ 古い書き方 (HTML4) -->
<body bgcolor="#fff" text="#333" link="#0066cc" onload="init()">

<!-- ✅ 現代的な書き方 -->
<body class="theme-light" data-page="home">

イベント属性は非推奨

onload / onunload / onbeforeunload 等のイベント属性を <body> に直接書く方法は動きますが、CSP (Content Security Policy) の inline スクリプト禁止に引っかかり、保守性も低いため非推奨です。

// ❌ 非推奨: <body onload="...">
// ✅ 推奨: addEventListener
window.addEventListener('load', () => {
    console.log('ページ読み込み完了');
});

window.addEventListener('DOMContentLoaded', () => {
    // DOM 構築完了 (load より早い)
});

window.addEventListener('beforeunload', (e) => {
    // ユーザーがページを離れる直前
    e.preventDefault();
    e.returnValue = '';  // 確認ダイアログ表示
});

CSS で body をスタイリング

リセット CSS の基本は body { margin: 0; } です。ブラウザ既定では <body> に 8px の余白が入っており、これを消さないとフルワイドのレイアウトが組めません。

/* リセット CSS の基本 */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ページ全体の高さを 100% に */
html, body {
    height: 100%;
}

/* スクロールバーで横揺れしないように */
html {
    overflow-y: scroll;
}

Dark Mode 対応

OS の設定 (ライト/ダーク) に追従する CSS を <body> に対して書きます。color-scheme プロパティを宣言すると、スクロールバーやフォーム要素の色も自動でダーク化されます。

:root {
    color-scheme: light dark;  /* ブラウザのデフォルト UI を両対応 */
}

body {
    background: #fff;
    color: #333;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        color: #e5e5e5;
    }
}

/* CSS Variables での実装 */
body {
    --bg: #fff;
    --fg: #333;
    background: var(--bg);
    color: var(--fg);
}
@media (prefers-color-scheme: dark) {
    body {
        --bg: #1a1a1a;
        --fg: #e5e5e5;
    }
}

HTML5 Outline と body

HTML5 ではドキュメントの構造をセクション要素のネストで表現します。<body> はトップレベルのセクションルートで、見出し (<h1>〜<h6>) と組み合わせて Outline (見出し階層) を構成します。スクリーンリーダーや SEO クローラーがこの構造を解釈します。

script の配置位置

パフォーマンスのため、<script> は <body> の閉じタグ直前か、<head> 内で defer / async 属性付きで読み込みます。

<head>
    <!-- 推奨: defer (DOM 構築後に実行) -->
    <script defer src="/js/app.js"></script>
    <!-- 推奨: async (依存なし、即実行) -->
    <script async src="https://www.googletagmanager.com/gtag/js"></script>
</head>
<body>
    <!-- コンテンツ -->

    <!-- または末尾に置く (古典的) -->
    <script src="/js/app.js"></script>
</body>

document.body と DOM API

JavaScript から <body> 要素にアクセスする標準 API:

// body 要素を取得
const body = document.body;

// クラスを追加 (テーマ切替)
body.classList.add('theme-dark');
body.classList.toggle('menu-open');

// データ属性
body.dataset.page = 'home';  // <body data-page="home">

// スクロール位置
window.scrollY;              // 現在のスクロール量
body.scrollHeight;           // ページ全体の高さ
window.innerHeight;          // ビューポート高さ

// スクロールロック (モーダル表示時)
body.style.overflow = 'hidden';

noscript と dialog

<noscript> は JavaScript 無効時のフォールバック。<dialog> は HTML5.2+ のネイティブモーダルで、<body> 内に配置します。

<body>
    <noscript>
        <p>このサイトは JavaScript が必要です。有効化してください。</p>
    </noscript>

    <dialog id="confirm-dialog">
        <p>本当に削除しますか?</p>
        <form method="dialog">
            <button value="cancel">キャンセル</button>
            <button value="ok">OK</button>
        </form>
    </dialog>

    <script>
    const dlg = document.getElementById('confirm-dialog');
    dlg.showModal();  // モーダル表示
    </script>
</body>

FAQ

Q: <body> は省略できる?
A: HTML5 仕様上は省略可能 (パーサが自動補完) ですが、明示的に書くべきです。CSS 適用やイベント属性、可読性のためにも省略しないでください。

Q: <body> に背景画像を設定するには?
A: CSS で body { background: url(bg.jpg) no-repeat center/cover fixed; }。HTML4 の background 属性は廃止です。

Q: body の高さを画面いっぱいにしたい
A: html, body { height: 100%; } または body { min-height: 100vh; }。後者の方が現代的で flex/grid と相性良し。