CSS: CSS背景
最終更新：2026-10-13
背景スタイリングは、ウェブページを美しくするための重要なツールです。CSSは、要素の背景色、背景画像、画像の繰り返し、サイズ、位置を制御する一連の背景プロパティを提供します。
背景プロパティ早見表
| プロパティ | よく使う値 | 用途 |
|---|---|---|
background-color |
#f5f5f5、red、rgba(255,0,0,0.3) |
背景色 |
background-image |
url("bg.jpg")、linear-gradient(...) |
背景画像またはグラデーション |
background-repeat |
no-repeat、repeat、repeat-x、repeat-y |
背景の繰り返し方法 |
background-position |
center、top left、50% 50% |
背景画像の位置 |
background-size |
cover、contain、100% auto |
背景画像のサイズ |
background-attachment |
scroll、fixed、local |
背景がページと一緒にスクロールするかどうか |
background |
#333 url("bg.jpg") no-repeat center |
省略形、複数を組み合わせ |
1. 背景色
background-colorは要素の背景色を設定し、任意の有効な色の値をサポートします：
▶ サンプル
▶ 試してみよう2. 背景画像
background-imageは要素に背景画像を設定します：
▶ サンプル
▶ 試してみよう複数の背景画像を設定でき、カンマで区切り、先に記述したものが上に表示されます：
▶ サンプル
▶ 試してみよう(1) 背景画像と<img>タグの違い
- 背景画像: 装飾的な画像に適し、コンテンツのセマンティクスに影響しない
<img>タグ: コンテンツとして意味のある画像（製品写真、記事のイラスト）に適し、SEOとアクセシビリティにフレンドリー
3. 背景の繰り返し
背景画像が繰り返される/タイル状に表示されるかどうかを制御：
▶ サンプル
▶ 試してみよう4. 背景サイズ
背景画像の寸法を制御：
▶ サンプル
▶ 試してみようcover: アスペクト比を維持してコンテナを埋め、余分な部分をクロップ（最も一般的）contain: アスペクト比を維持して完全な画像を表示し、余白が残る場合あり
5. 背景位置
要素内での背景画像の位置を制御：
▶ サンプル
▶ 試してみよう6. 背景の省略形
backgroundの省略形はすべての背景プロパティを組み合わせます：
▶ サンプル
▶ 試してみよう❓ よくある質問
Q
background-size: coverとcontainの違いは何ですか？A
coverはアスペクト比を維持してコンテナ全体を埋め、余分な部分をクロップします。containはコンテナ内に完全な画像を表示し、余白が残る場合があります。フルブリードの背景にはカバーを使用し、画像全体を表示する必要がある場合はコンテインを使用します。Q 複数の背景画像を使用できますか？
A はい！カンマで複数の背景を区切ります。先に記述したものが上に表示されます。例：
background: url("overlay.png"), url("bg.jpg");。オーバーレイエフェクトのためにグラデーションと組み合わせることがよくあります。Q
background-attachment: fixedとscrollの違いは何ですか？A
fixedはスクロール時に背景を固定します（パララックスエフェクト）、scrollはページと一緒に移動します（デフォルト）。fixedは奥行き感を作り出すことができますが、モバイルのパフォーマンスに影響する場合があります。📖 まとめ
- CSSの背景プロパティは豊富です——ソリッドカラー、画像背景を設定し、繰り返し、サイズ、位置、スクロール動作を制御できます
background-size: cover+background-position: centerはレスポンシブ背景の最も一般的な組み合わせです- カンマで複数の背景を使用してオーバーレイエフェクトを作成できます
- 背景の省略形はすべてのプロパティを1つの宣言にまとめます
📝 練習問題
backgroundの省略形を使用して、中央揃えで繰り返しなしの画像を含むフル幅バナーを作成してください。background-attachment: fixedを使用して、少なくとも2つのセクションでパララックスエフェクトを作成してください。- 多重背景オーバーレイを作成してください：同じ要素にグラデーションマスク + ベース画像。
