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プロパティで、表現の幅を広げてください。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
