CSS 背景色

JPKODA 編集部 May 6, 2026

背景色の適用は、ウェブページの視覚効果を高め、ユーザーの視線を誘導するための最も基本的かつ強力な手法の一つです。

本章では、CSSを使用してHTML要素に背景色を適用する方法を深く掘り下げ、さまざまなカラー値のフォーマットと具体的な実戦ケースをデモンストレーションします。

1. background-color プロパティを理解する

CSSの background-color プロパティを使用すると、要素の背景色を設定できます。このプロパティは、Hexコード、RGB、RGBA、HSL、HSLAといった多様なカラーフォーマットを受け入れます。それぞれの活用方法を見ていきましょう。

1.1 Hexコード（16進数）による背景色の適用

Hexコードは、CSSで最も広く使われているカラー指定方法です。ハッシュ記号（#）で始まる6桁の16進数で構成され、最初の2桁がレッド（R）、次の2桁がグリーン（G）、最後の2桁がブルー（B）の成分を表します。

body {
  background-color: #f0f0f0; /* 薄いグレーの背景 */
}

.container {
  background-color: #e6e6e6; /* 少し濃いグレーの背景 */
  padding: 20px;
}

h1 {
  background-color: #c0c0c0; /* シルバーの背景 */
  color: #333; /* 濃いグレーのテキスト */
}

この例では、body を薄いグレー（#f0f0f0）、.container をやや濃いグレー（#e6e6e6）、そして h1 見出しにシルバー（#c0c0c0）の背景を適用しています。

1.2 RGBによる背景色の適用

RGB（レッド、グリーン、ブルー）は、もう一つの主要なカラーモデルです。各カラー成分の強度を0から255の範囲で指定します。

body {
  background-color: rgb(240, 240, 240); /* 薄いグレーの背景 */
}

.container {
  background-color: rgb(230, 230, 230); /* 少し濃いグレーの背景 */
  padding: 20px;
}

h1 {
  background-color: rgb(192, 192, 192); /* シルバーの背景 */
  color: rgb(51, 51, 51); /* 濃いグレーのテキスト */
}

この例の結果はHexコードのものと同様ですが、記述に rgb() 関数を使用しています。

1.3 RGBAによる背景色の適用（透明度のサポート）

RGBA（レッド、グリーン、ブルー、アルファ）はRGBモデルの拡張版で、色の不透明度を指定するためのアルファチャンネル（Alpha channel）が含まれています。アルファ値は0（完全な透明）から1（完全な不透明）の間で指定します。

.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 50%透明度の黒色オーバーレイ */
  padding: 20px;
  color: white;
}

.highlight {
  background-color: rgba(255, 255, 0, 0.2); /* 不透明度20%の薄い黄色ハイライト */
  padding: 5px;
}

ここでは、.overlay クラスに半透明の黒背景を適用し、他のコンテンツの上に重なっているような視覚効果を作っています。.highlight クラスは、淡い黄色の背景で控えめな強調効果を生み出します。

1.4 HSLによる背景色の適用

HSL（色相、彩度、明度）モデルは、色相（カラーホイール上の位置）、彩度（鮮やかさ）、明度（明るさ）に基づいて色を表現します。色相は度数（0-360）、彩度と明度はパーセンテージ（0-100%）で指定します。

body {
  background-color: hsl(0, 0%, 94%); /* 薄いグレーの背景 */
}

.container {
  background-color: hsl(0, 0%, 90%); /* 少し濃いグレーの背景 */
  padding: 20px;
}

h1 {
  background-color: hsl(0, 0%, 75%); /* シルバーの背景 */
  color: hsl(0, 0%, 20%); /* 濃いグレーのテキスト */
}

この例ではHSLを使用してグレーの階調を定義しています。色相が0は赤を指しますが、彩度が0%であれば無彩色（グレー）になります。明度の値を変えることで、グレーの濃淡を直感的にコントロールできます。

1.5 HSLAによる背景色の適用

HSLAはHSLモデルの拡張版で、RGBAと同様に不透明度を指定するアルファチャンネルを持っています。

.overlay {
  background-color: hsla(0, 0%, 0%, 0.5); /* 50%透明度の黒色オーバーレイ */
  padding: 20px;
  color: white;
}

.highlight {
  background-color: hsla(60, 100%, 50%, 0.2); /* 不透明度20%の薄い黄色ハイライト */
  padding: 5px;
}

2. 実戦例とデモンストレーション

これらの概念を組み合わせた、より詳細なブログ記事のデザイン例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ブログ記事</title>
  <style>
    body {
      background-color: #f4f4f4; /* ページ全体の背景 */
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .container {
      width: 80%;
      margin: 20px auto;
      background-color: white; /* コンテンツコンテナの背景 */
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    h1 {
      color: #333;
      background-color: rgba(255, 255, 255, 0.8); /* 少し透明な白背景 */
      padding: 10px;
    }
    p {
      line-height: 1.6;
      color: #555;
    }
    .highlight {
      background-color: hsla(60, 100%, 80%, 0.3); /* 薄い黄色のハイライト */
      padding: 2px 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>私の素晴らしいブログ</h1>
    <p>
      これはCSSの背景色に関する記事です。背景色を設定するには、Hexコードの <span class="highlight">#f0f0f0</span>、
      RGB値の <span class="highlight">rgb(240, 240, 240)</span>、
      RGBA値の <span class="highlight">rgba(0, 0, 0, 0.5)</span>、
      HSL値の <span class="highlight">hsl(0, 0%, 94%)</span>、そしてHSLA値の
      <span class="highlight">hsla(60, 100%, 80%, 0.3)</span> などを使用できます。
    </p>
    <p>
      さまざまな値を試して、あなたのサイトに最適なルック＆フィールを見つけてください。背景色を選ぶ際は、可読性とコントラストを考慮することを忘れないでください。
    </p>
  </div>
</body>
</html>

解析：

body: ページ全体に薄いグレーの背景（#f4f4f4）を適用しています。
.container: 背景を白（white）にすることで、メインコンテンツを際立たせています。
h1: わずかに透明な白背景（rgba(255, 255, 255, 0.8)）を持たせています。
.highlight: HSLA値を使用して、テキストの一部に淡い黄色のマーカーのような効果を与えています。