【CSS/html】ページ全体の背景色を指定する方法
「ページの背景色を白以外の色に変えたい！」
「ページごとに背景色を変えたい！」
ページ全体の背景色を指定する方法を解説します。
【結論】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の基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
