HTML要素 ・ 基本構造
<body>
文書の本文
画面に表示される内容をすべて入れる要素です。見出し・文章・画像・リンクなど、利用者が目にするものは body の中に書きます。
01
サンプルコード
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>はじめてのページ</title>
6</head>
7<body>
8 <h1>こんにちは</h1>
9 <p>これはHTMLで書いたページです。</p>
10</body>
11</html>
CSS
1body {
2 margin: 0;
3 padding: 24px;
4 background: #fbf6ee;
5 color: #333;
6}
02
実行結果
ブラウザでの表示CSSで背景色と余白を指定した body
03
解説
body は文書の本文を表す要素で、html の中に1つだけ書きます。画面に表示したい内容は、すべてこの中に入れます。
ブラウザは body に既定で8pxほどの margin を付けます。ページの端まで背景を広げたいときは、CSSで margin: 0 を指定します。
ページ全体の背景色や基本の文字色・書体は、body に指定すると子要素に引き継がれて便利です。
04
応用例・注意点
よく指定するCSS
| プロパティ | 説明 |
|---|---|
margin: 0 | ブラウザ既定の外側余白を消す |
background | ページ全体の背景 |
color | 基本の文字色（子要素に継承される） |
font-family | 基本の書体（子要素に継承される） |
line-height | 基本の行の高さ |
ページの基本スタイルをまとめて指定する
body に書いた文字の指定は、中の要素に継承されます。
CSS
1body {
2 margin: 0;
3 font-family: "Noto Sans JP", sans-serif;
4 line-height: 1.8;
5 color: #201f1d;
6}
注意点
- 01body は1つの文書に1つだけです。
- 02background は継承されませんが、body の背景はページ全体（キャンバス）に広がります。