皆さんは、CSSで色を指定するrgbaプロパティを使ったことがありますか？ ただ色を指定するだけでなく透明度も指定できるため、使い方を覚えておくと便利です！
そこで今回は、
- CSSで色・透明度を指定するrgbaプロパティとは？
- rgbaプロパティの使い方・サンプルコード
といった基礎的なことから、
- 透明度を指定するopacityとrgbaプロパティの違いとは？
- rgbaプロパティのブラウザサポート状況
といった応用的な方法まで、徹底的に解説します！
CSSで色・透明度を指定するrgbaプロパティとは？
最初に、rgbaプロパティについて簡単に解説します。rgbaプロパティとは、CSS3で新たに追加された、「色・透明度」を指定するプロパティです。
rgbaプロパティを使った色・透明度指定のイメージ：
色のみだと固い表現になってしまいますが、透明度を意識するだけでぐっと見やすさが上がるため、使いこなすとても便利です！
rgbaプロパティの使い方・サンプルコード
次に、rgbaプロパティの使い方について解説します。rgbaプロパティは、次のように使います。
使い方：
backgroud-color(またはcolor):rgba(赤 , 緑 , 青 , 透明度)
赤・緑・青には0 ~ 255までの数値を指定し、透明度には0 ~ 1までの数値を指定します。透明度は0が0%、0.5が50%、1が100%で数字が小さいほど透明度が高いです。
言葉だけではわかりづらいため、簡単なサンプルコードを用意しました。
サンプルコード – HTML：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>rgbaサンプル</title>
<link rel="stylesheet" href="main2.css">
</head>
<body>
<h2>rgbaサンプル</h2>
<div class="main-block">
<div class="rgba-1">100%</div>
<div class="rgba-2">50%</div>
<div class="rgba-3">20%</div>
</div>
</body>
</html>
サンプルコード – CSS：
/* ブロック全体のデザイン */
div{
width:auto;
height:20px;
}
/* 上のブロック (100%) のデザイン */
.rgba-1{
background-color:rgba(255,0,0,1);
}
/* 真ん中のブロック (50%) のデザイン */
.rgba-2{
background-color:rgba(255,0,0,0.5);
}
/* 下のブロック (20%) のデザイン */
.rgba-3{
background-color:rgba(255,0,0,0.2);
}
実行結果：
このように、簡単に色・透明度を指定することができます。
rgbaの色・透明度はジェネレータを使ってコピペでOK
ここまでrgbaプロパティの色・透明度について解説してきましたが、イメージした透明度の数値を調べるのは結構大変です。
そんな時におすすめなのが、rgbaジェネレーターです。
以下のrgbaジェネレーターはメインの色を指定するだけで、10段階にわけた透明度を自動で作成してくれます。
作成イメージ：
色を決めたらジェネレーターを使って視覚的に確認しつつ、適した透明度のrgba値を選べばOKです！
rgbaプロパティの使い方とあわせて、覚えておくのがおすすめです！
透明度を指定するopatityとrgbaプロパティの違いとは？
ここまでrgbaプロパティで透明度も指定できることをお伝えしてきましたが、、、CSSには透明度を指定するopatityプロパティがあります。
こう聞くと、「rgbaプロパティとopatityプロパティは、どうやって使い分ければいいんだろう？」と思う方も結構いるので、簡単に違いについて解説しますね。
「rgbaプロパティ」と「opatityプロパティ」は大きく分けて、次の2つの違いがあります。
- 画像の透明度指定ができるか
- 透明度が影響する範囲
rgbaプロパティは色を指定することが前提のプロパティのため、画像に透明度を指定するときには使えません。そのため、画像に透明度を指定したい場合は、opatityプロパティを使います。
また、親要素・子要素がある入れ子の要素に対して透明度を指定する場合、少し動きが変わります。親要素・子要素がある場合、rgbaプロパティを使うと親要素にしか透明度が指定されません。
そのため、親要素・子要素に透明度を指定したい場合は、opatityプロパティを使います。
「1つの要素で色を透明にしたいときのみrgbaプロパティを使い、それ以外はopatityプロパティを使う」と覚えておけばOKです！
rgbaプロパティのブラウザサポート状況
最後に、rgbaプロパティのブラウザサポート状況について解説します。
2018年1月21日時点で、対応しているバージョンについてまとめました。
- Chrome：1.0以上
- IE：9.0以上
- FireFox：3.0以上
- Safari：3.1以上
- Opera：10.0以上
参考：w3schools.com CSS rgba() Function
最新バージョンではどのブラウザでも対応できますが、古いバージョンで動くことを前提としたアプリを作るときは、注意が必要です。
まとめ
今回は、CSSで色・透明度を指定するrgbaプロパティの概要・使い方について解説しました。
透明度を意識した色を使うケースは、よくあります。
使い方もとても簡単なので、ぜひ使ってみてくださいね！
