【CSS Modules】opacityプロパティの使い方

opacityプロパティは、HTML要素の透明度を制御するプロパティです。このプロパティを利用することで、ウェブページ上の特定の要素を部分的に、あるいは完全に透過させ、その背後にあるコンテンツが見えるように調整できます。

opacityプロパティに指定できる値は、0.0から1.0までの浮動小数点数です。値が0.0の場合、その要素は完全に透明となり、画面上には表示されなくなります。一方、値が1.0の場合、要素は完全に不透明となり、本来の見た目で表示され、背後のコンテンツは一切透けて見えません。0.0と1.0の間の値を設定することで、要素を半透明の状態にでき、例えば0.5を設定すれば50%の透明度で表示されます。

このプロパティの重要な特徴は、適用された親要素だけでなく、その親要素に含まれるすべての子要素（テキスト、画像など）にも同じ透明度設定が適用される点です。例えば、コンテナ要素にopacity: 0.7を設定した場合、そのコンテナ内のすべてのコンテンツも0.7の透明度で描画されます。これは、個別の色指定で透過度を調整するrgba()やhsla()のような色関数とは異なり、要素全体の描画に影響を与えるという違いがあります。

opacityプロパティは、要素を徐々に表示・非表示にするアニメーション効果や、背景の上に表示されるオーバーレイ要素の透過調整、デザイン要素の強調度合いの変更など、視覚的な表現を豊かにするために幅広く活用されます。

Copy
1div {
2  opacity: 0.5;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません