未分類CSSのopacityで要素をちょっと透明にする方法と活用法まとめナナミ2018/5/292018/11/27こんにちは!ライターのナナミです。WEBサイトでちょっと透明にした要素を使いたい...なんて思ったこと、ありませんか?こんな感じに透過した要素が使えると、いろんなレイアウトができそうですね。実は、要素の透過ってCSSでサクッと実装できちゃうんです!ということで今回は、要素を透過するopacityについてまとめました。この記事は下記の流れで解説していきます。【応用】opacityの使用例opacityはアニメーションとの相性も抜群!しっかり覚えて、素敵なWEBサイトを作れるようになっちゃいましょう。まとめopacityとは?opacityは要素の透明度を指定することができるプロパティです。ブロック要素でもインライン要素でもなんでもござれ、どんな要素にも透明度を指定できちゃいます。オールドブラウザも含めて、問題なく動作してくれます。ブラウザの違いも考える必要なく、気軽に使うことができます。opacityの使い方opacityは下記のように指定します。opacity:数値;}数値によって、要素の透明度を指定しています。数値の範囲は1.0〜0.0です。1.0が全く透明ではない状態、0.0が完全な透明の状態です。数値が大きければ色が濃い状態になるわけです。透明度70%の要素を作ってみましょう。*/}こんな感じです!opacityを使う時の注意点opacityは要素の透明度を指定します。要素丸ごと、中にある子要素も含めて透明度がつきます。*/}子要素についた透明度は、子要素への指定では打ち消せません。設定を引き継いでいるのではなく、丸ごと透明になってしまっているからです。子要素には影響を出したくない...そんな時は、背景色をRGBAにしたり、文字だけ別のクラスを作ってからopacityをつけるなどの工夫をしてみましょう。2019年7月30日opacityの使用例ちょっとクセがあるopacityですが、仕組みさえわかってしまえばこっちのもの。上手く使えば、ボタンの見せ方などを素敵にすることができちゃいます。下記の例も参考にしてみてください。*/}:hoverにopacityをつけて、マウスオーバー時に色が変化するようにしました。いう動きがあると、クリックできる領域を明確にできるのでいいですね。}}animationと組み合わせて、読み込んだ後にふわっとロゴが表示されるようにしてみました。*/}中の文字はそのままの濃さがいいけれど、背景画像だけ透過させたい...そんな時には、positionと擬似要素を上手く使って実装しちゃいましょう。高さをきちんと決める必要がありますが、そこさえ押さえれば綺麗に実装できちゃいます。positionや擬似要素がよくわからないから、この方法は使えなさそう...そんな方は下記の記事をチェック!positionや擬似要素とは何かから使い方までバッチリ解説しています。2018年11月27日まとめいかがでしたか?要素を透明に、というだけですが、使えると動きの幅がグッと広がりますね。今回紹介したような使い方以外にも、色々な場面で活躍してくれるプロパティです。試しながら使ってみてください!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。フリーターを経てフロントエンジニアになる。jQueryなどのコーディングやCMS設計に従事。文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。体は日本酒でできている。