どんなタグ?
画面に表示する内容を入れる、
ページの本体になるタグ。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>bodyタグってどんなタグ?</title>
</head>
<body>
<p>ここに書いたことが画面上に表示されるよ!</p>
</body>
<html>
bodyタグはそのページのコンテンツを表します。
画面に表示したい内容は<body>
〜 </body>
の中に記述します。
- どのカテゴリに属しているの?
- body タグは セクショニング・ルート というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは?
-
body タグに梱包できるタグ(コンテンツ・モデル)は、フロー・コンテンツです。
つまり、フロー・コンテンツというカテゴリに属しているタグなら梱包可能です。
ページのコンテンツを含むタグです。
どうやって使うの?
htmlタグの中、headタグの次に書いて、
コンテンツを入れる。
bodyタグはhtmlタグの直下、headタグの次に2つ目の要素として記述します。
そのページで画面に表示したいコンテンツは全てこのbody要素内に記述します。なお、body要素はドキュメント内に1つしか配置することができません。
- 使い方
-
<body> … </body>
<!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つしか配置でません。
htmlタグの直下に、1つだけ配置する。
使える属性は?
HTML5では、グローバル属性しか
使わない。
<body>
タグには、どの要素にでも使えるグローバル属性が使えます。
ただし、HTML4.01までは以下の属性も使えました。
alink
属性
HTML4.01 非推奨
HTML5 廃止
ページ内のハイパーテキスト(リンク)をクリックした時のアンカーテキストの色を指定する属性です。
HTML4.01で非推奨、HTML5で廃止となりました。現在はCSSの:active擬似クラスを使ってcolorプロパティで色を指定することが推奨されます。
- 属性値
-
RGB値(16進数)
- 例 : #0000FF
カラーネーム
- 例 : blue
background
属性
HTML4.01 非推奨
HTML5 廃止
ページの背景画像を指定する属性です。
HTML4.01で非推奨、HTML5で廃止となりました。現在はCSSのbackground-imageプロパティで背景画像を指定することが推奨されます。
- 属性値
- 画像ファイルのパス。
bgcolor
属性
HTML4.01 非推奨
HTML5 廃止
ページの背景色を指定する属性です。
HTML4.01で非推奨、HTML5で廃止となりました。現在はCSSのbackground-colorプロパティで背景色を指定することが推奨されます。
- 属性値
-
RGB値(16進数)
- 例 : #FFFFFF
カラーネーム
- 例 : white
link
属性
HTML4.01 非推奨
HTML5 廃止
ページ内の未訪問のハイパーテキスト(リンク)のアンカーテキストの色を指定する属性です。
HTML4.01で非推奨、HTML5で廃止となりました。現在はCSSの:link擬似クラスを使ってcolorプロパティで色を指定することが推奨されます。
- 属性値
-
RGB値(16進数)
- 例 : #0000FF
カラーネーム
- 例 : blue
text
属性
HTML4.01 非推奨
HTML5 廃止
ページ内の文字の色を指定する属性です。
HTML4.01で非推奨、HTML5で廃止となりました。現在はCSSのcolorプロパティで文字色を指定することが推奨されます。
- 属性値
-
RGB値(16進数)
- 例 : #333333
カラーネーム
- 例 : dimgray
vlink
属性
HTML4.01 非推奨
HTML5 廃止
ページ内の訪問済みハイパーテキスト(リンク)のアンカーテキストの色を指定する属性です。
HTML4.01で非推奨、HTML5で廃止となりました。現在はCSSの:visited擬似クラスを使ってcolorプロパティで色を指定することが推奨されます。
- 属性値
-
RGB値(16進数)
- 例 : #6601A3
カラーネーム
- 例 : darkviolet
body要素に属性をつけることはあまりないです。
サンプルが見たい
bodyタグを使ったサンプルを
紹介します。
<body>
タグを使ったサンプルを紹介します。
基本的なbodyタグのサンプル
<!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/
body要素を複数配置するのは、ダメ、絶対!
デフォルトスタイルは?
デフォルトでは、
周りに余白がついている。
一般的なブラウザで body要素を表示した場合、body要素の上下左右に8px分のスペース(間隔)が設定されています。具体的には、下記のCSSと同等のスタイルが適用されます。
body {
display: block;
margin: 8px;
}
body要素の周りの余白は、CSSで設定しよう。
対応ブラウザは?
基本的にどのブラウザーでも
大丈夫。
bodyタグは HTML2.0以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorer
- Internet Explorer あり ~
- Edge
- Edge 12 ~
- Google Chrome
- Google Chrome 1 ~
- Firefox
- Firefox 1 ~
- Safari
- Safari あり ~
- Opera
- Opera あり ~
どのブラウザでも問題なし。