CSS Tips | 超実務コアCSSテクニック：ボックスモデル － 複数背景指定

Web APP CSS
スポンサーリンク

複数背景指定を理解すると「1つの要素に何層ものデザイン」を重ねられる

CSS の 複数背景指定（multiple backgrounds） は、
1つの要素に 複数の背景画像・グラデーション・パターンを重ねるためのテクニックです。

例えば、

  • 背景にグラデーション
  • その上にパターン画像
  • さらにその上にアイコン画像

といった“レイヤー構造”を作れます。

Tailwind CSS でも任意値を使えば実現できます。

初心者でも理解しやすいように、仕組みから応用まで丁寧に解説します。

複数背景指定の基本構文

背景は「カンマ区切り」で重ねる

background-image: url(icon.png), url(pattern.png), linear-gradient(#fff, #eee);
CSS

左側（最初に書いたもの）が 最前面 に描画されます。

それぞれの背景に個別の設定ができる

background-size: 40px, auto, cover;
background-position: right top, center, center;
background-repeat: no-repeat, repeat, no-repeat;
CSS

カンマ区切りで 順番を揃えるのがポイントです。

Tailwind CSS で複数背景を使う

Tailwind は複数背景の専用ユーティリティはありませんが、
任意値（arbitrary values） を使えば実現できます。

<div class="bg-[url('/icon.png'),url('/pattern.png'),linear-gradient(#fff,#eee')]">
HTML

Tailwind の強みは、
CSS の値をそのまま書けることです。

パターン1：アイコン + グラデーション背景

CSS版

.box {
  background-image: url(icon-star.png), linear-gradient(135deg, #3b82f6, #06b6d4);
  background-repeat: no-repeat, no-repeat;
  background-position: right 12px top 12px, center;
  background-size: 40px, cover;
  padding: 20px;
  border-radius: 12px;
  color: white;
}
CSS

Tailwind版

<div class="
  bg-[url('/icon-star.png'),linear-gradient(135deg,#3b82f6,#06b6d4)]
  bg-no-repeat bg-[right_12px_top_12px,center]
  bg-[40px,100%]
  p-5 rounded-xl text-white
">
  アイコン付きカード
</div>
HTML

ポイント

  • 最初の背景（アイコン）が最前面
  • 2つ目の背景（グラデーション）が下地
  • Tailwind の任意値で柔軟に指定できる

パターン2：パターン画像 + 単色背景

CSS版

.box {
  background-image: url(pattern.png), linear-gradient(#f8fafc, #f1f5f9);
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}
CSS

Tailwind版

<div class="
  bg-[url('/pattern.png'),linear-gradient(#f8fafc,#f1f5f9)]
  bg-[repeat,no-repeat]
  bg-[auto,cover]
  p-6 rounded-lg
">
  パターン背景
</div>
HTML

特徴

  • パターン画像を上に重ねる
  • 下地に淡いグラデーション
  • カードやセクション背景に最適

パターン3：角にワンポイント装飾を置く

CSS版

.box {
  background-image: url(deco.png), linear-gradient(#fff, #f0f0f0);
  background-position: left 12px bottom 12px, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 60px, cover;
}
CSS

Tailwind版

<div class="
  bg-[url('/deco.png'),linear-gradient(#fff,#f0f0f0)]
  bg-[left_12px_bottom_12px,center]
  bg-no-repeat bg-[60px,100%]
  p-6 rounded-xl
">
  ワンポイント装飾
</div>
HTML

ポイント

  • 小さな装飾を corner に置く
  • 背景画像を“飾り”として使える

パターン4：複数のグラデーションを重ねる（高級感）

CSS版

.box {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0)),
    linear-gradient(135deg, #6366f1, #8b5cf6);
}
CSS

Tailwind版

<div class="
  bg-[linear-gradient(135deg,rgba(255,255,255,0.4),rgba(255,255,255,0)),linear-gradient(135deg,#6366f1,#8b5cf6)]
  p-6 rounded-xl text-white
">
  重ねグラデーション
</div>
HTML

特徴

  • 上に薄い白グラデーション
  • 下に濃いカラーグラデーション
  • “光沢感”や“高級感”が出る

複数背景の深掘りポイント

1. 背景は「上 → 下」の順に描画される

background-image: A, B, C;
CSS

A が最前面
C が一番下

この順番を意識すると、
「アイコン → パターン → グラデーション」
のようなレイヤー構造が作れる。

2. 各プロパティはカンマ区切りで“順番を揃える”

background-size: 40px, auto, cover;
background-position: right top, center, center;
CSS

順番がズレると意図しない表示になるため、
背景の数と順番を揃えるのが重要。

3. Tailwind の任意値は強力

Tailwind の bg-[...] は
CSS の値をそのまま書けるため、
複数背景との相性が抜群。

4. グラデーション × 画像の組み合わせが最も実用的

  • グラデーションを下地に
  • パターンやアイコンを上に

これだけで UI の質感が一気に上がる。

実践テンプレート：複数背景を使ったカード

<div class="
  bg-[url('/icon-star.png'),url('/pattern.png'),linear-gradient(#fff,#f0f0f0)]
  bg-[no-repeat,repeat,no-repeat]
  bg-[right_16px_top_16px,auto,cover]
  p-6 rounded-xl border border-gray-200
">
  <h3 class="text-lg font-semibold mb-2">複数背景カード</h3>
  <p class="text-gray-600">背景にアイコン・パターン・グラデーションを重ねています。</p>
</div>
HTML

まとめ

複数背景指定は、
1つの要素に複数の背景を重ねるための強力なデザインテクニックです。

  • 背景はカンマ区切りで重ねる
  • 最初の背景が最前面
  • 各プロパティは順番を揃える
  • グラデーション × 画像の組み合わせが最強
  • Tailwind は任意値で柔軟に対応
スポンサーリンク
タイトルとURLをコピーしました