opacity
中級読み方：オパシティ｜英語：Opacity
要素の透明度を指定するプロパティで、0（完全に透明）〜1（不透明）の値を取るよ。いつ使う？ 要素をフェードイン・フェードアウトさせたい、背景を半透明にしたい、無効なボタンを薄く表示したいときに使うよ。間違いやすいポイント: opacityは子要素にも影響するよ。親にopacity: 0.5を指定すると中のテキストも半透明になる。背景だけ半透明にしたいならbackground: rgba(0,0,0,0.5); を使おう。
やさしい説明
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; }いつ使う？
画像の上に半透明のオーバーレイを重ねるとき、フェードアニメーション、無効状態のボタンを薄く表示するときに使います。
間違いやすいポイント
❌ opacity: 0 で非表示にしてもクリックできてしまう
opacityは見た目を透明にするだけで、要素は存在し続けます。完全に非表示にしたい場合は display: none や visibility: hidden を使いましょう。
❌ 子要素だけ不透明にできない
親にopacityを指定すると子要素も一緒に透明になります。背景だけ透明にしたい場合は 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は非表示でクリックもできない。どちらもスペースは確保されます。
関連用語
📖 関連レッスン
レッスンを見る →