2023.1.23開発フロントエンド透明度rgba透過CSS初心者向け開発かすみあとで読む今回は、CSSを使ってオブジェクトを透過させる方法を解説します。透過を用いることでデザインの幅も広がるので、ぜひ覚えていきましょう!はじめまして、イッパイアッテナです。ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。Web制作の相談はこちら目次CSSで透過させる2つの方法opacityで透過する方法rgbaで透過させる方法opacityとrgbaの違いopacityの場合rgbaの場合まとめCSSで透過させる2つの方法CSSで透過させる方法は、主に以下の2つです。opacity(オパシティー)rgba(アールジービーエー)では、それぞれ詳しく見ていきましょう。opacityで透過する方法opacityを用いて記述するCSSは以下の通りです。0.5;}たったこれだけ!透過度は0~1まであり、0に近いほど薄くなります。opacityが1の時opacityが0.5の時opacityが0.1の時rgbaで透過させる方法rgbaで記述するCSSは以下の通りです。rgba(0,0,0,0.5);}rgbaはそれぞれ、red(赤)、green(緑)、blue(青)、alpha(アルファ:透明度)を意味しています。rgbは、0~255までの値で記述します。aは、opacityと同様に0~1の値で指定し、0に近いほど透明度は薄くなります。値によっての透明度はopacityの時と同様です。opacityとrgbaの違いでは、この2つはどのように使い分けると良いのでしょうか?違いは以下の通りです。opacityは、指定した要素全てが透過されるrgbaは、一部のみ透過される詳しく見ていきましょう。400px;/*今回の幅の値*/}すると、文字を含めて全ての要素が薄く変わりました。400px;/*今回の幅の値*/}opacityの時と異なり、文字の透明度はそのままで背景色のみ薄くなりました。opacityはセレクタ全体に指定するのに対し、rgbaはbackground-colorやcolorなどのプロパティに個別で指定ができます。まとめCSSで透過する方法は主に2つありました。opacityは全ての要素、rgbaは一部の要素を透過する違いがあるので、適宜使い分けていきましょう。私なりの気づきを皆さまにお届けします✨よかったらシェアしてね!URLをコピーしました!URLをコピーしました!Web制作について相談してみませんか?必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。Reserved.あとで読む「あとで読む」機能を使用するには、ログインをしてください。(21)用語集データのダウンロードデータをダウンロードするにはログインをしてください。ログイン会員登録ページを表示できません。このサイトは、最新のブラウザでご覧ください。