ホームへ

CSSでページ全体の背景色を指定する方法

「ページの背景色を白以外の色に変えたい!」

「ページごとに背景色を変えたい!」

CSSでページ全体の背景色を指定する方法を解説します。

【結論】bodyにbackground

htmlには必ずbodyタグがあり、これはページ全体を囲んでいます。

このbodyに対して背景色を指定するとページ全体の色を決めることができます。

背景色はCSSの「background」で指定できます。

body{
    background:#7aa6ed
}

backgroundの値にはカラーコードなどで色を指定します。

bodyは高さを指定しなければautoであるため画面いっぱいにならないことがあります。

そんなときでもbackgroundを指定していればheightやmarginを無視してページ全体に色が付きます。

ページごとに背景色を変えたいとき

ページごとにhtmlを編集できる場合

bodyタグに直接指定するといいでしょう。

<body style="background:#7aa6ed;">

WordPressの場合

WordPressの場合、下記のように記述するとbodyにclassをつけることができます。

テーマ(index.phpなど)

<body <?php body_class(); ?>>

生成されたhtml(一例)

<body class="post-template-default single single-post postid-1799 single-format-standard logged-in admin-bar  customize-support">

上記の場合、数字がついているclassである「postid-1799」は重複しないclassです。

これを利用してCSSで背景色を指定するといいでしょう。

CSS

.postid-1799{
    background:#7aa6ed
}

クラス名を確認するときはDevToolsを使いましょう。

【まとめ】ページ全体の背景色の指定方法

bodyにbackgroundを指定する

以上、CSSでページ全体の背景色を指定する方法でした。

マンガで読める関連記事