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