1. TOP
  2. html&CSS入門
  3. CSSで透明度を指定できるrgbaの使い方!opacityとの違いを解説

CSSで透明度を指定できるrgbaの使い方!opacityとの違いを解説

CSSで色を指定するには、カラーコードを使う方法や、カラーネームを使う方法、光の三原色で指定する方法があります。

  • カラーコード…「#ff0055」のような16進数で指定する方法
  • カラーネーム…「red」「black」のような色の名前で指定する方法
  • 光の三原色…「rgb(255 , 255 ,255)」のような、赤・緑・青の3色の数値で指定する方法

このなかで光の三原色で指定する方法だけが、色の他に透明度を指定することが出来ます。

透明度が変えられるようになると、表現の幅がグッと広がるので覚えておくととても便利です。

RGBAの使い方

光の三原色で指定で指定するには、rgb()もしくはrgba()を使います。

color:rgb(255, 255, 255);
color:rgba(255, 255, 255, 1);

rgb()はそれぞれ、red(赤)、green(緑)、blue(青)の頭文字で、それぞれの値を0~255で指定します。

rgba()は上記にAlpha channel(透明度)を追加したもので、0~1で指定します。0で完全に透明、1で完全に不透明になります。

透明度を指定できるのはrgbaだけ

色を指定するには、「#ff2200」のようにカラーコードを使うか、「red」のようにカラーネームを使うか、もしくはrgba(rgb)を使って色を指定することになります。

基本的には、簡潔に記述できるのでカラーコードを使うことが多いですが、透明度を指定できるのはrgba()だけなので、半透明にしたい場合などにrgba()を使います

実際に透明度を指定するとどうなるか見てみましょう。

 <div id="demo_230">
   <p id="demo_230-1">アルファ0です</p>
   <p id="demo_230-2">アルファ0.2です</p>
   <p id="demo_230-3">アルファ0.4です</p>
   <p id="demo_230-4">アルファ0.6です</p>
   <p id="demo_230-5">アルファ0.8です</p>
   <p id="demo_230-6">アルファ1です</p>
 </div>
 #demo_230-1{
   background-color: rgba(255, 99, 71, 0);
 }
 #demo_230-2{
   background-color: rgba(255, 99, 71, 0.2);
 }
 #demo_230-3{
   background-color: rgba(255, 99, 71, 0.4);
 }
 #demo_230-4{
   background-color: rgba(255, 99, 71, 0.6);
 }
 #demo_230-5{
   background-color: rgba(255, 99, 71, 0.8);
 }
 #demo_230-6{
   background-color: rgba(255, 99, 71, 1);
 }
 
 /* 親要素のスタイル*/
 #demo_229{
   background-color: royalblue;
   padding: 10px;
 }
 
 /* 共通スタイル */
 #demo_229 p{
   width: 200px;
   padding: 5px;
   background-color: tomato;
 }
 

アルファ0です

アルファ0.2です

アルファ0.4です

アルファ0.6です

アルファ0.8です

アルファ1です

背景色に透明度を指定しています。上から下に向かって透明度が低くなってはっきりと表示されていくのがわかります。

rgbaの数値はジェネレータを使おう

ちなみに、下記のようなジェネレーターを使えば、カラーコードをrgbに変換することが出来ます。

RGBと16進数カラーコードの相互変換ツール

opacityとの違い

cssで透明度を調整するには、opacityプロパティが使われることが多いです。

opacityrgbaの違いは、opacityで透明度を設定すると要素全体が影響するのに対して、rgbaは一部分のみに透明度を適用できる点です。

opacityで半透明を指定された要素は、ボーダーも背景も、文字も、子要素も全部含めて半透明になります。

一方でrgbaは、ボーダーに指定すればボーダーに、背景に設定すれば背景に透明度が適用されます。もちろん子要素にも影響はありません。

一部分だけ透明度を指定したい場合はrgbaを使うと認識しておきましょう。