ブログ

HTML で背景色を設定する方法｜ background とカラーコードの使い方

プログラミング

公開日: 2026/01/26

HTML で背景色を設定する方法｜ background とカラーコードの使い方

目次

※この記事にはプロモーションを含みます

WEBMASTERSのトップページへ

はじめに

Web ページの第一印象を左右する要素の一つが背景色です。

適切な背景色は可読性やブランド性の向上、ユーザー体験の改善につながります。

本記事では、HTML と CSS を用いた背景色の設定方法を、初心者でも実践できるようにステップごとに丁寧に解説します。
基本的なタグ・属性の使い方から、カラーコードの種類、背景画像との併用、よくあるエラーとその対処法までを網羅します。

HTML で背景色を指定する基本

背景色を指定するタグと属性

Web ページの“雰囲気”を作るうえで、背景色はとても大事な要素です。

昔は HTML のタグに直接指定していたのですが、今は CSS で背景色をつけるのが基本になっています。

背景色をつけるための書き方

以前の HTML では、body タグに bgcolor という属性をつけて色を指定する方法がよく使われていました。ただし、この書き方は今では非推奨とされています。

非推奨（HTML）
<body bgcolor="#ccc">
  ...
</body>
推奨（CSS）
body {
  background-color: #ccc;
}

このように、CSS に背景色を設定すると、HTML の構造とデザインを分けて管理でき、あとから色を変更したりデザインを調整したりするのがとても楽になります。

CSS の background プロパティの基礎

背景を設定するときにまず覚えておきたいのが background プロパティ です。
これは、背景色・背景画像・画像の置き方などをまとめて指定できる便利なプロパティです。

基本構文（背景色のみ）

selector {
  background-color: <色指定>;
}

これは「シンプルに色だけ変えたい」場合に使いやすい書き方です。

background ショートハンド例

selector {
  background: url("bg.jpg") no-repeat center/cover #f0f0f0;
}

一行で色や画像をまとめて指定できますが、あれこれ詰め込みすぎると読みにくくなるので、初心者のうちは「背景画像は画像」「背景色は色」と分けて書いても OK です。

カラーコードの仕組みを理解する

カラーコードの種類

背景色を指定するときに欠かせないのが色の表現方法です。
Web でよく使われるカラー指定方法は主に次の 3 種類です。

HEX（例：#ff0000）

16 進数で RGB を表現。短縮形（#f00）も可能。

RGB（例：rgb(255,0,0)）

赤・緑・青の数値で指定。透過を含める場合は、「rgba(255, 0, 0, 0.5)」のように値を 4 つ並べて書く。

HSL（例：hsl(0,100%,50%)）

色相（Hue）・彩度（Saturation）・輝度（Lightness） で指定。直感的に色調整できる。

カラーコード3種類 それぞれの利点

おすすめの配色ツール紹介

配色作業を効率化するツールは多数あります。
最初は「なんとなく」で決めるより、ツールを使って決めるほうが圧倒的に楽です。

初心者でも直感的に使えるツールの例

  • カラーピッカー（ブラウザ内拡張）
  • オンライン配色ジェネレータ
  • コントラストチェッカー（可読性確認用）

（上記ツール名は利用状況により変動するため、業務で使う際は最新版を確認してください。）

HTML と CSS を使った背景色変更の手順

body 全体の背景色を変える方法

サイト全体の背景色は body に指定します。ビジネスサイトでは白背景＋アクセントカラーが基本となることが多いです。

body {
  background-color: #fafafa;
  color: #333;
  font-family: Arial, sans-serif;
}

実装で大切なポイント

  • 文字色とのコントラストを確保する（WCAG 基準※を参照）
  • ブランドカラーは“背景全体”より“アクセント”として使うとまとまる

※WCAG（ウェブアクセシビリティ基準）：文字と背景の色の差が十分あるかなどを判断する国際的なガイドライン

特定の要素のみ色を変える方法

「ヘッダーだけ色を変えたい」「カードだけ背景色をつけたい」など部分的に変える場合は、クラスを使います。

<section class="hero">
  〜
</section>
.hero {
  background-color: #004080;
  color: #fff;
  padding: 40px;
}
  • 背景色をつけると内容が詰まって見えるので、内側の余白（padding）を確保する
  • 複数の背景指定がある場合は優先順位（カスケード）に注意する

背景画像と色を組み合わせる方法

背景画像の設定方法

背景画像は background-image や background で指定します。レスポンシブ対応では background-size: cover; を使うことが一般的です。

.hero {
  background-image: url('hero.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #222; /* 画像が読み込めない時の代替色 */
}

背景色と画像を併用するコツ

  • 画像が読み込まれない場合に備え、代替の背景色を設定する
  • 画像の上にテキストを載せる場合は、オーバーレイ（半透明のレイヤー）を重ねて可読性を確保する
div {
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('...');
}
  • 画像と色の組み合わせでブランド感や感情訴求を調整する。

よくあるエラーと対処法

背景色が反映されない原因

背景色が表示されない時はこのような点を確認してみましょう。

背景色が反映されない原因

正しく指定しても反映されないときの確認ポイント

CSS を正しく書いているつもりでも、「あれ？背景色が変わらない…」というトラブルはよくあります。 そんなときに役立つのが、以下のチェックリストです。
原因のほとんどはこの中のどれかに当てはまります。

問題解決のためのチェックリスト：

  • CSS ファイルが HTML で正しく読み込まれているかを確認
  • 開発者ツールで該当要素の Computed スタイルを確認
  • セレクタの優先順位を見直す（より具体的なセレクタを使う）
  • キャッシュ問題を疑い、ブラウザのリロード（キャッシュクリア）を実施

背景色を設定するときに特に意識したい項目は以下の 3 点です。

背景色で特に意識すべき3点

まとめ

本記事では、HTML と CSS を用いた背景色の基本的な指定方法から、カラーコードの種類（HEX・RGB・HSL）、背景画像との併用テクニック、およびよくあるエラーとその確認ポイントまで網羅しました。

安定した実装を目指す場合、CSS での一元管理とコントラストの確保が最も重要です。

こうした CSS の詳しい使い方やプログラミングを基礎から学びたい方は、WEBMASTERS をぜひご活用ください。
基礎から実践まで段階的に学べる、初心者にもわかりやすい Web 学習サービスです。

関連記事

前の記事へ 次の記事へ
記事一覧へ