← カテゴリ一覧に戻る

透明度

opacityrgba()color-mix()

透明度を指定する方法は主に2つあります。opacityプロパティは要素全体（子要素を含む）に透明度を適用し、rgba()などのアルファ付き色指定は色だけに透明度を適用します。

デモ：opacity の段階（0〜1）

テキスト
1
テキスト
0.8
テキスト
0.6
テキスト
0.4
テキスト
0.2
テキスト
0

デモ：opacity vs rgba — 子要素への影響の違い

opacity: 0.4 — 子要素も透明になる

子要素（白背景）も透明になる

子テキストも影響を受ける

rgba() — 背景色だけ半透明、子要素は通常

子要素（白背景）は通常のまま

子テキストも影響を受けない

デモ：アルファ付き色記法の段階

/ 0.9
/ 0.7
/ 0.5
/ 0.3
/ 0.1

rgba(255,255,255, 0.9〜0.1) — 背景色だけ半透明に

コード例

/* opacity: 要素全体（テキスト・子要素含む）が透明に */
.card-disabled {
  opacity: 0.4;
}

/* rgba(): 背景色だけ半透明（子要素に影響なし） */
.glass-card {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
}

/* hsla()でも同様に透明度指定可能 */
.overlay {
  background-color: hsla(220, 80%, 20%, 0.6);
}

/* モダンな記法: / でアルファ値を指定 */
.modern {
  background-color: rgb(59 130 246 / 0.3);
  color: oklch(55% 0.22 260 / 0.8);
}

/* グラスモーフィズム（よく使う組み合わせ） */
.glass {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

比較：opacity vs rgba/hsla — どちらを使うべきか

観点opacityrgba() / hsla()
子要素への影響⚠️ 子要素もすべて透明になる✅ 色指定した要素の背景のみ
テキストへの影響⚠️ テキストも透明になる✅ テキストは通常のまま可能
使い方opacity: 0.5background: rgba(0,0,0,0.5)
用途ホバー効果、無効化状態、フェードイン半透明背景、オーバーレイ、グラスUI
アニメーションGPU最適化されており高速背景色変化はやや重い場合あり

NEWcolor-mix() によるアルファチャンネルの混合（2023年〜）

color-mix()を使うと、透明度を含む色の混合をCSSだけで実現できます。デザイントークンと組み合わせると、透明度バリアントを動的に生成できます。

10%
30%
60%
90%
/* color-mix() でアルファバリアントを生成 */
:root {
  --brand: #3b82f6;
  --brand-10: color-mix(in srgb, var(--brand) 10%, transparent);
  --brand-30: color-mix(in srgb, var(--brand) 30%, transparent);
  --brand-60: color-mix(in srgb, var(--brand) 60%, transparent);
}

.badge-subtle {
  background-color: var(--brand-10);
  border: 1px solid var(--brand-30);
  color: var(--brand);
}

🤖 AIプロンプトテンプレート

CSSの透明度（opacity・rgba・color-mix）を使った実装例をReact + Tailwind CSSで作成してください。

要件:
- opacityの0〜1の段階変化を視覚的に比較するデモ
- opacity（子要素も透明になる）とrgba()（背景のみ透明）の違いをサイドバイサイドで比較するデモ
- スライダーでopacityを動的に変更できるインタラクティブUI
- グラスモーフィズム（rgba背景 + backdrop-filter: blur）の実装例
- color-mix()を使ったアルファバリアントの動的生成（10% / 30% / 60% / 90%）
- ホバー時のopacity変化トランジションを使ったカードUI

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo