HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<body>
ドキュメントの本体（Body）要素。ユーザーに表示されるすべてのコンテンツを内包します。
info
概要
<body> 要素は、HTMLドキュメント内で可視化されるすべての内容（テキスト、画像、リンク、テーブルなど）を格納します。ひとつのHTMLドキュメントには、必ず **1つの <head> 要素と 1つの <body> 要素** が含まれる必要があります。
この要素に設定された属性（例：背景色、フォント）は、ドキュメント全体に影響を与えますが、HTML5以降は**CSSでのスタイリングが強く推奨**されています。
play_circle
デモ (静的表示)
HTML (Source)
<body onload="alert('ドキュメントが完全に読み込まれました！')">
<h1>ページのメインコンテンツ</h1>
<p>ここは <body> タグの中です。</p>
</body>
Preview (Result)
ページのメインコンテンツ
ここは <body> タグの中です。
(※ onloadイベントは静的表示では機能しません)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| onload | ドキュメントが完全に読み込まれた時（すべての子要素、画像、スタイルシートなど）に実行されるJavaScriptを指定します。 |
| onunload | ユーザーがドキュメントを離れる時（ブラウザを閉じたり、別のページへ移動したりする時）に実行されるJavaScriptを指定します。 |
| onbeforeunload | ユーザーがページを離れる直前に実行されるJavaScriptを指定します。確認ダイアログ表示などに使用されます。 |
| onresize | ウィンドウのサイズが変更された時に実行されるJavaScriptを指定します。 |
| style | インラインCSSによるスタイリングを指定します（例: background-color: white;）。 |
| bgcolor | 【非推奨】背景色を指定します。HTML5では非推奨であり、CSSの background-color を使用すべきです。 |
code
実用例
1. ページロード完了時の処理（イベントハンドラ）
<body onload="initializePage()">
<script>
// ページ読み込み完了後に実行される関数
function initializePage() {
console.log('ページが初期化されました。');
}
</script>
<p>コンテンツ</p>
</body>
2. ページ離脱前の確認
<body onbeforeunload="return 'ページを離れてもよろしいですか？保存されていない変更は失われます。'">
<p>フォームの編集画面など</p>
</body>
3. 基本的な構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<header>ヘッダー</header>
<main>メインコンテンツ</main>
<footer>フッター</footer>
</body>
</html>
lightbulb
知っておくべき重要事項
security
イベントハンドラの使用について
onload や onunload などの属性に直接JavaScriptを記述することは、HTML4時代の手法であり、モダンな開発では非推奨です。**JavaScriptファイルを分離し、イベントリスナー（addEventListener）を使用して**処理を記述することが推奨されます。
accessibility_new
必須の要素
HTMLドキュメントは、
HTMLドキュメントは、
<!DOCTYPE html>, <html>, <head>, そしてこの <body> の4つの要素を基本構造として持っています。<body> はユーザーが視覚的に認識する部分のすべてを定義する、ドキュメントの核となる要素です。