bodyタグとは?HTMLの本体部分を使いこなしてステップアップ!

HTMLの本体部分を記載するタグ。多くの参考書にこう記載されていますが、実際何のために存在しているのか、詳しい存在意義がわからない方も多いはず!

今回はそんな不明確なbodyタグを徹底解説!なぜbodyタグがあるのかという初歩的なものから、
bodyタグの実際の使い方まで、この記事を読んでbodyタグを使いこなしましょう!

bodyタグは何のために存在するの?使い方は?

今回は、bodyタグの

・基本的な使い方
・bodyタグを利用したCSSでの装飾方法

について説明します。

bodyタグとは

bodyタグの読み方

bodyタグはそのまま「ボディタグ」と読みます。その名の通り、HTML文書の本体部分を表すタグです。

bodyタグの説明

HTMLには<html>、<head>、<body>の3種類のタグがありますが、そのうち<body></body>の間には、文書の本体部分を記載します。また<html></html>はHTML文書全体であることを表し、<head></head>の間には文書のヘッダ(文書の先頭データ)情報を記載します。

bodyタグはheadタグの間に1つしか記載できませんので、その点には十分注意しましょう。

bodyタグで利用できる属性

bodyタグでは以下の属性を使うことができます。

属性 説明
グローバル属性
    • accesskey
    • class
    • contenteditable
    • dir
    • hidden
    • id
    • lang
    • spellcheck
    • style
    • tabindex
    • title
    • translate

全ての要素で使用できる属性です。

onafterprint属性 ユーザの印刷データ作成直後に呼びだす関数
onbeforeprint属性 ブラウザへの印刷指示直後に呼び出す関数
onbeforeunload属性 ページ遷移、リロードの直前に呼び出す関数
onblur属性 文書からフォーカスが外されたときに呼び出す関数
onerror属性 正常にロードができなかったときに呼び出す関数
onfocus属性 フォーカスが文書に当たった際に呼び出す関数
onhashchange属性 現在の文書のアドレスのハッシュ文字#から始まる部分(フラグメント識別子)が変更された際に呼び出す関数
onlanguagechange属性  優先言語が変化したときに発生する関数
onmessage属性 APIからメッセージを受信した際に呼び出す関数
onoffline属性 ネットワークとの交信不可能になった際に呼び出す関数
ononline属性 ネットワークとの交信発生、回復した際に呼び出す関数
onpagehide属性 ページが隠れた時に呼び出される関数
onpageshow属性 ページ表示時に実行されるスクリプトを定義する属性
onpopstate属性 セッション履歴を参照しているときに、アクティブな履歴エントリが変更されたときに呼び出される関数
onrejectionhandled属性 JavaScriptでPromiseオブジェクト(処理完了もしくは失敗の際の結果の値)が拒否された際に呼び出される関数
onstorage属性 別のドキュメントでコンテキストのストレージ領域が変更されたときに呼び出される関数
onunhandledrejection属性 JavaScriptでPromiseが拒否された際に呼び出される関数
onunload属性 ウィンドウがコンテンツとリリースをアンロードする際に呼び出される関数
注意
HTML4.01では非推奨ながらも、存在していたbackground属性やtext属性、link属性はHTML5から完全に廃止されました。同等の設定をするにはCSSを利用して装飾しましょう。

 

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 12
Firefox  1~
nternet Explorer  対応あり
Opera  6~
Safari  1~
スマートフォン用ブラウザ 対応状況
Android webview  対応あり
Android版Chrome  18
Android版Firefox  4

対応あり

Android 版 Opera  対応あり
iOS版Safari  対応あり
Samsung Internet  1.0

bodyタグの基本的な使い方

bodyタグの使い方

bodyタグは<html></html>の間、<head></head>の後に記載します。

先ほども注意として書きましたが、bodyタグはhtmlタグの中に1つしか記載できません。生物の体に例えるとわかりやすいと思いますが、bodyタグは体の本体部分。headは頭の部分と捉えてみてください。

bodyタグ内に記載するのは、HTML文書の本文=ページの本文です。記事や伝えたい情報の内容はbodyタグ内に記載すると覚えましょう。

bodyタグの応用的な使い方

ここではbodyタグを使用して、ページの背景色を変える方法をご紹介します。HTMLファイルとCSSファイルの2つを用意しますので、コピペで動作確認をする際は、必ず同じフォルダ内に入れて実行するようにしてください。

コードは以下の通りになります。HTML5で廃止されたbackgroundcolorをCSSで指定し、さらにmargin-topを100pxに、margin-left200pxに設定しています。

See the Pen
oNLpJxr
by rabbittyu (@rabbittyu)
on CodePen.

続いて、背景を色指定ではなく画像を指定して表示するようにしましょう。CSSでリンクを指定して、画像を設定する方法です。

See the Pen
NWrXJvq
by rabbittyu (@rabbittyu)
on CodePen.

まとめ

今回はHTMLの基本中の基本、<body>タグについてご説明しました。

  • bodyタグは<html></html>の中に1つしか記載できない
  • bodyタグはHTMLの本体部分を表す
  • bodyタグを指定することで、CSSでページ全体の背景色や余白を設定できる

最新のHTML5では、htmlファイル内で余白や背景色を設定できることができなくなったため、CSSでの指定が必須となります。

bodyタグを使いこなすことで、ページの設定をより柔軟に行えますので、ぜひCSSでbodyタグを活用してくださいね!

参考文献:
http://www.htmq.com/html/body.shtml 
https://dekiru.net/article/12828/
https://web-designer.cman.jp/html_ref/abc_list/body/