CSSのrgbaプロパティでcolorと透明度を指定する方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSのrgbaプロパティでcolorと透明度を指定する方法について解説しています。rgbaプロパティでは、RGBに加えて透明度を設定することができます。基本の書き方と透明度を指定した場合の表示、実際の活用例について見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSのrgbaプロパティでcolorと透明度を指定する方法について解説します。これができるようになると、画像を透過しその上に文章やキャッチコピーが載せられるようになります。ぜひ参考にしてみてください。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
rgbaプロパティでcolorと透明度を指定する方法について詳しく説明していくね！
お願いします！
rgbaプロパティについて
rgbaプロパティでは、色と透明度の設定が可能です。
rgbaとは、R：red/赤、G：green/緑、B：blue/青、A：alpha/透明度を表しており、
RGBの値については0〜255で、Aは0〜1で指定します。透明度は0で完全に透明、1で透明度がない状態になります。
rgba(赤の割合, 緑の割合, 青の割合, 透明度)
HTML：
<html> <head> <meta charset="utf-8"> <title>rgbaプロパティを使ってみよう</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="box1">rgba(0, 255, 0, 1)</div> <div class="box2">rgba(0, 255, 0, .7)</div> <div class="box3">rgba(0, 255, 0, .5)</div> <div class="box4">rgba(0, 255, 0, .3)</div> </body> </html>
CSS：
div{
width:300px;
height:200px;
float:left;
font-size:20px;
text-align:center;
line-height:200px;
color:#fff;
}
.box1{
background:rgba(0,255,0,1);
}
.box2{
background:rgba(0,255,0,.7);
}
.box3{
background:rgba(0,255,0,.5);
}
.box4{
background:rgba(0,255,0,.3);
}
rgbプロパティとの違い
rgbプロパティでは色だけを指定し、透明度は指定できません。
rgb(127, 255, 127)とrgba(0, 255, 0, .5)は背景色が白の場合には同じ色見えますが、透明度がある場合には、背景が透けて見えるという点に注意しましょう。
HTML：
<html> <head> <meta charset="utf-8"> <title>rgbaプロパティを使ってみよう</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="box1">rgba(0, 255, 0, .5)</div> <div class="box2">rgb(127, 255, 127)</div> </body> </html>
CSS：
.box1,.box2{
width:300px;
height:400px;
float:left;
margin-left:10px;
font-size:20px;
text-align:center;
line-height:400px;
color:#fff;
}
.box1{
background:rgba(0,255,0,.5);
}
.box2{
background:rgb(127,255,127);
}
bodyのbackgroundに画像を指定すると、以下のように背景が透けて見えます。
活用場面
rgbaで色を指定する場合には、簡単に同じ色味で色の濃さを変更できるので、hover時の色の指定や、繰り返しのデザインで少し色を変えたい場合などに便利です。
またbox-shadowなどで、影の色を設定するときなどは、透明じゃないグレーを設定するよりも、透明度のある黒を設定することでより自然な影を作ることができます。
rgbaプロパティを使ってみよう
rgbaプロパティを使って、ボタンをデザインしてみます。rgbaを使わずにボタンを作った場合と比べてみましょう。
HTML：
<html> <head> <meta charset="utf-8"> <title>rgbaプロパティを使ってみよう</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <a href="#" class="btn1">BUTTON</a> <a href="#" class="btn2">BUTTON</a> <a href="#" class="btn3">BUTTON</a> </body> </html>
CSS：
@charset "UTF-8"; /*文字コードの指定*/
body{
background:url(../images/banana.jpg);
}
a{
display:block;
width:200px;
padding:1em 0;
margin:40px auto;
color:#000;
text-align:center;
text-decoration:none;
background:rgba(0,255,0,1);
border-radius:10px;
font-weight:bolder;
}
a.btn2{
background:rgba(255,0,0);
color:#fff;
box-shadow:0 5px 5px rgba(0,0,0,.3);
}
a.btn3{
background:rgba(255,255,255);
color:tomato;
box-shadow:0 5px 5px rgb(125,125,125);
}
a.btn1:hover{
background:rgba(0,255,0,.5);
}
a.btn2:hover{
background:rgba(255,0,0,.7);
}
a.btn3:hover{
opacity:.5;
}
新しいタブを開いて、実行結果のmp4動画ファイルを再生します。
3つ目の白いボタンにはrgbaプロパティを使用していません。
hoverではopacityで<a>要素の透明度を変更していますので、BUTTONの文字も透けていることがわかります。
また、ボタンの影は透明度のないグレーを指定しているため、背景の画像が透けていません。
rgbaプロパティで、表現の幅を広げてください。
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
