rgba()を使って透過させる
要素を透過させる時には「opacity」を使用すると思います。
ですが「opacity」では、CSSを割り当てた要素全体が透過します・・・
なのでその要素に含まれる画像や文字も透過してしまい、文字が読めないとか、画像が見えないとか・・・そういった困った事になってしまいますね。
背景の色だけを透過させたいシーンは様々あると思います。
そんな時に活躍するのがrgba()です。
rgbaは赤緑青透明度
rgba・・・一目でみると何かの呪文見たいですね。
ですがこれをRGBAにするとどうでしょうか・・・この字面を見ていたらゲームボーイアドバンス（GBA）を思い出してしまいました・・・
Webで使われる色は光の三原色なので・・・RはRed（赤）、GはGreen（緑）、BはBlue（青）という意味合いです。
最後のAはAlpha（アルファ）値、つまり「透明度」です。
RGBの値は1～255の数字で色を指定し、Aの値は0～1の間で指定します。
Aの値は小数点を使って表現する
Aの値だけ0～1で指定しますが、これは「1=100%」という意味合いです。
なので透明度を50%にしたい場合は「0.5」を指定する事ができます。
もっと細かく指定し、「0.35（35%）」とか「0.255（25.5%）」とかを指定する事もできます。
実際に透過させてみる
上から順に透過させてみました。
実は背景色だけではなく、文字などの色指定にも使うことができます。
かなりCSSでできる幅が広がりますね。
写真の上に文字を載せるとき、背景に色がないと読みにくいですが、背景が真っ白になると見えなくなる部分が生まれてしまいます。
かといって、写真を加工しておいたとしても、入る文字数が変わってしまったり、レスポンシブサイトにする必要があった場合にはテキストの収まるボックスを固定する事もできないので、対応が難しい所でした。
ですがCSSで指定すれば、画像加工をする必要もありませんし、より柔軟に対応ができるようになります。
rgbは10進数で表す
色を指定するとき、よく使われる方法は16進数で「#FF0000 = 赤」といったように指定します。
ですがrgbで指定する時は10進数を使って「255,0,0 = 赤」といったように指定しなければなりません。
16進数を10進数に変換する方法を説明しだすと、数学の話になってこんがらがってくるので割愛します。
時間をかけて変換するのは大変です・・・数学が大好きな人なら楽しいのかもしれませんが、私はニガテです・・・
なので色見本を見ましょう。
WEB色見本 原色大辞典 （https://www.colordic.org/）
それぞれの色をクリックしていくと、色を指定するカラーコードがそれぞれ表示されますし、色相や明度、近似色なども合わせて表示してくれるので、とても便利です。
まとめ
透過を使う場合は「rgba();」を使い、0～255の10進数で色を指定し、0～1の間で透明度を指定します。
これができれば、透過させたpng画像を用意して、要素の後ろに貼り付けて・・・という事もなくなります。
なので「赤を透明にしたものも見たいなぁ」とかいった修正にも俊敏に対応する事ができるようになります。
レスポンシブサイトを作る時にも利用シーンが多いCSSなので、ぜひ覚えて活用しましょう。
