CSSのrgbaプロパティでcolorと透明度を指定する方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSのrgbaプロパティでcolorと透明度を指定する方法について解説しています。rgbaプロパティでは、RGBに加えて透明度を設定することができます。基本の書き方と透明度を指定した場合の表示、実際の活用例について見ていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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に画像を指定すると、以下のように背景が透けて見えます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

活用場面

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では初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。