body の属性

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

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

イベント属性は非推奨

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

// ❌ 非推奨: 
// ✅ 推奨: 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; } です。ブラウザ既定では に 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 を に対して書きます。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 ではドキュメントの構造をセクション要素のネストで表現します。 はトップレベルのセクションルートで、見出し (

〜

) と組み合わせて Outline (見出し階層) を構成します。スクリーンリーダーや SEO クローラーがこの構造を解釈します。

script の配置位置

パフォーマンスのため、

document.body と DOM API

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

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

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

// データ属性
body.dataset.page = 'home';  // 

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

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

noscript と dialog

    

    

        
本当に削除しますか?
        

            キャンセル
            OK