【CSS入門】Webページの背景色を変更する方法｜初心者向け解説

122

Views

CSSで背景色を変更する方法

Webページを作成するうえで、見た目の印象を大きく左右する要素のひとつが背景色です。背景色を適切に設定することで、コンテンツが見やすくなったり、全体の雰囲気が伝わりやすくなったりします。

この記事では、CSSを使ってWebページの背景色を変更する方法について、初心者にもわかりやすく解説します。

背景色の指定には「background-color」を使う

CSSで背景色を指定するには、background-colorというプロパティを使います。

たとえば、全体の背景色を白にするには、以下のように書きます：

body {
  background-color: #ffffff;
}

このように、CSSでbodyタグに対してbackground-colorを設定すれば、ページ全体の背景が指定した色に変わります。

カラーの指定方法はいろいろ

CSSで色を指定する方法は複数あります：

  • 色名（例：red, blue, white）
  • 16進数カラーコード（例：#ff0000, #333333）
  • RGB表記（例：rgb(255, 0, 0)）
  • RGBA表記（透明度付き、例：rgba(0, 0, 0, 0.5)）

たとえば、やわらかいグレーにしたい場合は次のように書けます：

body {
  background-color: #f2f2f2;
}

色の選び方ひとつで、ページの印象がガラリと変わります。

特定のエリアだけ背景色を変える

ページ全体ではなく、ある部分だけ背景色を変えたい場合は、クラスやIDを使って指定します。

<div class="highlight">
  ここだけ背景色が変わります。
</div>
.highlight {
  background-color: #fff4e6;
  padding: 20px;
}

このようにすれば、コンテンツの一部を目立たせたいときなどに効果的です。

背景色と文字色のバランスも大切

背景色を変えるときには、文字色とのコントラストにも注意しましょう。背景が暗ければ文字色は明るく、背景が明るければ文字色は濃いめにすることで、読みやすさが格段に向上します。

body {
  background-color: #1a1a1a;
  color: #ffffff;
}

このように文字色も一緒に指定することで、夜間向けのダークモード風のデザインにもなります。

スマホなど画面サイズによる切り替えも可能

メディアクエリを使えば、画面サイズに応じて背景色を切り替えることもできます。

@media screen and (max-width: 768px) {
  body {
    background-color: #e0f7fa;
  }
}

この設定により、スマートフォンで閲覧したときだけ背景色を水色系に変えることができます。

まとめ

CSSのbackground-colorプロパティを使えば、Webページの背景を自由にカスタマイズできます。色名やコード、透明度などを活用し、サイトの目的やターゲットに合った配色を選びましょう。

ユーザーにとって読みやすく、見た目にも心地よいWebページづくりの第一歩として、ぜひ背景色の設定にチャレンジしてみてください。

関連記事