Webサイトで「要素をふんわり表示させたい」「ホバー時に少し薄く見せたい」そんなときに使えるのが CSSのopacity プロパティです。
要素の透明度を指定することで、見た目にやさしい演出が簡単にできます。この記事では、opacityの基本と使い方を紹介します。

opacityとは？

opacityは、要素の不透明度（透け具合）を0〜1の値で指定するプロパティです。
1は完全に表示、0は完全に透明、0.5なら50%透けて見える状態になります。

基本の使い方

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

.box {
  opacity: 0.5;
}

② ホバーで少し透かす

.btn:hover {
  opacity: 0.7;
}

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

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

.fade:hover {
  opacity: 0.4;
}

注意点

• 透明度は子要素にも影響します（全体が透ける）
• 部分的な透過をしたい場合は、rgba()やhsla()を使うのがおすすめ
• opacityは数値なので、opacity: 50%と書かないよう注意！

おわりに

opacityを使えば、ボタンや画像に柔らかさや変化を加えることができます。
シンプルながら印象を大きく変えられるプロパティなので、ぜひ実際に試してみてください！