CSS
LINEでログイン
Googleでログイン
Twitterでログイン
RGBaとは
RGBaとは、色を扱う際の表記法のひとつで、赤（Red）、緑（Green）、青（Blue）、透明度（Alpha）の組み合わせからなる表現方式です。IT分野では、透過度の情報のことをアルファ値と言います。
透過度が組み合わさることであらゆる色の表現とともに半透明の表現ができるようになり通りの色表現ができるようになります。
しかしこれだけ種類が多くてもイメージした透明度の数値を調べるのは大変です。
そのような場面では、rgbaジェネレーターを使いましょう。
いくつかの種類の無料ジェネレーターが公開されているので検索して選りすぐりのものを使用しましょう。
opacityとは
opacityとは、要素の不透明度を設定するために用意されたCSSのプロパティです。
使用する際の値には、要素の不透明度を0から1までの数値で指定するか（0が透明、1が不透明）、0%~100%のパーセンテージで指定します。
背景を透過させたい場合、初心者の場合opacityで透過を試みると思いますが、opacityを背景にあてた場合、背景上にあるテキストなどの要素も一緒に透過されてしまいます。
背景のみを透過させたい場合はRGBaを使った指定が必要になります。
間違えやすいポイントなので覚えておきましょう。
CSSの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。
問題10：背景を透過させてみよう
用意した青い背景を透過させて、見本画像のように表示しましょう。
あらかじめエディタに書くコード
<div class="back_image">
<div class="text">
ninjacodeninjacode
ninjacodeninjacode
ninjacodeninjacode
ninjacodeninjacode
</div>
</div>
¥HTML¥
.back_image {
height: 200px;
padding: 30px;
background: rgba(0,0,250);
}
¥CSS¥
期待する画面
解答ソースコード
.back_image {
height: 200px;
padding: 30px;
background: rgba(0,0,250,.2);
}
¥CSS¥
完了にする！
活動記録をTweetする
色指定をする際に使用していたRGBに透明度(alpha)を加えたものです。
書き方はほとんど一緒で、カンマで区切って指定します。
透明度の値は、透明度1から0の間で小数点を使って指定します。
これはopacityプロパティで指定する方法と同じになります。
opacityプロパティで透過することも可能ですが、今回のような背景に適用する場合は、opacityを使ってしまうとテキストも一緒に透過されてしまうため、RGBaを使用します。部分的なものなどであれば、opacityを使用すると良いでしょう。