【CSS Modules】opacity()関数の使い方
opacity()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
opacity()関数は、CSSでHTML要素の不透明度（透明度）を設定するために使用される関数です。この関数は、対象となる要素全体とその内部に含まれるすべてのコンテンツに対して、一律の透過度を適用します。
引数には、0.0から1.0までの数値、または0%から100%までのパーセンテージを指定します。0.0（または0%）は完全に透明な状態を表し、要素は画面に表示されなくなります。一方、1.0（または100%）は完全に不透明な状態を表し、要素は通常の視認性で表示されます。例えば、opacity(0.5)やopacity(50%)と指定すると、その要素は半透明になり、要素の背後にある他のコンテンツが透けて見えるようになります。
この関数を適用すると、要素の背景色、テキスト、画像、ボーダーなど、その要素を構成するすべての視覚的な部分に、指定された不透明度が適用されます。特に重要な点として、親要素にopacity()を設定した場合、その子要素も自動的に同じ不透明度を受け継ぎます。これにより、要素とそのコンテンツ全体を一度にフェードアウトさせたり、視覚的に目立たせたりする効果を容易に実現できます。
opacity()関数は、ウェブサイトのデザインにおいて、要素を一時的に非表示にしたり、ユーザーがマウスを合わせたとき（ホバー時）の視覚的なフィードバックを提供したり、要素がゆっくりと現れたり消えたりするスムーズなアニメーション効果（フェードインやフェードアウトなど）を作成したりする際に非常に頻繁に利用されます。CSSアニメーションやトランジションと組み合わせることで、動的で魅力的なユーザーインターフェースを構築するための基本的ながらも強力なツールとして、現代のウェブ開発において広く活用されています。
構文(syntax)
1filter: opacity(50%);
引数(parameters)
number
- number: 要素の不透明度を指定する数値。0（完全に透明）から1（完全に不透明）の範囲で指定します。
戻り値(return)
opacity() 関数は、要素の不透明度を設定するための <filter-function> 型の値を返します。