English 中文 العربية 日本語 Português

背景色プロパティ

最終更新：2026-09-13

background-color 背景色プロパティ

background-color は要素の背景色を設定し、ページデザインで最も基本的なプロパティの一つです。すべての CSS の色の値を受け付け、transparent キーワードで透過背景になります。このプロパティは継承されず、すべての要素の背景は既定で透明です。

カテゴリ
初期値transparent
継承いいえ
適用対象all
アニメーションタイプcolor
CSS バージョンCSS1
状態標準

📝 構文

background-color: <color> | transparent;

⚙️ 値

値タイプ説明
<color>タイプ背景色の値
transparentキーワード透明な背景

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
background-color ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザーでサポート
ヒント： 背景色はマージン領域まで広がりません。塗りつぶされるのはコンテンツ領域とパディング領域だけです。
重要： 背景色とテキスト色のコントラストが WCAG の可読性基準を満たしていることを常に確認してください。

❓ よくある質問

Q背景を完全に透明にするにはどうすればよいですか？
Abackground-color: transparent; と設定すると、下の要素やページの基底色が露出します。透明化の影響を受けるのは背景だけです。要素自身のコンテンツ（テキストや子要素）には影響しません。要素全体（コンテンツを含む）を消したい場合は、代わりに opacity: 0 または visibility: hidden を使用してください。
Qbackground-color は継承されますか？
Aいいえ。既定値は transparent で、各要素が親から継承せずに独立して計算します。しかし子要素の背景が透明な場合、親や body の背景が視覚的に透けて見えます。これが、body に背景を設定するとページ全体を覆っているように見える理由でもあります。
Qテキストに影響を与えずに背景を半透明にするにはどうすればよいですか？
Aアルファチャンネル付きの色を使用します。例えば background-color: rgba(0, 0, 0, 0.5); や hsla(210, 50%, 50%, 0.5)、または #00000080 のような 8 桁の hex です。背景だけが半透明になり、テキストははっきりしたままです。opacity は避けてください。テキストと子要素も透明になってしまいます。
Qbackground-color でグラデーションを作れますか？
Aいいえ。background-color が対応するのは純色だけです。グラデーションは background-image の系統に属し、background-image: linear-gradient(to right, #ff7e5f, #feb47b); のような関数が必要です。とはいえ、background-color はグラデーションの下の基層として使われることが多く、グラデーション画像の読み込み中の色のフォールバックを提供します。
background background-image color
background-color — colors チュートリアル background-color — background チュートリアル

📚 関連チュートリアル

CSS 背景のチュートリアル
背景関連のプロパティをさらに学ぶ
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%