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

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

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

くま

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

ラムネ

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

この記事の結論

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

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

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

参考記事

cssのopacityを使って透明度を操作する方法を解説

この記事では、CSSのopacityプロパティを使って、要素を透過させる方法を解説します。本記事のポイントは下記の通りです。 リファレンスよりもわかりやすく、サンプルや図を使って解説 要素を透過する方法をシチュエーション ...

rgbaの使い方

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

くま

なんだか混乱してきた…

ラムネ

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

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

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

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

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

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

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

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

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

ラムネ

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

光の三原色の指定方法

光の三原色で指定するには、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;
 }
 

色は変えずに透明度だけ変化させています。上から下に向かって透明度が低くなり、はっきりと表示されていくのがわかりますね。

くま

徐々に濃くなっていってるのがわかるね

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;
}

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

くま

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

ラムネ

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

まとめ

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

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

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

関連記事

cssのopacityを使って透明度を操作する方法を解説