Webサイトを作っていると、「画像をふんわり表示させたい」「ボタンにやさしい印象を与えたい」と感じることはありませんか？
そんなときに使えるのが CSSの opacity プロパティです。
要素の透明度を調整することで、印象的で洗練された演出を加えることができます。

opacityとは？

opacityは、要素の不透明度（透け具合）を0〜1の範囲で指定するCSSプロパティです。

• 1 … 完全に表示（不透明）
• 0 … 完全に透明（見えない）
• 0.5 … 50％の透明度（半透明）

画像やボタン、背景にやわらかい印象を与えるときに便利です。

基本の使い方

① 要素を50%の透明度にする

最もシンプルな使い方です。要素全体がうっすら透けて見えるようになります。

.box {
  opacity: 0.5;
}

② ホバー時に少しだけ透かす

マウスを乗せたときに透明度を下げると、視覚的なフィードバックが生まれ、ボタンなどが「押せそう」な印象になります。

.btn:hover {
  opacity: 0.7;
}

③ transitionと組み合わせてふわっと変化

ホバーの変化を滑らかに見せたいときは、transitionプロパティを組み合わせましょう。

.fade {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.fade:hover {
  opacity: 0.4;
}

ユーザーの操作感がぐっと良くなる表現です。

opacityの注意点

• 子要素にも影響する：親要素にopacityを指定すると、中のテキストや画像もすべて一緒に透明になります。
• 部分的な透明にしたいとき：背景色などを透かしたい場合は、rgba()やhsla()のカラー指定を使う方が便利です。
• 単位に注意：不透明度は0.7などの「小数」で指定します。opacity: 50%;と書くのは誤りです！

rgbaとの違いって？

opacityは要素全体が透けるのに対して、rgba()は背景色など一部だけを透かすことができます。

.bg {
  background-color: rgba(255, 255, 255, 0.8); /* 背景だけが透明 */
}

テキストはしっかり表示しつつ、背景だけを柔らかく見せたい場合に便利です。

おすすめの活用シーン

• 画像の上に文字を載せるとき、背景を少し透かして見やすくする
• ボタンやカードにホバー効果を付けて操作性を高める
• 読み込み中のコンテンツに“うっすら表示”の演出を加える

おわりに

opacityは、とてもシンプルなプロパティですが、印象を大きく変える力を持っています。
特に視覚的な“やさしさ”や“動き”を加えるのにぴったりです。

ぜひ、hover演出や画像の装飾に取り入れて、ユーザーに心地よいデザイン体験を届けてみてくださいね。