1. TOP
  2. html&CSS入門
  3. 【css】透明度を表すrgbaとopacityの違いや使い方を解説

【css】透明度を表すrgbaとopacityの違いや使い方を解説

この記事ではCSSで透明度を指定できる「rgba」について解説していきます。

透明度が指定できるプロパティ には「opacity」がありますが、どのように使いわければ良いかについてもわかりやすく解説します。

くま

どっちも透明度のプロパティだよね?何が違うんだろう

あざらし

その通り!2つの使い分けをわかっておくととても便利なので覚えておこう

この記事の結論

結論から先に書くと、この記事を読むことで下記のようなことが理解できると思います。

  1. rgbaの使い方を理解できる
  2. opacityは要素全体を透明にする。子要素も透明になる。
  3. rgbaは要素の一部分のみに透明にする。子要素には影響なし。

「opacity」ってなんだっけ?という方は別の記事で解説していますのでそちらを参考にしてください。

rgbaの使い方

rgbaは要素に色を指定する方法の一つ、「rgb」に「a」が追加されたものです。aはアルファの頭文字で透明度を表します。

くま

なんだか混乱してきた…

あざらし

ちょっと整理して一つずつ解説していくね

色の指定方法は3種類ある

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

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

透明度を指定できるのは光の三原色だけ

この中で光の三原色で指定する方法だけが透明度を指定する事ができます

光の三原色で指定する方法とは、red(赤)、green(緑)、blue(青)の組み合わせで色を指定する方法です。慣れていないと使いづらいですが、photoshopなどでデザインする人にはおなじみの方法です。

同じ色であっても、カラーネームやカラーコードで指定もできるし、光の三原色を使っても指定できます。

ですので自分の覚えやすい指定方法を使って良いのですが、透明度を指定したい場合には光の三原色を使う必要があるということを覚えて置きましょう。

あざらし

基本的にはシンプルに書けるカラーコードで指定して、透明にしたいときだけ光の三原色を使うパターンが多いよ

カラーコードを光の三原色に変換する方法

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

光の三原色の指定方法

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

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

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

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

あざらし

透明度まで指定したい場合は、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とopacityの違い

くま

そういえばopacityとの違いはなんなんだ?

あざらし

opacityに透明度を指定した場合は、全てが透明化されるんだ!

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

opacityとrgbaの違いは、opacityで透明度を設定すると要素全体に影響するのに対して、rgbaは一部分のみに透明度を適用される点です。ポイントを整理すると下記のようになります。

  • opacityで透明度を指定された要素は、ボーダーも背景も、文字も、子要素も全部含めて半透明になります。
  • 一方でrgbaは、ボーダーに指定すればボーダーに、背景に設定すれば背景だけに透明度が適用されます。もちろん子要素にも影響はありません。

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

rgbaとopacityの違いを具体的に見てみよう

具体的にどのような違いがあるのか見てみましょう。まずは透明度を指定しないボックスと文字を記述します。

<p class="demo248">これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文
  <span>ここは子要素ここは子要素ここは子要素ここは子要素</span>
</p>
.demo248{
  color: #22ff22;
  border: 3px solid tomato;
  background-color: #222222;
  padding: 20px;
}

これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文 ここは子要素ここは子要素ここは子要素ここは子要素

opacityで透明度を指定した場合

opadityで透明度を指定してみましょう。

<p class="demo248_1">これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文
  <span>ここは子要素ここは子要素ここは子要素ここは子要素</span>
</p>
.demo248_1{
  color: #22ff22;
  border: 3px solid tomato;
  background-color: #222222;
  padding: 20px;
  opacity: 0.5; /*   追加 */
}

これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文 ここは子要素ここは子要素ここは子要素ここは子要素

ボーダーも背景も、文字も、子要素も全部含めて半透明になっていますね。

rgbaで透明度を指定した場合

今度はrgbaで透明度を指定してみます。今回は背景色を半透明にしてみます。

<p class="demo248_2">これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文
  <span>ここは子要素ここは子要素ここは子要素ここは子要素</span>
</p>
.demo248_2{
  color: #22ff22;
  border: 3px solid tomato;
  background-color: rgba(34,34,34,0.5);/*   変更 */
  padding: 20px;
}

これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文 ここは子要素ここは子要素ここは子要素ここは子要素

背景色だけが半透明になり、他の要素は透明になっていないことが確認できます。

ちなみに

カラーコード「#222222」はrgbで表すと、「34,34,34」になります。

くま

opacityは子要素も透明化されてしまうのか

あざらし

そうなんだ!要素の一部分だけ透明度を変えたい場合は、rgbaを使おう

まとめ

rgbaの使い方と、opacityとの違いについて解説しました。

ポイントは以下の通りです。

  • rgbaは光の三原色rgbに、透明度の「a」が追加されたもの。
  • aはAlpha channel(透明度)の頭文字。
  • opacityは要素全体を透明にする。子要素も透明になる。
  • rgbaは要素の一部分のみに透明度を適用できる。子要素には影響なし。