body要素

説明

<body>-</body>　開始タグ:省略可終了タグ:省略可

body要素には、ブラウザに表示される文書本体を記述します。この要素には、文書の背景画像と背景色、およびリンクに関する指定を行う非推奨属性が存在しますが、それらの指定にはスタイルシートの使用が推奨されています。

属性 (W3C)

<body

H2- ie1- N1-

一般属性	id class style title lang dir %events;
onload="スクリプト"	H4- ie3- N2- ページロード後
onunload="スクリプト"	H4- ie3- N2- ページ移動後
background="URI" (非推奨)	H3-x1 ie1- N1- 背景画像　参照
bgcolor="色" (非推奨)	H3-x1 ie1- N1- 背景色
text="色" (非推奨)	H3-x1 ie1- N1- 文字色
link="色" (非推奨)	H3-x1 ie1- N1- リンク色
vlink="色" (非推奨)	H3-x1 ie1- N1- 訪問済みのリンク色
alink="色" (非推奨)	H3-x1 ie4- N1- クリック時のリンク色

>(%block;|%inline;)* +(ins|del)
(%block;|script)+ +(ins|del)

H41T H41F
H41S

</body>

ブラウザ独自の属性 (ie N)

bgproperties="(scroll\|fixed)"	ie2- 背景画像のスクロール
bottommargin="ピクセル"	ie4- 下マージン
leftmargin="ピクセル"	ie2- N6- 左マージン
marginheight="ピクセル"	N4- 上下のマージン
marginwidth="ピクセル"	N4- 左右のマージン
nowrap	ie4- 未調査
rightmargin="ピクセル"	ie4- 右マージン
scroll="(yes\|no)"	ie4- スクロールバーの表示
topmargin="ピクセル"	ie2- N6- 上マージン

W3Cの仕様に従った正当なHTML文書の構造

1つのHTML文書は、以下の3つの部分から構成されます。


1. HTMLのバージョン

2. 文書ヘッダ

3. 文書本体

空白文字(space、new line、tab、及びコメント)は、上記3部分のどこに記述しても構いません。

W3Cの仕様に従った正当なHTMLの基本構造は、まず最初にHTMLのバージョンを示す<!DOCTYPE>を宣言し、ドキュメントルート要素である<html>-</html>の間に、<head>-</head>で囲まれた文書ヘッダと<body>-</body>で囲まれた文書本体が存在する形式になります。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>タイトル</title>

<!--文書ヘッダ-->

</head>



<body>

テキスト

<!--文書本体-->

</body>

</html>

文書ヘッダには、文書情報などのブラウザに表示されない要素を、文書本体には、インライン要素、ブロック要素、特殊な要素などのブラウザに表示される要素を配置します。

ブラウザの独自属性を使用するためにHTMLの仕様書に従うことができない場合や、仕様書や表示モードなどがよくわからない場合、あるいは仕様書に従うつもりがない場合などは、<!DOCTYPE>の記述を避けるのもやむを得ないでしょう。

基本構造

基本構造は、ドキュメントルート要素である<html>-</html>の間に<head>-</head>で囲まれた文書ヘッダと<body>-</body>で囲まれた文書本体が存在する形式です。


<html>

<head>

<title>タイトル</title>

<!--文書ヘッダ-->

</head>



<body>

テキスト

<!--文書本体-->

</body>

</html>

文書ヘッダには、文書情報などのブラウザに表示されない要素を、文書本体には、インライン要素、ブロック要素、特殊な要素などのブラウザに表示される要素を配置します。
空白文字(space、new line、tab、及びコメント)は、上記3部分のどこに記述しても構いません。

仕様書において、HTMLのバージョンを示す<!DOCTYPE>の記述は必須ですが、ブラウザの独自属性を使用するためにHTMLの仕様書に従うことができない場合や、仕様書や表示モードなどがよくわからない場合、あるいは仕様書に従うつもりがない場合などは、<!DOCTYPE>の記述を避けるのもやむを得ないでしょう。

フレームの構造

フレームでは、文書本体<body>-</body>の代わりに、ほかの文書へのリンクを持つフレーム<frameset>-</frameset>を配置します。


<html>

<head>

<title>タイトル</title>

<!--文書ヘッダ-->

</head>



<!--フレーム-->

<frameset cols="150,*">

  <frame src="source1.htm" name="menu">

  <frame src="source2.htm" name="content">

</frameset>

</html>

文書ヘッダには、文書情報などのブラウザに表示されない要素を配置します。
空白文字(space、new line、tab、及びコメント)は、上記3部分のどこに記述しても構いません。

仕様書において、HTMLのバージョンを示す<!DOCTYPE>の記述は必須ですが、ブラウザの独自属性を使用するためにHTMLの仕様書に従うことができない場合や、仕様書や表示モードなどがよくわからない場合、あるいは仕様書に従うつもりがない場合などは、<!DOCTYPE>の記述を避けるのもやむを得ないでしょう。

非推奨属性に代わるスタイルシートの記述

非推奨属性に代わるスタイルシートの記述は下記のように、<head>-</head>内にstyle要素を配置することで可能となります。bgcolor属性、background属性、text属性に代わるスタイルシートは、body要素のセレクタ内に記述します。link属性、vlink属性、alink属性には、スタイルシートの擬似クラスを用います。


<html>

<head>

<style type="text/css"><!--

body {

    background-color:#fff;                  /* bgcolor属性 背景色 */

    background-image:url('img/white.gif');  /* background属性 背景画像 */ 

    color:#000;                             /* text属性 文字色 */ 

}


a:link    {color:#00f; text-decoration:underline;}  /* link属性 リンク色 */ 

a:visited {color:#909; text-decoration:underline;}  /* vlink属性 訪問済みリンク色 */

a:hover   {color:#069; text-decoration:underline;}  /* マウスポイント時のリンク色 */ 

a:active  {color:#069; text-decoration:underline;}  /* alink属性 クリック時のリンク色 */ 

--></style>

</head>



<body>

...

</body>

</html>

HTMLにおいて通常使用する色の指定方法は、6桁の16進数ですが、スタイルシートでは3桁の16進数を使用し、簡略化して記述することができます。#09fは、#0099ffと同じ意味を持ちます。

スタイルシートの擬似クラスには決められた順序があります。link、visited、hover、acriveの順です。

body要素 文書本体 (document body)