ホームへ

【CSS/html】ページ全体の背景色を指定する方法

2021年12月02日

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

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

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

【結論】bodyにbackground

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

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

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

body{
    background:#7aa6ed
}

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

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

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

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

ページごとに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でページ全体の背景色を指定する方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ