◀ 3.

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>© 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 と相性良し。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. html要素
  2. head要素
  3. body要素
  4. title要素
  5. base要素
  6. meta要素
  7. div要素
  8. span要素
  9. header要素
  10. HTML5 footer 要素の使い方（フッター・コピーライト・連絡先）
  11. main要素
  12. address要素
2026-06-11 07:12:00 guest 233

人気ページ

最近更新/作成されたページ