【CSS】opacityを使ってボックス全体を透過させる!

CSSにはopacityというボックス全体を透過させるプロパティがあります。

opacityは、要素の透明度を指定するプロパティであり、opacityの数値が0に近いほどボックスが透明になります。

また、hoverにopacityプロパティを指定することで、マウスを持ってきた時にボックスを透過させたり、透明な状態からマウスを持っていくと不透明になるような動きを作成することができます。

今回は、CSSのopacityを使ってボックス全体を透過させる方法を以下の内容で解説していきます。

⚫︎ ボックス全体を完全に透明にする場合
⚫︎ ボックス全体を半透明にする場合
⚫︎ ボックス全体を完全に不透明にする場合

⚫︎ ボックスの特定の色のみを透明にする場合
⚫︎ マウスを持ってきた時にボックスを透過させる場合
⚫︎ マウスを持ってきた時にボックスを不透明化させる場合

opacityとは

opacityとは要素の透明度を指定するプロパティとなります。

opacityの書き方

opacityプロパティの書き方は下記となります。

opacityの後に透明度を指定することで、セレクターで紐づけられている要素の透明度を設定することができます。

透明度の値としては、0〜1の範囲で指定でき、0の場合は透明になり、1の場合は不透明になります。
つまり、0に近い値を指定すると要素が透過します。

ボックス全体を透過させるサンプルコード

ボックス全体を透過させるサンプルコードを紹介します。

ボックス全体を完全に透明にする場合

ボックス全体を完全に透明にする場合は、opacityプロパティの値を0にします。

sample.html

style.css

出力結果

opacityプロパティの透過値を0に指定したことで、opcクラスの要素は完全に透明化しています。

ボックス全体を半透明にする場合

ボックス全体を半透明にする場合は、opacityプロパティの値を0より大きく、1より小さい数値を指定します。

sample.html

style.css

出力結果

opacityプロパティの透過値を0.75に指定したことで、opc1クラス、opc2クラス、opc3クラスの要素は透明化しています。

ボックス全体を完全に不透明にする場合

ボックス全体を完全に不透明にする場合は、opacityプロパティの値を1に指定します。。

sample.html

style.css

出力結果

opacityプロパティの透過値を1に指定したことで、opcクラスの要素は完全に不透明化しています。
その為、opacityプロパティを指定していない要素と同じになります。

ボックスの特定の色のみを透明にする場合

ボックス特定の色のみを透明にする合は、rbga関数やhsla関数を使用します。

rgba関数とは赤(R)、緑(G)、青(B)、3色の光の強さと不透明度(alpha)を指定して、不透明度を持つ色を設定する関数となります。

また、hsla関数とは色彩(Hue)、明度(Saturation)、彩度(lightness)の3つの値と不透明度(alpha)を指定して色を設定する関数となります。

sample.html

style.css

出力結果

rbga関数やhsla関数を使用することで、ボックスの特定の色のみを透明に設定しています。

マウスを持ってきた時にボックスを透過させる場合

マウスを持ってきた時にボックスを透過させる場合は、hoverにopacityプロパティを使用します。

sample.html

style.css

出力結果

hoverによってマウスを持ってきた時にボックスを透過させています。

マウスを持ってきた時にボックスを不透明化させる場合

マウスを持ってきた時にボックスを不透明化させる場合は、hoverを指定したセレクターのopacityプロパティを1に、hoverを指定しないセレクターのopacityプロパティを透明値に指定します。

sample.html

style.css

出力結果

hoverを指定したセレクターのopacityプロパティを1に、hoverを指定しないセレクターのopacityプロパティを透明値に指定することでマウスを持ってきた時にボックスを不透明化させています。

今回のポイント

opacityでボックス全体を透過

⚫︎ ボックス全体を透過させるにはopacityプロパティを使用する

⚫︎ opacityは要素の透明度を指定するプロパティである

⚫︎ ボックス全体を完全に透明にする場合は、opacityプロパティの値を「0」に指定する

⚫︎ ボックス全体を半透明にする場合は、opacityプロパティの値を「0より大きく、1より小さい数値」に指定する

⚫︎ ボックス全体を完全い透に不透明にする場合は、opacityプロパティの値を「1」にを指定する

⚫︎ ボックスの特定の色のみを透明にする合は、rbga関数やhsla関数を使用する

⚫︎ マウスを持ってきた時にボックスを透過させる場合は、hoverにopacityプロパティを指定する

⚫︎ マウスを持ってきた時にボックスを不透明化させる場合は、hoverを指定したセレクターのopacityプロパティを1に、hoverを指定しないセレクターのopacityプロパティを透明値に指定する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し