タイトル: background-colorプロパティ
SEOタイトル: CSS background-color プロパティ完全ガイド
| この記事の要点 |
|
background-color の基本
background-color プロパティは、要素の背景色を指定します。指定範囲はパディング (padding) を含む border の内側まで。border の外 (margin 領域) には適用されません。
/* 基本: HEX 色 */
.box { background-color: #4f46e5; }
/* よく使う省略形 */
.white { background-color: #fff; } /* = #ffffff */
.black { background-color: #000; } /* = #000000 */
.gray { background-color: #888; } /* = #888888 */
/* RGB / RGBA (透明度付き) */
.rgb { background-color: rgb(79, 70, 229); }
.rgba { background-color: rgba(79, 70, 229, 0.5); } /* 50% 透明 */
/* HSL / HSLA (色相・彩度・輝度) */
.hsl { background-color: hsl(244, 76%, 59%); }
.hsla { background-color: hsla(244, 76%, 59%, 0.5); }
/* カラー名 */
.named { background-color: tomato; } /* CSS3 で 140 種 */
/* 透明 (背景なし) */
.tr { background-color: transparent; } /* デフォルト */色指定方法の比較
| 表記 | 例 | 用途 |
|---|---|---|
| HEX (3桁) | #fff | 1桁略記 (R/G/Bが2桁同値時) |
| HEX (6桁) | #4f46e5 | 標準的 |
| HEX (8桁) | #4f46e580 | 末尾2桁が alpha (50% = 80) |
| RGB | rgb(79, 70, 229) | JS 計算と相性良し |
| RGBA | rgba(79, 70, 229, 0.5) | 半透明 |
| HSL | hsl(244, 76%, 59%) | 色相ベースで調整しやすい |
| カラー名 | tomato | 覚えやすいが種類限定 |
currentColor | currentColor | 親要素の color と同期 |
currentColor との連動
currentColor は要素自身の color プロパティ値を参照します。テキスト色と背景色を連動させる用途や、SVG のテーマ化で活躍します。
.button {
color: #4f46e5;
border: 2px solid currentColor; /* color と同じ */
}
.button:hover {
color: #fff;
background-color: #4f46e5;
border-color: currentColor; /* 白に追従 */
}
/* SVG アイコンの色をテキストに合わせる */
.icon { color: #333; }
.icon svg path { fill: currentColor; }background ショートハンド
背景色は background ショートハンドの一部としてもまとめて指定できます。順序自由ですが、background-position/size だけ / で区切ります。
/* 個別指定 */
.a {
background-color: #f0f;
background-image: url(bg.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
/* ショートハンド (上記と同じ) */
.b {
background: #f0f url(bg.png) no-repeat center/cover fixed;
}
/* 注意: ショートハンドは未指定値を初期値にリセット */
.c {
background-image: url(bg.png);
background: red; /* ← image もクリアされる */
/* 安全な書き方: */
background-color: red;
}画像とのレイヤー重ね
背景画像 (background-image) は背景色より前面に表示されます。半透明 PNG や Gradient と組み合わせると効果的:
/* 画像の上に背景色を透かす */
.hero {
background-color: #4f46e5; /* 下: 紫 */
background-image:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* 半透明黒オーバーレイ */
url(hero.jpg); /* 上: 写真 */
background-size: cover;
color: #fff;
}
/* 複数レイヤー (上から順) */
.multi {
background:
url(top.png) no-repeat top,
url(middle.png) no-repeat center,
url(bottom.png) no-repeat bottom,
#f0f0f0;
}Gradient (グラデーション)
linear-gradient / radial-gradient / conic-gradient は背景画像扱いなので、background-image または background で指定します。
/* 線形 */
.linear {
background: linear-gradient(to right, #4f46e5, #ec4899);
background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
}
/* 円形 */
.radial {
background: radial-gradient(circle, #fff 0%, #000 100%);
}
/* 円錐 */
.conic {
background: conic-gradient(from 0deg, red, yellow, green, blue, red);
}
/* 縞模様 */
.stripes {
background: repeating-linear-gradient(
45deg,
#fff 0 10px,
#eee 10px 20px
);
}Dark Mode 対応
/* CSS Variables + メディアクエリ */
:root {
--bg-main: #ffffff;
--bg-card: #f8fafc;
--text-main: #1e293b;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-main: #0f172a;
--bg-card: #1e293b;
--text-main: #e2e8f0;
}
}
body {
background-color: var(--bg-main);
color: var(--text-main);
}
.card {
background-color: var(--bg-card);
}
/* ユーザー手動切替対応 */
html[data-theme="dark"] {
--bg-main: #0f172a;
--bg-card: #1e293b;
}透明度との関係
| プロパティ | 動作 |
|---|---|
background-color: rgba(0,0,0,0.5) | 背景のみ半透明 (テキストは不透明) |
opacity: 0.5 | 要素全体 (テキスト含む) が半透明 |
background-color: transparent | 完全透明 (= alpha 0) |
/* ✅ 背景だけ薄くしたい */
.overlay {
background-color: rgba(0, 0, 0, 0.5);
color: #fff; /* 文字はクッキリ白 */
}
/* ❌ opacity だと文字も薄くなる */
.bad {
background-color: #000;
opacity: 0.5; /* 文字も半透明 */
color: #fff;
}ホバー・状態変化
.button {
background-color: #4f46e5;
color: #fff;
transition: background-color 0.2s ease;
}
.button:hover { background-color: #4338ca; }
.button:active { background-color: #3730a3; }
.button:focus { background-color: #4338ca; outline: 2px solid #fff; }
.button:disabled { background-color: #cbd5e1; cursor: not-allowed; }
/* ダーク版 */
@media (prefers-color-scheme: dark) {
.button { background-color: #6366f1; }
.button:hover { background-color: #818cf8; }
}背景色の継承
background-color は継承されないプロパティです (初期値 transparent)。子要素は明示しないと透明 = 親の背景が透けて見えます。
body { background-color: #f0f0f0; } /* グレー背景 */
.card { } /* 透明 → 親のグレーが見える */
.card-blue { background-color: #4f46e5; } /* 紫の上書き */
/* 全体の地色を統一しつつ、特定セクションだけ別色 */
section { background-color: #fff; }
section.dark { background-color: #1a1a1a; color: #fff; }FAQ
Q: background-color と background、どっち使う?
A: 色だけ指定なら background-color、画像も指定するなら background ショートハンド。混在時はショートハンドが他のプロパティをリセットするので注意。
Q: 背景色のアニメーションが効かない
A: transition: background-color 0.3s が必要。transition: all でも可。
Q: 印刷時に背景色が出ない
A: ブラウザ既定で背景色は印刷されない。@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } で強制可能。