Webサイトの印象を左右する背景色の選び方完全ガイド

2025 12/06

2025/12/06

はじめに

対象読者

この文書は、Webサイトの背景色を扱いたい初心者の方向けです。HTMLやCSSの基本を少し知っていると学びやすいですが、まったく初めての方でも読み進められるように配慮しています。

この章の目的

まずは本書の目的と全体の流れをお伝えします。背景色は見た目の第一印象を左右します。本書では、基礎から応用まで順を追って学べるようにしました。

本書で学べること

背景色が与える印象や注意点
CSSで背景色を指定する基本的な書き方
さまざまな色の表現方法（名前・16進数・RGBなど）
サイト全体やセクション単位での背景色の切り替え方
透明色の使い方と背景画像との組み合わせ方

それぞれの章で具体例を示し、実際のコードや使いどころも紹介します。専門用語は最小限に抑え、図や例で補足します。

進め方のヒント

実際に手を動かして確認すると理解が早まります。サンプルをコピーして自分のページに貼り付け、色を変えてみてください。少しずつ試すことで、背景色の扱い方に自信がつきます。

では次章で、背景色がなぜ重要なのかを見ていきましょう。

Webサイトの背景色は「第一印象」を決める重要要素

はじめに

Webサイトを開いた瞬間に目に入るのは、まず背景の色合いです。レイアウトより先に色の雰囲気が伝わり、訪問者の印象を左右します。

背景色がもたらす主な影響

可読性：文字色とのコントラストで読みやすさが決まります。濃い文字には淡い背景、白い文字には濃い背景が基本です。
ブランドイメージ：明るい色は親しみ、暗めは落ち着きや高級感を演出します。
視覚負担：真っ白よりも淡いグレーやアイボリーは長時間の閲覧で目に優しいです。

具体的な例

真っ白：清潔感が出ますが眩しく感じることがあります。
淡いグレー：コンテンツを目立たせ、目に優しくなります。
暖色系の淡いトーン：親しみや温かみを演出します。
ダークトーン：写真や色を映えさせると同時に落ち着きを出せます。

設計のポイント

コントラスト比を考え、読みやすさを優先してください。
ブランドの性格やターゲット層に合わせて色調を選んでください。
セクションごとに微妙に色を変えると視線誘導に役立ちます。

実務の簡単チェックリスト

文字色と背景色の組み合わせを複数デバイスで確認する
長時間表示での見え方を想定する
ブランドガイドラインと整合しているか確認する

次章では、実際にCSSで背景色をどう指定するかを見ていきます。

背景色の基本：CSSの background-color プロパティ

背景色とは

background-color は要素の背景に色を付けるためのプロパティです。指定した要素の「中身と内側の余白（padding）」まで色が付きます。全画面に色を付けたいときは body に指定すると実質ページ全体の背景色が変わります。

基本的な書き方（例）

/* ページ全体 */
body { background-color: #f5f5f5; }

/* 任意のクラス */
.card { background-color: white; padding: 16px; border-radius: 4px; }

実務上の注意点

background-color は子要素に自動で引き継がれません。子要素の背景は透明が初期値なので、親の色が見えます。
要素の margin（外側の余白）は透明なので、隣接する要素や body の背景が見えます。
セレクタの優先度で上書きされます。特定の部分だけ変えたいときはクラスやより詳しいセレクタを使います。

ワンポイント

背景色は読みやすさに直結します。文字色とのコントラストを確認して、視認性の高い組み合わせを選んでください。

背景色の指定方法：色の表現形式いろいろ

色指定の全体像

代表的な指定方法には、色名（キーワード）、16進数（HEX）、rgb()/rgba()、hsl()/hsla()などがあります。目的に応じて使い分けると扱いやすくなります。

色名（キーワード）

英語の色名を使います。書き方は簡単です。

background-color: red;

使える色は限られるため、試作や簡単な場面に向きます。

16進数（HEX）

Webでよく使われます。#RRGGBB形式や短縮の#RGBが使えます。

background-color: #ff0000; /* 赤 */
background-color: #f00;    /* 同じ */

最近は透明度を含めた#RRGGBBAAも使えますが、ブラウザ対応に注意してください。

rgb()/rgba()

赤・緑・青を0〜255で指定します。rgba()は透明度（0〜1）を追加できます。

background-color: rgb(255,0,0);
background-color: rgba(255,0,0,0.5);

透明を使うと重ね合わせが自然になります。

hsl()/hsla()

色相（度）、彩度（%）、輝度（%）で直感的に指定できます。調整が簡単です。

background-color: hsl(0,100%,50%); /* 赤 */
background-color: hsla(0,100%,50%,0.5);

使い分けの目安

正確な色や互換性を重視するならHEX。
透明度を扱うならrgba/hsla。
色を直感的に変えたいときはhsl。
手早く試すなら色名。
状況に合わせて選んでください。

Webサイト全体の背景色を変える基本パターン

基本の書き方

ページ全体の背景色は、最も一般的に body 要素に指定します。ブラウザは body を画面全体に広げて表示するので、ここに色を置くとサイト全体の雰囲気が決まります。

body {
  background-color: #f5f5f5; /* やさしい薄いグレー */
  color: #222;              /* 文字色は十分に濃くする */
  min-height: 100vh;       /* 画面全体を覆うために指定 */
}

色選びのポイント

文字色とのコントラストを必ず確保してください。背景が明るいなら文字は濃く、背景が暗いなら文字は明るくします。目に優しい配色は長時間の閲覧を助けます。色の明度差を意識して、薄い背景×薄い文字の組合せは避けましょう。

ブラウザ全体に色を適用する場合

余白やスクロール時に背景が途切れることがあります。必要なら html 要素にも同じ色を指定します。

html { background-color: #f5f5f5; }

ダークモード対応（簡単な例）

ユーザーの環境に合わせて背景を切り替えるにはメディアクエリを使います。

@media (prefers-color-scheme: dark) {
  body { background-color: #121212; color: #eaeaea; }
}

古い書き方（非推奨）

HTML の bgcolor 属性（例：）は単純ですが、現在は非推奨です。スタイルは CSS にまとめて管理してください。

セクションごと・パーツごとの背景色を変える

基本の考え方

サイトの一部だけ色を変えたいときは、対象の要素にクラスを付けてCSSで指定します。これが最も基本で分かりやすい方法です。例として見出し部分やカード、フッターなどで使います。

基本の書き方（例）

<section class="hero">ヒーロー領域の内容</section>

.hero {
  background-color: #f5f5f5;
  padding: 40px;
}

paddingを付けると背景色が見やすくなります。インライン要素は幅や高さが効かないので、必要ならdisplay:blockを指定します。

親子で別の色にする

親要素と子要素で別々の背景色を設定できます。親の色を残したまま子に別色を乗せると視覚的に区切れます。

.card { background-color: #ffffff; padding:20px; }
.card .meta { background-color: #f0f0f0; padding:10px; }

親の余白や境界線を調整すると見た目が整います。

半透明の背景を作る（rgba）

rgba()を使うと透ける背景が作れます。画像や親要素の色を生かしたいときに便利です。

.overlay { background-color: rgba(0,0,0,0.5); color:#fff; padding:20px; }

半透明は下の色と混ざるため、文字の読みやすさを必ず確認してください。

実用的な注意点

コントラスト：背景色と文字色の差を確保してください。読みやすさが優先です。
横幅：全幅の帯にしたいときはwidth:100%やbody直下の要素を使います。
レスポンシブ：狭い画面では余白や色の見え方が変わるので確認をお願いします。

この章で紹介した方法を組み合わせれば、部分的な色分けが簡単にできます。

透明にしたいとき：transparent を使う

概要

背景を持たせたくないときは、CSSで background-color: transparent; を指定します。要素の中身だけを見せて、親要素の背景が透けて見えるデザインを作れます。枠線だけ表示する箱や、要素の一部だけ重ねる表現でよく使います。

使い方（例）

<div class="card">
  <h2>見出し</h2>
  <p>本文</p>
</div>
<style>
.card{ border:1px solid #ccc; background-color:transparent; padding:16px; }
</style>

この例ではカードの中身は透明で、下の背景が見えます。

注意点と応用

transparent は背景色だけ透明にします。親要素の背景画像や色はそのまま見えます。
半透明を使いたいときは rgba(0,0,0,0.5) のようにアルファ値を指定します。これで背景を薄く見せられます。
要素のクリックやフォーカス動作は変わりません。見た目だけ透明にする点を意識してください。

背景画像との組み合わせ：background-image と background-color

背景画像を設定する

背景画像は background-image で設定します。繰り返しや位置も一緒に指定すると扱いやすくなります。

.hero {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

表示方法の調整

画面いっぱいに表示したいときは background-size: cover;、画像全体を見せたいときは contain を使います。繰り返しを許すなら repeat にします。

背景色との組み合わせ

背景色は画像の下地になります。画像に透明部分があるときや画像が読み込まれない場合、背景色が見えます。オーバーレイ効果を簡単に作るには、rgbaなどで半透明の色を設定します。

.hero {
  background-image: url("bg.jpg");
  background-color: rgba(0,0,0,0.4); /* 半透明の黒で暗めにする */
  background-blend-mode: multiply; /* 画像と色を混ぜる */
  background-size: cover;
}

background-blend-mode は multiply, screen, overlay などを試して雰囲気を調整してください。色の濃さは rgba のアルファで調整します。

実用例（ヒーローセクション）

背景画像の上に文字をのせる場合、色でコントラストを作ると可読性が上がります。画像の上にさらに要素を重ねるときは、疑似要素 (::before) を使ってオーバーレイを作る方法も便利です。

.hero {
  position: relative;
  background: url("bg.jpg") center/cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.35);
}

これで画像の雰囲気を残しつつ色で調整できます。