不透明度とRGBAの透明度
opacityプロパティとrgba()の色の値を使って、要素の透明度を制御します。
「不透明度とRGBAの透明度」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
opacityプロパティ
opacityプロパティは、子要素やコンテンツを含む要素全体の透明度を設定します。値の範囲は、0（完全に透明）から1（完全に不透明）までです。
<div class="overlay">Overlay at 50% opacity</div>
opacityはすべての子要素に影響する
重要な注意点として、opacityは要素ツリー全体に影響します。opacity: 0.5を設定した要素内のテキスト、画像、子要素はすべて50%透明になります。子要素を親要素より不透明にすることはできません。
色だけを透明にするRGBA
テキストや子要素に影響を与えずに背景色だけを透明にするには、opacityの代わりにrgba()を使用します。
<div class="card">Card with transparent background, opaque text</div>
RGBAとopacityの比較
次のように考えると分かりやすいでしょう。
opacity: 0.5— 要素全体と子要素が透明になりますrgba(r,g,b,0.5)— 色の値だけが透明になり、子要素には影響しません
HSLAの透明度
同じ原則がhsla()にも当てはまります。4つ目の引数がアルファチャンネル（0～1）です。
<div class="tooltip">Tooltip with HSLA background</div>
現代的なスペース区切り構文
最新のCSSでは、「a」付きのバリアントを使わず、rgb()やhsl()のアルファ値をスラッシュで区切って指定できます。
<div class="modern-rgb">rgb(0 0 0 / 0.5)</div>
<div class="modern-hsl">hsl(0 0% 0% / 0.5)</div>
opacity: 0とvisibility: hiddenとdisplay: none
3つとも要素を非表示にしますが、動作は異なります。
opacity: 0— 見えなくなりますが、領域を占有し、クリックできますvisibility: hidden— 見えなくなり、領域を占有しますが、クリックできませんdisplay: none— レイアウトから完全に取り除かれます
opacityのトランジション
opacityはGPU上で合成処理されるため、アニメーションさせるコストが非常に低いCSSプロパティの1つです。フェードインやフェードアウトの効果には、background-colorではなく、必ずopacityのトランジションを使用してください。
<div class="modal visible">Fades in via opacity transition</div>
透明な背景のパターン
テキストの可読性を保ったまま要素に半透明の背景を設定するには、background-colorにrgba()を使用します。
<div class="glass-card">Glass effect card</div>
ボーダーとボックスシャドウのアルファ値
border-colorとbox-shadowにRGBAを使用すると、控えめで透明感のある効果を作成できます。
<div class="card">Card with alpha border & shadow</div>
アクセシビリティに関する注意
透明度の低いテキストは可読性を下げ、WCAGの色のコントラスト要件を満たせない場合があります。テキストに透明度を使用する場合は、必ずコントラスト比を確認してください。通常のテキストでは、最低4.5:1の比率を確保します。
確認問題
要素にopacity: 0.3が設定されています。その中のテキストはどうなりますか。
まとめ
opacityは要素全体とその子要素を透明にします。子要素に影響を与えずに色だけを透明にするには、rgba()またはhsla()を使用します。opacityのトランジションはGPUで高速化され、パフォーマンスにも優れています。テキストに透明度を使用する場合は、必ずコントラスト比を確認してください。
よくある質問
「不透明度とRGBAの透明度」レッスンは無料ですか？
はい。「不透明度とRGBAの透明度」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「不透明度とRGBAの透明度」で何を学びますか？
opacityプロパティとrgba()の色の値を使って、要素の透明度を制御します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「不透明度とRGBAの透明度」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 色の値：名前、16進数、RGB、HSL
- 背景色と背景画像
- グラデーション：線形と放射
- 不透明度とRGBAの透明度