コンテンツにスキップ

HTML Living Standard/body

リンクを追加
出典: フリー教科書『ウィキブックス（Wikibooks）』

body 要素

[編集]

<body> 要素は、HTML文書の主要なコンテンツを含む要素です。ユーザーに表示されるすべての要素（テキスト、画像、動画、リンク、フォームなど）は、通常この要素内に記述されます。

HTML Living Standardでは、<body> 要素は文書の構造を形成する中心的な役割を担います。

基本構造

[編集]

以下は、<body> 要素を含むHTML文書の基本構造の例です： 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example Document</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is an example of content within the <code>body</code> element.</p>
    <img src="example.jpg" alt="Example Image">
  </body>
</html>

<body> 要素は、文書内で1つだけ存在する必要があります。

属性

[編集]

<body> 要素には、以下の属性を指定することができます。

グローバル属性

[編集]

すべてのグローバル属性（id、class、style、data-* など）が使用可能です。これにより、<body> 要素にスタイルを適用したり、JavaScriptで操作したりすることができます。

イベントハンドラー属性

[編集]

<body> 要素には、ページ全体のイベントに関連する属性を指定することができます。 これらのイベントは、ページのライフサイクルや状態の変化、あるいはシステムレベルのイベントに応じて発火します。 それぞれのイベントを理解して活用すれば、よりインタラクティブでユーザーフレンドリーなウェブアプリケーションを構築できます。

以下は、それぞれのイベントの簡単な説明と、よくある用途についてまとめたものです。

onafterprint / onbeforeprint
[編集]
  • 説明: 印刷操作の前後に発火します。
  • 用途: 印刷用のスタイルを適用したり、印刷後に画面の状態をリセットしたりする。
    例
    window.onbeforeprint = () => console.log("印刷前の準備を開始します");
window.onafterprint = () => console.log("印刷が終了しました");
onbeforeunload
[編集]
  • 説明: ページ離脱前に発火します。
  • 用途: ユーザーが保存していない作業を警告する。
  • 注意: モダンブラウザでは確認メッセージが制限されている。
    例
    window.onbeforeunload = (e) => {
  e.preventDefault();
  e.returnValue = "変更内容が失われる可能性があります。";
};
onhashchange
[編集]
  • 説明: URLのハッシュ部分（#example）が変更されたときに発火します。
  • 用途: SPA（シングルページアプリケーション）での画面切り替え管理。
    例
    window.onhashchange = () => console.log("ハッシュが変更されました: ", location.hash);
onlanguagechange
[編集]
  • 説明: ユーザーの言語設定が変更されたときに発火します。
  • 用途: 動的に表示言語を変更する必要があるアプリケーションで使用。
    例
    window.onlanguagechange = () => console.log("言語設定が変更されました");
onload
[編集]
  • 説明: ページがロードされた直後に発火します。
  • 用途: セッション開始処理やログ送信。
    例
    window.onload = () => console.log("ページがロードされました");
onmessage / onmessageerror
[編集]
  • 説明: postMessage API を使用してデータを受信したとき、またはエラーが発生したときに発火します。
  • 用途: Web Worker や iframe 間の通信に使用。
    例
    window.onmessage = (e) => console.log("メッセージを受信しました: ", e.data);
window.onmessageerror = () => console.error("メッセージ受信エラー");
onoffline / ononline
[編集]
  • 説明: ネットワーク状態がオフラインまたはオンラインに変化したときに発火します。
  • 用途: オフライン状態に応じてアプリの挙動を切り替える。
    例
    window.onoffline = () => console.log("オフライン状態です");
window.ononline = () => console.log("オンライン状態に戻りました");
onpagehide / onpageshow
[編集]
  • 説明: ページが非表示または表示されたときに発火します。
  • 用途: ページキャッシュからの復元処理やリソース管理。
    例
    window.onpageshow = (e) => console.log("ページが表示されました", e.persisted ? "キャッシュから復元" : "新規表示");
window.onpagehide = () => console.log("ページが非表示になりました");
onpopstate
[編集]
  • 説明: history.pushState やブラウザの「戻る/進む」操作で発火します。
  • 用途: SPA でのナビゲーション管理。
    例
    window.onpopstate = (e) => console.log("状態が変更されました: ", e.state);
onstorage
[編集]
  • 説明: 同じオリジン内で localStorage または sessionStorage が変更されたときに発火します。
  • 用途: 別タブでのデータ同期。
    例
    window.onstorage = (e) => console.log(<code>${e.key} が変更されました: 新しい値=${e.newValue}</code>);
onunhandledrejection / onrejectionhandled
[編集]
  • 説明: Promise の拒否がハンドルされない場合、または後からハンドルされた場合に発火します。
  • 用途: 非同期エラーのグローバル監視。
    例
    window.onunhandledrejection = (e) => console.warn("未処理のPromise拒否: ", e.reason);
window.onrejectionhandled = (e) => console.log("拒否がハンドルされました: ", e.reason);
onunload
[編集]
  • 説明: ページがアンロードされる直前に発火します。
  • 用途: セッション終了処理やログ送信。
    例
    window.onunload = () => console.log("ページがアンロードされます");
注意点

これらのイベントは、多くが Window オブジェクトに関連付けられているため、<body> 要素のイベント属性として定義する場合でも window によって発火します。特にモバイル環境やブラウザによる挙動の違いを考慮して実装することが重要です。

特定のスタイル属性（非推奨）

[編集]

以前のHTML仕様では、bgcolor、text、link、vlink、alink などの属性が使用されていましたが、これらはHTML Living Standardでは非推奨となり、CSSを使用してスタイルを適用することが推奨されています。 

<!-- 非推奨の例 -->
<body bgcolor="lightblue" text="black">
<!-- 推奨されるCSSの例 -->
<body style="background-color: lightblue; color: black;">

子要素

[編集]

<body> 要素内には、以下を含むあらゆるHTML要素を配置できます：

  • セクション要素（例：<header>、<nav>、<main>、<footer>）
  • テキストコンテンツ（例：<p>、<h1>～<h6>）
  • インタラクティブ要素（例：<button>、<a>、<form>）
  • 埋め込みコンテンツ（例：<img>、<video>、<iframe>）
<body>
  <header>
    <h1>Site Header</h1>
  </header>
  <main>
    <p>This is the main content of the page.</p>
    <img src="image.jpg" alt="An example image">
  </main>
  <footer>
    <p>Footer content here.</p>
  </footer>
</body>

使用上の注意

[編集]
  1. 1つだけ存在するルール: HTML文書には1つの <body> 要素しか記述できません。
  2. 非推奨属性の使用回避: bgcolor や text 属性は使用せず、CSSを活用してください。
  3. JavaScriptの適切な利用: onload や onunload 属性を使用する際は、過剰に依存せず、必要最小限に留めましょう。

関連仕様

[編集]

<body> 要素の定義は、以下の仕様で確認できます：

"https://ja.wikibooks.org/w/index.php?title=HTML_Living_Standard/body&oldid=267160" より作成