bodyタグは、htmlタグの直下に記載され、文書中に一つだけ配置できます。

bodyタグ基本情報

body{
  display: block;
  margin: 8px;
}

bodyタグとは

bodyタグには、ユーザーに表示されるWEBページのコンテンツが含まれます。

そしてbodyタグには、ページの個々の要素に対するスタイリングではなく、Webページ全体に適応されるスタイルを設定することが一般的です。

リセットCSSについてご存知の方は、bodyタグに対する基本設定との違いについて混乱することがあるかもしれません。ここで、リセットCSSとbodyタグに初期設定のプロパティを設定することの違いを簡単に説明します。

リセットCSSは、Webサイトの構築時に最初に読み込まれ、すべてのブラウザで共通して適用されるスタイルを定義します。これにより、ブラウザ間の差異を最小限に抑え、一貫性のあるスタイリングの基盤を作り出します。一方で、bodyタグのスタイル設定は、その特定のWebサイトに特有のスタイルを定義するために使用されます。ここでは、そのサイトで頻繁に使用されるフォント、色、マージンなどのスタイルを設定すると便利です。このように、リセットCSSとbodyタグのスタイリングは異なる役割を持ちます。

bodyタグによく設定されるスタイルとは？

bodyタグには一般的に、以下のようなスタイルを設定します。

body {
background-color: #fff;
font-family: YuGothic,"Yu Gothic","メイリオ", Meiryo,sans-serif;
font-size: 13px;
color: #000;
line-height: 1;
letter-spacing: .08rem;
}

上記のCSSコードにより、bodyタグに背景色、フォント、文字サイズ、行の高さ、文字色、文字間隔、背景色などをbodyタグのに設定しています。これにより、WEBページ全体にこのスタイルが適用されます。各プロパティの意味を一つ一つ解説していきます。

background-color（背景色）

background-colorプロパティは、背景色を指定するのに使用します。background-colorプロパティに関しては以下のページで詳しく解説しています。

font-family（フォントファミリー）

font-familyプロパティは、Webページ内のテキストに使用するフォントを指定します。font-familyプロパティに関しては以下のページで詳しく解説しています。

font-size（フォントサイズ）

font-sizeプロパティは、テキストの文字サイズを指定します。font-sizeプロパティに関しては以下のページで詳しく解説しています。

line-height（行の高さ）

line-heightプロパティは、行の高さを指定します。line-heightプロパティに関しては以下のページで詳しく解説しています。

color（テキストの文字色）

colorプロパティは、テキストの文字色を指定します。colorプロパティに関しては以下のページで詳しく解説しています。

letter-spacing（文字間隔）

letter-spacingプロパティは、文字間隔を指定します。letter-spacingプロパティに関しては以下のページで詳しく解説しています。

関連記事一覧

WEBページを超簡単に作成する方法

リセットCSSとは？初心者向けリセットCSSのカスタム方法について

関連リンク