opacity
中級読み方：オパシティ｜英語：Opacity
要素の透明度を指定するプロパティで、0（完全に透明）〜1（不透明）の値を取るよ。
やさしい説明
opacityは、要素の透明度を指定するプロパティです。0で完全に透明、1で完全に不透明になります。
窓ガラスの透明度をイメージしてください。opacity: 1 は普通のガラス（向こうが見えない）、opacity: 0.5 は半透明のすりガラス、opacity: 0 は完全に透明です。
フェードイン・フェードアウトのアニメーションに使われます。transitionと組み合わせると滑らかに表示/非表示を切り替えられます。
具体例・使い方
/* 半透明にする */
.overlay { opacity: 0.5; }
/* ホバーでフェードイン */
.card { opacity: 0.7; transition: opacity 0.3s; }
.card:hover { opacity: 1; }
/* 非表示（透明だがスペースは残る） */
.hidden { opacity: 0; }値の早見表
| 値 | 見た目 | よく使う場面 |
|---|---|---|
1 | 完全に不透明（普通） | 通常の表示 |
0.5 | 半透明 | オーバーレイ・無効ボタン |
0.7 | やや薄い | ホバー前の控えめ表示 |
0 | 完全に透明（見えない） | フェードアウトの終点 |
いつ使う？
- 画像の上に半透明のオーバーレイを重ねるとき
- フェードイン・フェードアウトのアニメーション
- 無効状態のボタンを薄く表示するとき
- ホバーで「ふわっ」と濃くする演出
transition: opacity 0.3s とセットにすると、パッと切り替わる代わりに滑らかにフェードします。:hover での見た目変化と組み合わせるのが定番です。
間違いやすいポイント
❌ opacity: 0 で非表示にしてもクリックできてしまう
opacityは見た目を透明にするだけで、要素は存在し続けます（透明なまま反応する）。完全に消すなら display: none、場所は残して隠すなら visibility: hidden を使いましょう。
❌ 子要素だけ不透明にできない
親に opacity を指定すると中の文字や画像も一緒に薄くなります。背景だけ半透明にしたいときは opacity ではなく background: rgba(0,0,0,0.5) を使いましょう。
よくある疑問
Q: opacityとrgbaの違いは？
A: opacityは要素全体（子要素含む）を透明にします。rgbaは背景色だけを半透明にでき、テキストは不透明のままです。
Q: opacityでフェードアニメーションするには？
A: transition: opacity 0.3s; を指定し、:hoverなどでopacityの値を変えます。display: noneの代わりにopacity: 0で非表示にするとアニメーションできます。
Q: opacity: 0 と visibility: hidden の違いは？
A: opacity: 0は透明だがクリックできる。visibility: hiddenは非表示でクリックもできない。どちらもスペースは確保されます。
関連用語
📖 関連レッスン
レッスンを見る →