opacity property
opacity は CSS のプロパティで、要素の不透過度を設定します。不透過度は要素の裏にあるコンテンツが隠れる度合いであり、透過度の逆です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 2 | 18 | 1 | |
percentages 不透明度のパーセント値のサポート | 78 | 79 | 70 | 13.1 | 78 | 13.4 |
| その他 | ||||||
| は CSS の データ型で、整数、小数部分のある数値、科学記法における 10 進数の指数を表します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS タイプ | ||||||
scientific notation 科学的表記法 | 43 | 12 | 29 | 10.1 | 43 | 10.3 |
| その他 | ||||||
| opacity 属性は、オブジェクトまたはオブジェクト群の透過度、すなわち要素の背後に表示される背景がどれだけ表示されるかを指定します。 | 1 | 12 | 1 | 2 | 18 | 1 |
注釈 2件
削除済み
- このバージョンで機能が削除されました (3.5)
対応条件
- ベンダープレフィックス付きで対応: -moz- (1)
注釈 2件
削除済み
- このバージョンで機能が削除されました (2)
対応条件
- ベンダープレフィックス付きで対応: -khtml- (1.1)
注釈 2件
削除済み
- このバージョンで機能が削除されました (3.5)
対応条件
- ベンダープレフィックス付きで対応: -moz- (1)
注釈 2件
削除済み
- このバージョンで機能が削除されました (2)
対応条件
- ベンダープレフィックス付きで対応: -khtml- (1.1)
基本構文
CSS
/* Semi-transparent */
.overlay {
opacity: 0.5;
}
/* Fade-in animation */
.fade-in {
opacity: 0;
transition: opacity 0.3s ease;
}
.fade-in.visible {
opacity: 1;
}
/* Disabled state */
.disabled {
opacity: 0.4;
pointer-events: none;
}ライブデモ
実務での使いどころ
-
フェードイン・フェードアウト
要素の表示・非表示をスムーズなトランジションで切り替え、滑らかな UI を実現する。
-
オーバーレイ・モーダル背景
モーダルの背景を半透明にし、背面のコンテンツがうっすら見える効果を演出する。
注意点
- opacity は子要素にも適用されるため、テキストだけを半透明にしたい場合は rgba() や color-mix() で色自体の透明度を指定すること。
- opacity: 0 の要素はクリック可能なまま残る。非表示にする場合は visibility: hidden や display: none を併用すること。
アクセシビリティ
- opacity: 0 の要素はスクリーンリーダーからアクセス可能なまま。意図しない読み上げを防ぐには aria-hidden="true" を併用する。