【2026年7月最新】CSS background-color完全ガイド｜背景色の指定・hover・ダークモード・アクセシビリティまで徹底解説

この記事の内容

1. 01background-colorプロパティとは
2. 02カラー名・HEX・RGB・HSLでの指定
3. 03rgba()で半透明背景を作る
4. 04グラデーション（background: linear-gradient）との違い
5. 05ボックス全体への背景色設定
6. 06hover時に背景色を変える（:hover）
7. 07セクション別の背景色でデザインにメリハリ
8. 08ダークモード対応
9. 09background-colorとbackgroundの違い
10. 10アクセシビリティ（コントラスト比）
11. 11Claude Codeでテーマカラーを一括変更
12. FAQよくある質問

📚 用語解説

background-colorプロパティ：HTML要素の背景色を指定するCSSプロパティ。「background-color: 色の値;」の形式で記述し、要素のコンテンツ領域とパディング領域を塗りつぶします。テキスト色を変えるcolorプロパティとは異なり、要素の背景（後ろ側）の色を変えます。デフォルト値はtransparent（透明）で、親要素の背景が透けて見える状態になっています。

/* 基本的な使い方 */
div { background-color: #f8f9fa; }
section { background-color: rgba(220, 38, 38, 0.1); }
button:hover { background-color: #dc2626; }

colorプロパティはデフォルトで親から子へ継承されますが、background-colorは継承されません。各要素に個別に指定するか、背景色を持つ親の中に配置することで視覚的に見せます。子要素のbackground-colorはデフォルトtransparent（透明）なので、親の背景色が透けて見えます。

📚 用語解説

CSSの色指定形式：background-colorで使える色の値は大きく4種類。①カラー名（red, blue, white等の英語名）、②HEXコード（#ff0000のような16進数形式）、③RGB（rgb(255,0,0)のように赤緑青の強度を指定）、④HSL（hsl(0, 100%, 50%)のように色相・彩度・明度で指定）があります。それぞれ得意な場面が異なります。

/* カラー名での背景色指定 */
body { background-color: white; }
.header { background-color: navy; }
.alert { background-color: red; }
.success { background-color: lightgreen; }
.warning { background-color: gold; }
.sidebar { background-color: ghostwhite; }

/* HEXコードでの背景色指定 */
body { background-color: #ffffff; }        /* 白 */
.hero { background-color: #1a1a1a; }       /* ほぼ黒（ダークセクション） */
.card { background-color: #f8f9fa; }        /* 薄いグレー（カード背景） */
.cta { background-color: #dc2626; }         /* 赤（CTA背景） */
.highlight { background-color: #fef9c3; }   /* 薄い黄色（ハイライト） */
.code { background-color: #1e1e1e; }        /* 濃いグレー（コードブロック） */

/* RGBでの背景色指定 */
.section-a { background-color: rgb(248, 249, 250); }  /* 薄いグレー */
.section-b { background-color: rgb(220, 38, 38); }   /* 赤 */
.section-c { background-color: rgb(37, 99, 235); }   /* 青 */
.section-d { background-color: rgb(22, 163, 74); }   /* 緑 */
.section-e { background-color: rgb(0, 0, 0); }       /* 黒 */
.section-f { background-color: rgb(255, 255, 255); } /* 白 */

/* HSLでの背景色指定 */
.brand-bg { background-color: hsl(0, 72%, 51%); }      /* ブランド赤 */
.brand-light { background-color: hsl(0, 72%, 95%); }  /* 薄い赤（明度アップ） */
.brand-dark { background-color: hsl(0, 72%, 30%); }   /* 濃い赤（明度ダウン） */
.neutral { background-color: hsl(220, 9%, 97%); }     /* 薄いグレー背景 */
.info { background-color: hsl(217, 91%, 95%); }       /* 薄い青（インフォ背景） */

Figmaなどのデザインツールでは、要素を選択すると右パネルにHEXコードが表示されます。そのままコピーしてCSSに貼り付けるだけでOKです。「デザインとコードの色が違う」というトラブルを防ぐためにも、デザインツールのHEX値をそのまま使いましょう。

📚 用語解説

rgba()（Red Green Blue Alpha）：RGBに透明度（Alpha）を加えた色指定関数。rgba(赤, 緑, 青, 透明度)の4引数で指定し、透明度（アルファ値）は0（完全透明）〜1（完全不透明）の小数で設定します。背景色に透明度を持たせることで、後ろのコンテンツを透過させながら色を重ねるオーバーレイ効果が作れます。

/* rgba()で半透明背景 */

/* ヒーロー画像の上のテキストボックス */
.hero-text-box {
  background-color: rgba(0, 0, 0, 0.6);  /* 黒60%透過 */
  padding: 32px;
  border-radius: 8px;
}

/* 注意喚起ボックス（赤の薄い背景） */
.alert-box {
  background-color: rgba(220, 38, 38, 0.1);  /* 赤10%透過 */
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 8px;
  padding: 16px;
}

/* 成功メッセージ（緑の薄い背景） */
.success-box {
  background-color: rgba(22, 163, 74, 0.1);  /* 緑10%透過 */
  border: 1px solid rgba(22, 163, 74, 0.3);
}

/* モーダルオーバーレイ（ページ全体を薄暗くする） */
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);  /* 黒50%透過 */
  position: fixed;
  inset: 0;
  z-index: 100;
}

/* グラスモーフィズム（フロストガラス風） */
.glass-card {
  background-color: rgba(255, 255, 255, 0.15);  /* 白15%透過 */
  backdrop-filter: blur(10px);                   /* 背景をぼかす */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

backdrop-filter（背景ぼかし）は主要ブラウザ（Chrome・Firefox・Safari）で対応していますが、古いブラウザでは動作しません。グラスモーフィズムを使う場合は、backdrop-filterが効かないブラウザでも読めるよう、rgba()の不透明度を高めにしておくのが安全です。

rgba()と同様にhsla()でも透明度を指定できます。hsla(0, 72%, 51%, 0.1)のように書きます。HSL形式で配色を設計している場合はhsla()を使うと統一感が出ます。また、現代のCSSでは「rgb(220 38 38 / 10%)」のようなスペース区切り新書式も使えます。

📚 用語解説

linear-gradient（線形グラデーション）：CSSのグラデーション関数。background（またはbackground-image）プロパティに指定し、2色以上の色が滑らかに変化する背景を作ります。background-colorはあくまで「単色の背景色」なのに対し、グラデーションはbackground-imageとして扱われます。そのためbackground-colorとlinear-gradientを組み合わせてフォールバックを作ることもできます。

/* background-colorは単色 */
.single-color {
  background-color: #dc2626;  /* 赤一色 */
}

/* linear-gradientはグラデーション */
.gradient-bg {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  /* 左上の明るい赤から右下の濃い赤へ */
}

/* 上から下へ */
.top-to-bottom {
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

/* 左から右へ（3色） */
.three-color {
  background: linear-gradient(to right, #dc2626, #f97316, #facc15);
}

/* グラデーション非対応ブラウザ向けフォールバック */
.hero-section {
  background-color: #dc2626;  /* フォールバック（グラデーション非対応時） */
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  /* 対応ブラウザではグラデーションが適用される */
}

/* 放射状グラデーション */
.radial-bg {
  background: radial-gradient(circle at center, #ffffff 0%, #f8f9fa 100%);
}

/* 円錐グラデーション（ドーナツ状） */
.conic-bg {
  background: conic-gradient(from 0deg, #dc2626, #f97316, #facc15, #dc2626);
}

/* グラデーション + background-color の重ね */
.overlay-gradient {
  background-color: #1a1a1a;
  background-image: linear-gradient(rgba(220,38,38,0.3) 0%, transparent 100%);
}

グラデーションのコードを手書きするのは大変です。cssgradient.io や CSS Gradient Generator（https://cssgradient.io/）などのオンラインツールを使えば、ビジュアルで色を選んでコードを自動生成できます。生成されたコードをそのままコピーするだけでOKです。

📚 用語解説

CSSボックスモデル：HTMLの各要素は「ボックス」として扱われ、コンテンツ領域・パディング・ボーダー・マージンの4層で構成されます。background-colorはコンテンツ領域とパディング領域を塗りつぶします（マージンとボーダーは含まない）。paddingを広げると塗りつぶされる範囲も広がります。

/* サイト全体のデフォルト背景 */
body {
  background-color: #ffffff;  /* 白背景 */
}

/* ヘッダー */
header {
  background-color: #1a1a1a;  /* ダークヘッダー */
  color: #ffffff;
  padding: 16px 32px;
}

/* ナビゲーション */
nav {
  background-color: #f8f9fa;  /* 薄いグレー */
  border-bottom: 1px solid #e5e7eb;
}

/* メインコンテンツエリア */
main {
  background-color: #ffffff;
}

/* サイドバー */
aside {
  background-color: #f9fafb;  /* 白よりわずかに薄い */
}

/* フッター */
footer {
  background-color: #111827;  /* 非常に濃いネイビー */
  color: #e5e7eb;
  padding: 48px 32px;
}

/* カードコンポーネント */
.card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin: 16px 0;
}

/* カードバリエーション */
.card-primary {
  background-color: #dc2626;  /* 赤背景 */
  color: #ffffff;
}

.card-info {
  background-color: rgba(37, 99, 235, 0.05);  /* 薄い青 */
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.card-success {
  background-color: rgba(22, 163, 74, 0.05);  /* 薄い緑 */
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.card-warning {
  background-color: rgba(217, 119, 6, 0.05);  /* 薄いオレンジ */
  border: 1px solid rgba(217, 119, 6, 0.2);
}

/* paddingで背景の広がりをコントロール */
.narrow-bg {
  background-color: #fef9c3;
  padding: 0;  /* テキスト幅分だけ背景が見える */
}

.wide-bg {
  background-color: #fef9c3;
  padding: 16px 24px;  /* 上下16px 左右24pxの余白分も背景が広がる */
  border-radius: 8px;
}

/* インラインハイライト */
mark {
  background-color: #fef08a;  /* 黄色（マーカー風） */
  padding: 2px 4px;
  border-radius: 3px;
}

background-colorにborder-radiusを組み合わせると、角が丸いボックスになります。border-radius: 4pxで小さく丸く、8〜12pxでモダンなカード風、50%または9999pxで完全な円/カプセル型になります。CTAボタンやバッジ・タグのデザインに欠かせないテクニックです。

📚 用語解説

:hover 擬似クラス：CSSセレクターの一種で、マウスカーソルが要素の上に乗っているときだけ適用されます。「セレクター:hover { スタイル }」の形式で記述します。background-colorと組み合わせることで「マウスを乗せると背景色が変わる」インタラクティブな効果を作れます。ボタン・リンク・ナビゲーション・カードなどのUX向上に必須のテクニックです。

/* 基本のhoverエフェクト */
button {
  background-color: #dc2626;  /* 通常時：赤 */
  color: #ffffff;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background-color: #b91c1c;  /* ホバー時：濃い赤 */
}

/* transitionで滑らかに */
button {
  background-color: #dc2626;
  color: #ffffff;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;  /* 0.2秒でなめらかに変化 */
}

button:hover {
  background-color: #b91c1c;
}

/* ナビゲーションリンク */
nav a {
  background-color: transparent;
  color: #1a1a1a;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

nav a:hover {
  background-color: rgba(0, 0, 0, 0.06);  /* 薄い黒で浮き上がり感 */
}

/* テーブル行のhover */
tr {
  transition: background-color 0.15s ease;
}

tr:hover {
  background-color: rgba(37, 99, 235, 0.04);  /* 薄い青 */
}

/* カードのhover */
.card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  background-color: #fafafa;  /* わずかに暗く */
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);  /* 影を強く */
}

/* アウトラインボタンのhover */
.btn-outline {
  background-color: transparent;  /* 通常時：透明 */
  color: #dc2626;
  border: 2px solid #dc2626;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  background-color: #dc2626;  /* ホバー時：赤で塗りつぶす */
  color: #ffffff;             /* 文字色も白に切り替え */
}

hoverで色を変えるだけでは「パッ」と瞬時に変わってしまい、少し野暮ったい印象になります。transition: background-color 0.2s ease; を元のスタイルに追加するだけで、なめらかなアニメーション付きの洗練されたホバーエフェクトになります。0.15〜0.25秒が自然に見えるおすすめの時間です。

:hoverの背景色変化はマウスを使うPCでは快適ですが、スマートフォン・タブレットなどのタッチデバイスではホバー状態が発生しません（タップ時に一瞬適用される場合もありますが安定しません）。タッチデバイス向けのアクティブ状態には:activeを使いましょう。

/* セクション別背景色の典型パターン */

/* ヒーローセクション */
.section-hero {
  background-color: #1a1a1a;  /* ダーク */
  color: #ffffff;
}

/* 特徴紹介セクション */
.section-features {
  background-color: #ffffff;  /* 白（デフォルト） */
}

/* 実績・数字セクション */
.section-stats {
  background-color: #f9fafb;  /* 薄いグレー */
}

/* CTAセクション */
.section-cta {
  background-color: #dc2626;  /* ブランドカラー（赤） */
  color: #ffffff;
}

/* 料金プランセクション */
.section-pricing {
  background-color: #ffffff;
}

/* FAQセクション */
.section-faq {
  background-color: #f9fafb;
}

/* フッター */
footer {
  background-color: #111827;  /* ダークネイビー */
  color: #e5e7eb;
}

/* CSS変数でセクション背景を管理 */
:root {
  --bg-page: #ffffff;
  --bg-subtle: #f9fafb;
  --bg-dark: #111827;
  --bg-brand: #dc2626;
  --bg-brand-subtle: rgba(220, 38, 38, 0.05);
}

.section-features { background-color: var(--bg-page); }
.section-stats    { background-color: var(--bg-subtle); }
.section-cta      { background-color: var(--bg-brand); color: #fff; }
.section-faq      { background-color: var(--bg-subtle); }
footer            { background-color: var(--bg-dark); color: #e5e7eb; }

/* テーマカラーを変えたいときは:rootの変数だけ修正すればOK */
/* --bg-brand: #2563eb; に変えると全セクションのブランドカラーが青に切り替わる */

/* ダークセクション内のテキスト色 */
.section-dark {
  background-color: #111827;
  color: #e5e7eb;          /* テキストを白系に */
}

.section-dark h2 {
  color: #f9fafb;          /* 見出しはより明るく */
}

.section-dark p {
  color: #d1d5db;          /* 本文は少し落ち着いた白 */
}

.section-dark a {
  color: #60a5fa;          /* リンクは青より明るく */
}

すべてのセクションに背景色をつける必要はありません。白（#ffffff）のままのセクションを意図的に挟むことで、カラーセクションが際立ちます。「白→グレー→白→カラー」のリズムが、メリハリのあるページデザインの基本です。

📚 用語解説

prefers-color-scheme メディアクエリ：ユーザーのOSまたはブラウザのカラーモード設定（ライト/ダーク）を検知するCSSのメディアクエリ。@media (prefers-color-scheme: dark) ブロック内にスタイルを書くと、ダークモードに設定しているユーザーに自動でそのスタイルが適用されます。現代のWebサイトでは必須の対応となっています。

/* ライトモード（デフォルト） */
body {
  background-color: #ffffff;
  color: #1f2937;
}

.card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

.hero {
  background-color: #f9fafb;
}

/* ダークモード（OSがダークモードの場合に自動適用） */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #111827;  /* 濃いネイビー */
    color: #f3f4f6;
  }

  .card {
    background-color: #1f2937;  /* 少し明るいネイビー */
    border: 1px solid #374151;
  }

  .hero {
    background-color: #0f172a;  /* より濃いネイビー */
  }
}

/* CSS変数によるダークモード対応（推奨パターン） */
:root {
  /* ライトモードのデフォルト値 */
  --bg-page: #ffffff;
  --bg-card: #ffffff;
  --bg-subtle: #f9fafb;
  --bg-header: #1a1a1a;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ダークモードの値に上書き */
    --bg-page: #111827;
    --bg-card: #1f2937;
    --bg-subtle: #0f172a;
    --bg-header: #0f172a;
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --border-color: #374151;
  }
}

/* 本文スタイルでは変数を参照するだけ */
body {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
}

header {
  background-color: var(--bg-header);
}

background-colorはCSSで対応できますが、imgタグで埋め込んだ画像はそのまま表示されます。ロゴや図解がライトモード用の白背景前提のデザインの場合、ダークモードで見づらくなることがあります。SVG画像であればCSSでfillを変更できます。JPG/PNGはメディアクエリでpicture要素を切り替えるか、透過PNGを使うのが一般的な対応策です。

📚 用語解説

backgroundショートハンドプロパティ：background-color・background-image・background-position・background-size・background-repeat・background-attachment・background-originなどのbackground関連プロパティを一括で指定できるショートハンド（省略形）プロパティ。background: #dc2626 url(image.jpg) no-repeat center/cover のように書けますが、単色の背景色だけを設定したい場合はbackground-colorを使うのが明確で安全です。

/* 落とし穴の例 */

.card {
  /* 背景色と画像を両方設定 */
  background: #f8f9fa url("pattern.svg") repeat;
}

.card.active {
  /* これはbackground-colorだけでなく
     background-imageやbackground-repeatも
     "なし"（初期値）にリセットしてしまう！ */
  background: #dc2626;
}

/* 正しい書き方 */
.card.active {
  background-color: #dc2626;  /* 色だけを上書き。画像設定は維持される */
}

/* backgroundショートハンドの書き方例 */

/* 背景色のみ（background-colorと同じ効果） */
.simple { background: #f8f9fa; }

/* 背景画像のみ（色は透明のまま） */
.with-image { background: url("hero.jpg") no-repeat center/cover; }

/* 色 + 画像（色はフォールバック） */
.with-both {
  background: #1a1a1a url("hero.jpg") no-repeat center/cover;
  /* 画像が読めない場合に#1a1a1aが表示される */
}

/* グラデーション（background-imageとして動作） */
.gradient { background: linear-gradient(135deg, #dc2626, #991b1b); }

/* グラデーション + background-color のフォールバック */
.gradient-safe {
  background-color: #dc2626;  /* まずcolor指定 */
  background-image: linear-gradient(135deg, #dc2626, #991b1b);  /* 対応ブラウザはこちらが適用 */
}

background: #dc2626; と書くと、background-imageは初期値の「none」に、background-repeatは「repeat」に、background-positionは「0% 0%」にリセットされます。前に設定していた背景画像などの設定が消えてしまうので注意が必要です。意図的に消したいのでなければ background-color: #dc2626; と書きましょう。

📚 用語解説

コントラスト比（Contrast Ratio）：テキスト色と背景色の輝度（明るさ）の比率。数値が大きいほど見やすい。WCAG（Webコンテンツアクセシビリティガイドライン）では通常テキスト（18px未満）に4.5:1以上を推奨（AA基準）。大きいテキスト（18px以上または14px太字）は3:1以上でOK。高齢者・視力が弱い方・色覚多様性がある方への配慮として重要です。

/* コントラスト不足の例（NG） */
.low-contrast {
  background-color: #f5f5f5;  /* 薄いグレー背景 */
  color: #c0c0c0;              /* 薄いグレー文字 */
  /* コントラスト比: 約1.6:1 — 非常に低い */
}

/* よく見るNG例 */
.muted-bad {
  background-color: #ffffff;  /* 白背景 */
  color: #bbbbbb;              /* 薄いグレー文字 */
  /* コントラスト比: 約2.5:1 — WCAAを大きく下回る */
}

/* 十分なコントラストの例（OK） */
.good-contrast {
  background-color: #ffffff;  /* 白背景 */
  color: #595959;              /* ダークグレー文字 */
  /* コントラスト比: 7.0:1 — WCAG AAA適合 */
}

/* 本文テキストの定番 */
body {
  background-color: #ffffff;
  color: #1f2937;  /* コントラスト比: 約16:1 — 非常に高い */
}

/* 白背景での文字色コントラスト比の目安 */

/* コントラスト比が高い（良い）順 */
.text-black  { color: #000000; }  /* 21:1 — 最高 */
.text-900    { color: #1a1a1a; }  /* 約18:1 — 非常に高い */
.text-800    { color: #333333; }  /* 約12.6:1 — WCAG AAA適合 */
.text-700    { color: #595959; }  /* 約7:1 — WCAG AAA適合 */

/* コントラスト比がAA基準ギリギリ */
.text-600    { color: #767676; }  /* 4.54:1 — WCAG AA適合（ギリギリ） */

/* コントラスト比がAA基準未満（NG） */
.text-500    { color: #909090; }  /* 3.5:1 — AA不適合 */
.text-400    { color: #aaaaaa; }  /* 2.3:1 — AA不適合 */
.text-300    { color: #cccccc; }  /* 1.6:1 — 非常に低い */

/* 白背景で使う「補足テキスト」の安全な下限 */
.text-muted-safe { color: #6b7280; }  /* 4.6:1 — AA適合 */
/* NG：よくやりがちなミス */
.text-muted-bad  { color: #9ca3af; }  /* 2.9:1 — AA不適合 */

薄いグレーのテキストはおしゃれに見えますが、アクセシビリティの観点では問題があります。#6b7280（グレー）と#ffffff（白背景）のコントラスト比は4.6:1でギリギリAA適合です。これより薄い色はデザイン上「読めているように見えても」アクセシビリティ基準を下回ります。#6b7280を補足テキストの最薄ラインとして覚えておきましょう。

赤（#dc2626）や青（#2563eb）など濃いブランドカラーの背景に白いテキストを置く場合も、コントラスト比を確認しましょう。#dc2626背景 + 白文字は約5.1:1でAA適合ですが、薄いブランドカラー（#fca5a5など）の背景には白文字では不適合になります。

📚 用語解説

Claude Code（クロードコード）：Anthropicが提供するAIコーディングアシスタント。チャット形式でCSSのリファクタリング・カラーパレット設計・ダークモード対応・アクセシビリティチェックをAIに依頼できます。「このCSSのbackground-colorを全部CSS変数に置き換えて」のような日本語の指示だけで、数百行のCSSを自動リファクタリングします。非エンジニアでも使えるレベルのシンプルな指示で、プロレベルのCSS改善が実現します。

# Claude Codeへの指示例（プロンプト）

"""
以下のCSSファイルのテーマカラーを変更してください。

現在: #dc2626（赤系）
変更後: #2563eb（青系）

・background-colorに使われているテーマカラーをすべて変更
・ホバー色（より濃い色）も自動で調整
・CSS変数（--bg-brand など）があればそちらも更新
・コントラスト比がWCAG AA基準（4.5:1）を下回る場合は警告を出して

対象ファイル: style.css
"""

# CSS変数への一括移行指示

"""
このCSSファイルのbackground-colorを全部CSS変数に移行してください。

手順：
1. ユニークな背景色の値を一覧化する
2. 意味のある変数名をつける（例: --bg-primary, --bg-card, --bg-hero等）
3. :rootに変数を定義する
4. 既存のbackground-colorの値を変数参照（var()）に置き換える
5. ダークモード対応の@media (prefers-color-scheme: dark)も追加する

ファイル: style.css（300行）
"""

# Claude Codeが生成するカラーパレットの例

:root {
  /* ========== Light Mode ========== */

  /* Brand Colors */
  --bg-brand: #dc2626;           /* メインブランドカラー */
  --bg-brand-hover: #b91c1c;     /* ホバー時（より濃い） */
  --bg-brand-light: #fef2f2;     /* 薄い赤（アラートボックス等） */
  --bg-brand-subtle: rgba(220, 38, 38, 0.08);  /* 非常に薄い赤 */

  /* Page Backgrounds */
  --bg-page: #ffffff;            /* ページ背景 */
  --bg-card: #ffffff;            /* カード背景 */
  --bg-subtle: #f9fafb;          /* サブセクション背景 */
  --bg-header: #1a1a1a;          /* ヘッダー背景 */
  --bg-footer: #111827;          /* フッター背景 */

  /* Semantic Colors */
  --bg-success: rgba(22, 163, 74, 0.08);
  --bg-warning: rgba(217, 119, 6, 0.08);
  --bg-error:   rgba(220, 38, 38, 0.08);
  --bg-info:    rgba(37, 99, 235, 0.08);

  /* Text Colors */
  --text-primary:   #1f2937;
  --text-secondary: #6b7280;  /* 最薄ライン（WCAG AA適合） */
  --text-muted:     #9ca3af;  /* 装飾用のみ（本文には使わない） */

  /* Border */
  --border: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-brand: #f87171;
    --bg-brand-hover: #fca5a5;
    --bg-brand-light: #450a0a;
    --bg-brand-subtle: rgba(248, 113, 113, 0.12);

    --bg-page: #111827;
    --bg-card: #1f2937;
    --bg-subtle: #0f172a;
    --bg-header: #0f172a;
    --bg-footer: #030712;

    --bg-success: rgba(74, 222, 128, 0.12);
    --bg-warning: rgba(251, 191, 36, 0.12);
    --bg-error:   rgba(248, 113, 113, 0.12);
    --bg-info:    rgba(96, 165, 250, 0.12);

    --text-primary:   #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted:     #6b7280;

    --border: #374151;
  }
}

CSSの文法を完全に理解していなくても、「この色にしたい」「こういうデザインにしたい」という要望を日本語で伝えるだけでClaudeがCSSを生成します。生成されたコードをコピーしてCSSファイルに貼り付けるだけで、すぐに反映できます。AI鬼管理の講座でも、CSS設定はClaude Codeで生成するのが最速・最安全と推奨しています。

Claude Codeが生成したCSSは高品質ですが、サイト固有の構造に依存する部分は手動確認が必要です。本番環境に適用する前に、開発環境またはステージング環境で動作確認を行いましょう。特にbackground-colorの上書き競合（Specificity）は実際にブラウザで確認するのが確実です。

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか？