HTML <body> タグ

定義と使用法

<body> タグはドキュメントの主体を定義します。

HTMLドキュメントのメタデータとドキュメント情報はhead要素に包装され、ドキュメントの内容はbody要素に包装されます。

body要素は常にhead要素のすぐ後ろに配置され、html要素の2番目の子要素です。

<body> 要素はHTMLドキュメントのすべての内容を含みます、例えばタイトル、段落、画像、リンク、テーブル、リストなどです。

注意：HTMLドキュメントには要素が一つしかありません <body> 要素。

例

シンプルで完全なHTMLドキュメント：

<!DOCTYPE html>
<html>
  <head>
    <title>ドキュメントのタイトル</title>
  </head>
  <body>
    <h1>これはタイトルです</h1>
    <p>これは段落です。</p>
  </body>
</html>

実際に試してみる

ヒント：ページの下部にさらに例があります。

グローバル属性

<body> タグは以下のイベント属性をサポートしています HTMLのグローバル属性。

イベント属性

<body> タグは以下のイベント属性をサポートしています HTMLのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値で表示します <body> 要素：

body {
  display: block;
  margin: 8px;
}
body:focus {
  outline: none;
}

実際に試してみる

もっと例

例 1

ドキュメントに背景画像を追加する（CSSを使用して）：

<html>
<head>
<style>
body {
  background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="">codew3c.comにアクセス！</a></p>
</body>

実際に試してみる

例 2

ドキュメントの背景色を設定する（CSSを使用して）：

<html>
<head>
<style>
body {
  background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.codew3c.com">codew3c.comにアクセス！</a></p>
</body>

実際に試してみる

例 3

ドキュメントのテキストの色を設定する（CSSを使用して）：

<html>
<head>
<style>
body {
  color: green;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>これはテキストです。</p>
<p><a href="">codew3c.comにアクセス！</a></p>
</body>
</html>

実際に試してみる

例 4

設定文書中の未訪問リンクの色（CSSを使用して）：

<html>
<head>
<style>
a:link {
  color:#0000FF;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML 教程</a></p>
</body>
</html>

実際に試してみる

例 5

設定文書中のアクティブなリンクの色（CSSを使用して）：

<html>
<head>
<style>
a:active {
  color:#00FF00;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML 教程</a></p>
</body>
</html>

実際に試してみる

例 6

設定文書中の既に訪問したリンクの色（CSSを使用して）：

<html>
<head>
<style>
a:visited {
  color:#FF0000;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML 教程</a></p>
</body>
</html>

実際に試してみる

ブラウザサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート