rgba は「色に透明度を足す」ための最も基本で強力なテクニック
背景色・ボタン・オーバーレイ・影・グラデーションなど、
透明度を扱うデザイン では必ず使うのが rgba() です。
初心者がつまずきやすいポイントは
「rgb と rgba の違い」
「透明度の値の意味」
「どんな場面で使うべきか」
この3つ。
ここでは CSS と Tailwind CSS の両方で、
実務レベルの rgba 活用を丁寧に解説します。
rgba の基本構造
rgba(R, G, B, A)
- R（赤）0〜255
- G（緑）0〜255
- B（青）0〜255
- A（透明度）0〜1（0 = 完全透明、1 = 不透明）
例：rgba(0, 0, 0, 0.5) → 半透明の黒rgba(255, 255, 255, 0.8) → 少し透けた白
例1：背景を半透明にする（最も基本）
CSS 版
.box {
background: rgba(0, 0, 0, 0.5); /* 50% 透明の黒 */
color: white;
padding: 1rem;
}
Tailwind 版（任意値）
<div class="bg-[rgba(0,0,0,0.5)] text-white p-4">
半透明背景
</div>
深掘りポイント
背景を半透明にすると、
「後ろの要素がうっすら見える」ため、
モーダル・カード・オーバーレイでよく使います。
例2：オーバーレイ（モーダル背景）に最適
CSS 版
.overlay {
background: rgba(0, 0, 0, 0.6);
position: fixed;
inset: 0;
}
Tailwind 版
<div class="fixed inset-0 bg-[rgba(0,0,0,0.6)]"></div>
深掘りポイント
黒の 60% 透明は「背景を暗くして注目を集める」ための定番値。
例3：白の半透明で“ガラス風”デザイン
CSS 版
.glass {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
padding: 1.5rem;
border-radius: 1rem;
}
Tailwind 版
<div class="bg-[rgba(255,255,255,0.4)] backdrop-blur-md p-6 rounded-xl">
ガラス風カード
</div>
深掘りポイント
白の透明度 × ぼかし（backdrop-filter）で
「ガラスモーフィズム」が簡単に作れます。
例4：ボタンのホバーを“透明度”で表現
CSS 版
.button {
background: rgba(37, 99, 235, 1);
}
.button:hover {
background: rgba(37, 99, 235, 0.8);
}
Tailwind 版
<button class="px-4 py-2 rounded text-white bg-[rgba(37,99,235,1)] hover:bg-[rgba(37,99,235,0.8)]">
ホバーボタン
</button>
深掘りポイント
色を変えずに透明度だけ変えると、
「自然で上品なホバーアニメーション」になります。
例5：影（box-shadow）に rgba を使うと自然になる
CSS 版
.card {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
Tailwind 版
<div class="shadow-[0_4px_20px_rgba(0,0,0,0.15)] p-6 rounded">
カード
</div>
深掘りポイント
影は「黒の透明度」で作ると自然な立体感が出ます。
不透明な黒だと“汚い影”になります。
例6：グラデーションに透明色を混ぜる
CSS 版
.gradient {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.5) 100%
);
}
Tailwind 版
<div class="bg-[linear-gradient(to_bottom,rgba(0,0,0,0),rgba(0,0,0,0.5))] h-40">
</div>
深掘りポイント
透明 → 半透明 のグラデーションは
画像の上に文字を置くときに最強。
rgba と opacity の違い（ここが一番大事）
rgba
背景だけ透明にする
→ 子要素には影響しない
opacity
要素全体を透明にする
→ 子要素も全部透明になる
例：
.parent {
opacity: 0.5; /* 子要素も半透明になる */
}
.parent {
background: rgba(0,0,0,0.5); /* 背景だけ半透明、文字はそのまま */
}
深掘りポイント
UI では「背景だけ透明にしたい」ことが多いので、
opacity より rgba を使う方が正解。
Tailwind で透明度を扱う別の方法（補足）
Tailwind には bg-opacity-* もありますが、
色を Tailwind のプリセットから選ぶ必要があるため、
自由度は rgba の方が高いです。
例：
<div class="bg-blue-600 bg-opacity-50"></div>
実務テンプレート：透明度を使う UI セット
Tailwind 版
<!-- オーバーレイ -->
<div class="fixed inset-0 bg-[rgba(0,0,0,0.6)]"></div>
<!-- ガラスカード -->
<div class="bg-[rgba(255,255,255,0.4)] backdrop-blur-md p-6 rounded-xl">
ガラスカード
</div>
<!-- ホバーボタン -->
<button class="px-4 py-2 rounded text-white bg-[rgba(37,99,235,1)] hover:bg-[rgba(37,99,235,0.8)]">
ホバー
</button>
<!-- 影 -->
<div class="shadow-[0_4px_20px_rgba(0,0,0,0.15)] p-6 rounded">
カード
</div>
まとめ
rgba は
背景・影・オーバーレイ・グラデーション・ホバー演出
あらゆる透明表現の基礎です。
ポイントは次の通りです。
- rgba の A は透明度（0〜1）
- 背景だけ透明にしたい → rgba
- 要素全体を透明にしたい → opacity
- 影は rgba で作ると自然
- Tailwind は bg-[rgba(…)] で自由に使える
