更新ネットで色んなウェブサイトを見ていると、マウスが乗ったときに画像や文字の色が薄まるアクションを見かけることがありますよね。これを実装するのはとても簡単なので、ご紹介します。くじopacityプロパティーIE対応opacity:1;opacity:0.75;opacity:0.5;opacity:0.25;opacity:0;:hover擬似要素でマウスが乗ったときだけ半透明にHTMLcss半透明化は簡単opacityプロパティーopacityプロパティーは、透明度を表す数値です。0なら透明度ゼロなので完全に不透明、つまり全く見えなくなります。1なら透明度1(100%)なので完全に透明です。opacityプロパティーが指定されていないときは、透明度1すなわち完全に透明です。IE対応IE以前の古いIEではopacityプロパティーに対応できません。IEは独自の仕様であるfilterプロパティーで透明度を指定できます。「filter:Alpha(opacity=50);」は「opacity:0.5;」と同じ意味です。opacityプロパティーでは完全に透明な状態を1としているのに対して、「filter:Alpha(opacity=」では完全に透明な状態を100としている点に注意してください。以下、様々な透明度指定におけるCSSの記述を書いてみます。opacity:1;「style=”opacity:1;filter:Alpha(opacity=100);”」透明度1の画像opacity:0.75;「style=”opacity:0.75;filter:Alpha(opacity=75);”」透明度0.75の画像opacity:0.5;「style=”opacity:0.5;filter:Alpha(opacity=50);”」透明度0.5の画像opacity:0.25;「style=”opacity:0.25;filter:Alpha(opacity=25);”」透明度0.25の画像opacity:0;「style=”opacity:0;filter:Alpha(opacity=0);”」透明度0の画像。当たり前ですが何も見えません。:hover擬似要素でマウスが乗ったときだけ半透明に:hover擬似要素を使うことで、マウスが乗ったときだけ透明度を下げ、画像や文字の色が薄まるアクションを実現することが出来ます。マウスを乗せると透明度が下がります。HTMLとCSSは以下の通りです。/>css.hover-opacity50:hover{opacity:0.5;}半透明化は簡単どうでしょうか。マウスオーバー時に半透明化するのはとても簡単だと納得していただけたのではないでしょうか。皆さんのサイトにもドンドン取り入れてみてください。fシェアtツイートB!はてブ著者:ウェブシュフFP主夫ブロガー。メインサイトは家計ブログ。PHPやSEOと格闘しつつWordPressで運営しています。サイトをいじったときの備忘録などウェブ関連のことをまとめたサブサイトとして当サイトを運営しています。当ドメインの運営歴は現在8年目です。コメントをキャンセルメールアドレスが公開されることはありません。よる表記とプライバシーポリシ。