<body>

コンテンツ

HTML 2.0 ~ 利用可能

最終更新日： 2020.04.09

どんなタグ？
画面に表示する内容を入れる、
ページの本体になるタグ。

body_sample.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>bodyタグってどんなタグ？</title>
  </head>
  <body>  
    <p>ここに書いたことが画面上に表示されるよ！</p>
  </body>
<html>

bodyタグはそのページのコンテンツを表します。
画面に表示したい内容は<body> 〜 </body>の中に記述します。

どのカテゴリに属しているの？
body タグは セクショニング・ルート というコンテンツ・カテゴリに属しているタグです。
梱包できるタグは？
body タグに梱包できるタグ（コンテンツ・モデル）は、フロー・コンテンツです。
つまり、フロー・コンテンツというカテゴリに属しているタグなら梱包可能です。

kenページのコンテンツを含むタグです。

どうやって使うの？
htmlタグの中、headタグの次に書いて、
コンテンツを入れる。

bodyタグはhtmlタグの直下、headタグの次に2つ目の要素として記述します。
そのページで画面に表示したいコンテンツは全てこのbody要素内に記述します。なお、body要素はドキュメント内に1つしか配置することができません。

使い方
<body>
  …
</body>
I_am_a_Cat.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>吾輩は猫である 夏目漱石</title>
  </head>
  <body>
    <h1>吾輩は猫である 夏目漱石<h1>
    <p>吾輩は猫である、名前はまだ無い。</p>
    <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で…</p>
  </body>
<html>
ブラウザでの表示例
https://codehero.shibajuku.net/html/body/sample01/
どこでも使えるの？
body要素は<html> 要素の2つ目の子要素として使います。
気をつけることは？
bodyタグはドキュメント内で1つしか配置でません。

kenhtmlタグの直下に、1つだけ配置する。

使える属性は？
HTML5では、グローバル属性しか
使わない。

<body> タグには、どの要素にでも使えるグローバル属性が使えます。
ただし、HTML4.01までは以下の属性も使えました。

background(バックグラウンド) 属性 HTML4.01 非推奨 HTML5 廃止

ページの背景画像を指定する属性です。
HTML4.01で非推奨、HTML5で廃止となりました。現在はCSSのbackground-imageプロパティで背景画像を指定することが推奨されます。

属性値
画像ファイルのパス。

bgcolor(バックグラウンドカラー) 属性 HTML4.01 非推奨 HTML5 廃止

ページの背景色を指定する属性です。
HTML4.01で非推奨、HTML5で廃止となりました。現在はCSSのbackground-colorプロパティで背景色を指定することが推奨されます。

属性値
RGB値(16進数)
例 : #FFFFFF
カラーネーム
例 : white

text(テキスト) 属性 HTML4.01 非推奨 HTML5 廃止

ページ内の文字の色を指定する属性です。
HTML4.01で非推奨、HTML5で廃止となりました。現在はCSSのcolorプロパティで文字色を指定することが推奨されます。

属性値
RGB値(16進数)
例 : #333333
カラーネーム
例 : dimgray

kenbody要素に属性をつけることはあまりないです。

サンプルが見たい
bodyタグを使ったサンプルを
紹介します。

<body> タグを使ったサンプルを紹介します。

基本的なbodyタグのサンプル

myDiary.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8″>
    <title>ぼくの無人島日記</title>
  </head>
  <body>
    <h1><time datetime="2020-03">2020年3月</time></h1>
    <p>
      <time datetime="2020-03-20">20日</time>、無人島でテント生活を始めました。
    </p>
    <p>
      <time datetime="2020-03-21">21日</time>、一緒に無人島にやってきた仲間のテントにお邪魔しました。
    </p>
  </body>
</html>
ブラウザでの表示例
https://codehero.shibajuku.net/html/body/sample02/

kenbody要素を複数配置するのは、ダメ、絶対！

デフォルトスタイルは？
デフォルトでは、
周りに余白がついている。

一般的なブラウザで body要素を表示した場合、body要素の上下左右に8px分のスペース（間隔）が設定されています。具体的には、下記のCSSと同等のスタイルが適用されます。

body要素のデフォルトスタイル
body {
  display: block;
  margin: 8px;
}

kenbody要素の周りの余白は、CSSで設定しよう。

対応ブラウザは？
基本的にどのブラウザーでも
大丈夫。

bodyタグは HTML2.0以降で利用可能で、主に以下のブラウザが対応しています。

Internet Explorer
Internet Explorer あり ~
Edge
Edge 12 ~
Google Chrome
Google Chrome 1 ~
Firefox
Firefox 1 ~
Safari
Safari あり ~
Opera
Opera あり ~

kenどのブラウザでも問題なし。

このリファレンスを書いた人

ken

ken

shibajuku1期生第1号。クリエイティブ・コーディングを勉強する傍、ウェブ制作にも挑戦してます！

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて