body 要素についてまとめてみた。【初心者向け】

2024/11/25 2024/11/26 更新 Web

HTML コーディングするときに、あたりまえのように使う body 要素について、初心に帰ってまとめてみました。

body 要素のルール

body 要素のルールはシンプルです。
『１つの HTML ドキュメント（HTML ファイル）に１つだけ存在できる』というものです。

それ以外は、特に難しいルールはありませんが、それだけでは内容が薄い記事になってしまいますので、少し深堀してみます。

body 要素とは何か。W3C の原文を見てみます。

The body element represents the contents of the document.
W3C

直訳すると、『body 要素は、ドキュメントのコンテンツを表します。』という感じなのですが、何を言っているのかさっぱり意味がわかりません！

よく咀嚼して、
body 要素は、HTML ドキュメントのコンテンツ部分、つまり私たちが実際に目にしている Web ページそのもの、Web ページの“中身”と考えるとイメージしやすいですね。

body 要素は、html 要素の子要素として記述します。具体的には head 要素の直後です。

例えば、以下のような構造です。

<html>
    <head>
        <title>タイトル</title>
    </head>
    <body>
        <p>ここにコンテンツが入ります</p>
    </body>
</html>

こうしてみると body 要素が HTML ドキュメントのコンテンツ部分、“中身”を構成する要素だと分かりやすいかもしれません。

JavaScript から簡単に操作できます。
紹介程度に説明を載せておきます。

JavaScriptを使うとき、document.bodyというプロパティを使うと、HTML ドキュメントの body 要素に簡単にアクセスできます。例えば、次のコードでページの背景色を赤く変更できます。

document.body.style.backgroundColor = "red";

また、
body 要素に新しいコンテンツを追加することもできます。

document.body.innerHTML += "<p>新しい段落が追加されました！</p>";

このように、
JavaScript を使うとページの見た目や内容を動的に変更できます。

初心者のうちは『こんなこともできるんだぁ』程度に読み飛ばしてOKです！

body 要素は、HTML ドキュメントごとに１つだけの要素です。HTML ドキュメントのコンテンツ部分はすべて body 要素内に記述していきます。

body 要素は、HTML ドキュメント（HTML ファイル）に必ず１つだけ存在する要素で、ドキュメント内のコンテンツ部分を表します。ページの見た目や内容の大部分が body 要素内に含まれます。記述する場所は、head 要素の直後です。

常に使う重要な要素なので、ぜひ次項の『参考・出典』のリンクから、公式である W3C や MDN のページを一読ください。そんなに長くないのでサクッと読めます！

・MDN. 「<body>: 文書本体要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/body, 2024年11月25日閲覧。

・「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典. 「コンテンツ」. https://wa3.i-3-i.info/word15443.html, 2024年11月25日閲覧。

・「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典. 「ドキュメント」. https://wa3.i-3-i.info/word11505.html, 2024年11月25日閲覧。