EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSS背景

背景スタイリングは、ウェブページを美しくするための重要なツールです。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は要素の背景色を設定し、任意の有効な色の値をサポートします：

サンプル

HTML 
<style>
.box {
  background-color: #f5f5f5;
}
.highlight {
  background-color: rgba(255, 255, 0, 0.3);
}
</style>
<div class="box">背景色を示すボックス要素</div>
<div class="highlight">このテキストにはハイライト背景があります</div>
▶ 試してみよう

2. 背景画像

background-imageは要素に背景画像を設定します：

サンプル

HTML 
<style>
.banner {
  background-image: url("/assets/images/tutorials/css-banner.jpg");
  height: 200px;
  background-size: cover;
  background-position: center;
}
</style>
<div class="banner">バナーコンテンツ表示エリア</div>
▶ 試してみよう

複数の背景画像を設定でき、カンマで区切り、先に記述したものが上に表示されます：

サンプル

HTML 
<style>
.multi-bg {
  background-image: url("/assets/images/tutorials/css-star.png"), url("/assets/images/tutorials/css-bg.jpg");
  height: 200px;
  background-size: 50px, cover;
  background-repeat: no-repeat, repeat;
  background-position: center, top left;
}
</style>
<div class="multi-bg">多重背景オーバーレイエフェクト</div>
▶ 試してみよう

背景画像と<img>タグの違い

3. 背景の繰り返し

背景画像が繰り返される/タイル状に表示されるかどうかを制御：

サンプル

HTML 
<style>
.no-repeat {
  background-image: url("/assets/images/tutorials/css-star.png");
  background-repeat: no-repeat;
  background-color: #f0f0f0;
  height: 100px;
}
.repeat-x {
  background-image: url("/assets/images/tutorials/css-star.png");
  background-repeat: repeat-x;
  background-color: #e3f2fd;
  height: 100px;
}
</style>
<div class="no-repeat">繰り返しなし（単一画像）</div>
<div class="repeat-x">水平方向に繰り返し</div>
▶ 試してみよう

4. 背景サイズ

背景画像の寸法を制御：

サンプル

HTML 
<style>
.cover {
  background-image: url("/assets/images/tutorials/css-banner.jpg");
  background-size: cover;
  background-position: center;
  height: 200px;
}
.contain {
  background-image: url("/assets/images/tutorials/css-banner.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  height: 200px;
}
</style>
<div class="cover">カバー：コンテナを埋め、クロップする場合あり</div>
<div class="contain">コンテイン：完全な画像を表示し、余白が残る場合あり</div>
▶ 試してみよう

5. 背景位置

要素内での背景画像の位置を制御：

サンプル

HTML 
<style>
.center {
  background-image: url("/assets/images/tutorials/css-star.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f5f5f5;
  height: 100px;
}
.top-right {
  background-image: url("/assets/images/tutorials/css-star.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-color: #e3f2fd;
  height: 100px;
}
</style>
<div class="center">中央揃えの背景</div>
<div class="top-right">右上の背景</div>
▶ 試してみよう

6. 背景の省略形

backgroundの省略形はすべての背景プロパティを組み合わせます：

サンプル

HTML 
<style>
.shorthand {
  background: #333 url("/assets/images/tutorials/css-banner.jpg") no-repeat center/cover;
  height: 200px;
  color: white;
}
</style>
<div class="shorthand">色、画像、繰り返し、位置、サイズを省略形で指定した背景</div>
▶ 試してみよう

❓ よくある質問

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は奥行き感を作り出すことができますが、モバイルのパフォーマンスに影響する場合があります。

📖 まとめ

📝 演習

  1. backgroundの省略形を使用して、中央揃えで繰り返しなしの画像を含むフル幅バナーを作成してください。
  2. background-attachment: fixedを使用して、少なくとも2つのセクションでパララックスエフェクトを作成してください。
  3. 多重背景オーバーレイを作成してください：同じ要素にグラデーションマスク + ベース画像。
100%