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タグでは以下の属性を使うことができます。
| 属性 | 説明 | ||
|---|---|---|---|
| グローバル属性 |
|
||
| onafterprint属性 | ユーザの印刷データ作成直後に呼びだす関数 | ||
| onbeforeprint属性 | ブラウザへの印刷指示直後に呼び出す関数 | ||
| onbeforeunload属性 | ページ遷移、リロードの直前に呼び出す関数 | ||
| onblur属性 | 文書からフォーカスが外されたときに呼び出す関数 | ||
| onerror属性 | 正常にロードができなかったときに呼び出す関数 | ||
| onfocus属性 | フォーカスが文書に当たった際に呼び出す関数 | ||
| onhashchange属性 | 現在の文書のアドレスのハッシュ文字#から始まる部分（フラグメント識別子）が変更された際に呼び出す関数 | ||
| onlanguagechange属性 | 優先言語が変化したときに発生する関数 | ||
| onmessage属性 | APIからメッセージを受信した際に呼び出す関数 | ||
| onoffline属性 | ネットワークとの交信不可能になった際に呼び出す関数 | ||
| ononline属性 | ネットワークとの交信発生、回復した際に呼び出す関数 | ||
| onpagehide属性 | ページが隠れた時に呼び出される関数 | ||
| onpageshow属性 | ページ表示時に実行されるスクリプトを定義する属性 | ||
| onpopstate属性 | セッション履歴を参照しているときに、アクティブな履歴エントリが変更されたときに呼び出される関数 | ||
| onrejectionhandled属性 | JavaScriptでPromiseオブジェクト（処理完了もしくは失敗の際の結果の値）が拒否された際に呼び出される関数 | ||
| onstorage属性 | 別のドキュメントでコンテキストのストレージ領域が変更されたときに呼び出される関数 | ||
| onunhandledrejection属性 | JavaScriptでPromiseが拒否された際に呼び出される関数 | ||
| onunload属性 | ウィンドウがコンテンツとリリースをアンロードする際に呼び出される関数 | ||
対応ブラウザ
対応ブラウザは以下の通りです。
| 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タグの使い方
|
1 2 3 4 5 6 7 8 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <body> </body> </html> |
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/
