CSSで透明度を指定する方法【opacityとrgbaの使い分け方】 | WEBCAMP NAVI
【8月枠も残りわずか】転職保証コース

CSSで透明度を指定する方法【opacityとrgbaの使い分け方】

「画像や背景の透明度を指定したい!」
「HTML/CSS初心者だけど、オシャレなサイトを作りたい!」
そうやって考えたことはありませんか?

CSSのopacityやrgbaを使えば、簡単に画像や背景の透明度を決めることができます。

そうはいってもその2つの使い分けも曖昧になりやすく、難しく思ってしまう方が多いことも事実です。
今回の記事ではそんな方に向けて、opacityとrgbaの違いを解説していきます!

ぜひこの記事を最後まで読んで、透明度の指定を使いこなせるようになってください!

opacityとrgbaの違いはどこにある?

opacityとrgbaの大きな違いは「プロパティとプロパティ値の違い」にあります。
CSSは「どこの・何を・どうやって」変更するのかを指定していくものです。

その中の「何を」を決める部分であるプロパティであるのがopacityです。
rgbaは「どうやって」を決めるプロパティ値のことを指しています。

CSSプロパティ

opacityの基本的な考え方

opacityはCSSのプロパティです。
そのため、セレクタ全体の透明度を決めることができます。

例えば、opacityを使うときはこのようなコードになります。

sample.html
<!DOCTYPE html>
<html>
<head>
    <title>opacityとrgbaの使い分け</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	<div class="opacity-sample" id="opacity01">opacityの使い方</div>
	<div class="opacity-sample" id="opacity02">opacityの使い方</div>
</body>
</html>
sample.css
.opacity-sample {
	background-color: #337079;
	width: 200px;
	text-align: center;
}

#opacity02 {
	opacity: 0.5;
}

opacity

opacityは0から1までの間で指定することができ、数字が小さくなればなるほど透明に近づいていきます。
実際にopacityを使ってみると、セレクタ全体=画像・文字ともに透明度が高くなっていることがわかります。

rgbaの基本的な考え方

rgbaはCSSのプロパティ値を指します。
そのため「background」や「color」などのプロパティの値を指定する役割を持っています。

rgbaはRGBカラーモデルと呼ばれる色の表現方法の一種に色の透明度を表すalphaが加わったもので、Red/Green/blueを混ぜることで色を再現していきます。
例えば16進数で「#e55550」の色は、rgbの場合「229,85,80」で表します。

opacityがセレクタ全体に指定をする一方で、rgbaは背景色や文字色をそれぞれで変更することができます。

例えば、rgbaを使うときはこのようなコードになります。

sample.html
<!DOCTYPE html>
<html>
<head>
    <title>opacityとrgbaの使い分け</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	<div class="rgba-sample" id="rgba01">rgbaの使い方</div>
	<div class="rgba-sample" id="opacity02">rgbaの使い方</div>
</body>
</html>
sample.css
.rgba-sample {
	background-color: #337079;
	width: 200px;
	text-align: center;
}

#rgba02 {
	background:rgba(51,112,121,0.4);
}

rgba

rgbaの透明度を表すalphaは0から1までの間で指定することができ、数字が小さくなればなるほど透明に近づいていきます。
画像を見れば分かる通り、今回は「background」に指定をしているので、文字色は変わらず背景色だけが透明に近づいています。

opacityとrgbaの比較

それぞれの指定についてわかったところで、両者の違いを比べてみましょう。
今回はこのhtmlについてCSSで装飾を変えていきます。

sample.html
<!DOCTYPE html>
<html>
<head>
    <title>opacityとrgbaの使い分け</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	<div class="sample" id="sample01">透過の使い分け</div>
	<div class="sample" id="sample02">透過の使い分け</div>
	<div class="sample" id="sample03">透過の使い分け</div>
	<div class="sample" id="sample04">透過の使い分け</div>
	<div class="sample" id="sample05">透過の使い分け</div>
	<div class="sample" id="sample06">透過の使い分け</div>
</body>
</html>

これに対して、順番にopacityを使って全体を透過、rgbaを使って背景色を透過、rgbaを使って文字を透過しています。

透過①

透過②

透過③

それぞれのコードを知りたい方は、クリックしてみてください!

sample.css
.sample {
	width: 200px;
	text-align: center;
}

#sample01{
	background: #337079;
        opacity: 1;
}
#sample02{
	background: #337079;
	opacity: 0.8;
}
#sample03{
	background: #337079;
	opacity: 0.6;
}
#sample04{
	background: #337079;
	opacity: 0.4;
}
#sample05{
	background: #337079;
	opacity: 0.2;
}
#sample06{
	background: #337079;
	opacity: 0;
}
sample.css
.sample {
	width: 200px;
	text-align: center;
}

#sample01{
	background: rgba(51,112,121,1);
}
#sample02{
	background: rgba(51,112,121,0.8);
}
#sample03{
	background: rgba(51,112,121,0.6);
}
#sample04{
	background: rgba(51,112,121,0.4);
}
#sample05{
	background: rgba(51,112,121,0.2);
}
#sample06{
	background: rgba(51,112,121,0);
}
sample.css
.sample {
	width: 200px;
	text-align: center;
}

#sample01{
	background: #337079;
	color: rgba(0,0,0,1);
}
#sample02{
	background: #337079;
	color: rgba(0,0,0,0.8);
}
#sample03{
	background: #337079;
	color: rgba(0,0,0,0.6);
}
#sample04{
	background: #337079;
	color: rgba(0,0,0,0.4);
}
#sample05{
	background: #337079;
	color: rgba(0,0,0,0.2);
}
#sample06{
	background: #337079;
	color: rgba(0,0,0,0);
}

opacityとrgbaの使い方を理解しよう!

では実際に、opacityやrgbaを使って透明度を指定する方法をみていきましょう。

この2つの方法は透明にしたい対象によって使い分ける必要があります。
画像などの対象全体の透明にはopacityを使い、文字や色を付けられる要素にはrgbaを使用します。

対象全体を透明にするopacity

opacityは画像のような対象全体を透明にすることができます。

画像にopacityを指定することで、文字を目立たせることもできます。

opacity10の数字で示すことができ、1はそのまま変わらず不透明な状態です。
0は完全に透明で何も見えない状態になります。
小数点のある値で透明度の数値は設定することができます。

注意

opacityは、対象全体に効果を表すので使う場面に注意しましょう。
例えば、文字を子要素に持つ背景だけを透明にするためにopacityを使うと、一緒に文字も透明になってしまいます。
うまくrgbaと使い分けることが必要です。

画像に対してのopacity

画像を透明にすることで、文字を読みやすくしたり、圧迫感を抑えた奥行きのあるサイト作りができます。

CSS
image {
  opacity: 0.5;
}

上記のコードでは、opacityで透明度を0.5にしています。

セレクタには透明にしたい要素を適応させ、その中にopacityで値を設定しましょう。
ここでは透明にしたい要素に、画像を示すセレクタであるimageを使っています。

複数の画像に対して使うことで、透明な画像を重ねて使うことができるなど、様々な表現ができます。
またopacityは、ボックス要素にも使えることができ、デザインの幅が広がります。

hover時に透明にする方法

次に、マウスが要素の上に乗った時に透明になる方法を紹介します。
:hoverを の前に置くことで、マウスが上に乗った時の状態を示すことができます。

CSS
.image:hover {
  opacity: 0.5;
}

ここでは、セレクタを画像を示すimageにしており、透明度を表すopacityの値を0.5にしています。
これでマウスが上に乗った時、要素を透明にすることができ、簡単に動きのあるサイトが作れます。

色をつけるrgba

rgbaとは、色を付けられる対象を透明にできるタグです。
色を付けられる対象とは、文字、文字の背景、ボーダーなどのことです。

例えばrgbaを使うと、文字はそのままで、文字の背景だけを透明にすることができます。この方法は後ほど説明します。


rgbaは、4つの数値で対象の色と透明度を示しています。
rredで赤、ggreenで緑、bblueで青、aalphaという透明度を指定するもので、それぞれに数値が入ります。

透明度を表す値はopacityと同じく0〜1で、0が透明で、1が不透明です。 

文字に対して

文字を透明にすることで後ろの画像を引き立たせることもできます。

CSS
color: rgba (0,0,0,0.5);

このコードを使用すると、透明度の値が0.5なので、半透明の黒い色が適応されます

背景に対して

背景にrgbaを使って透明にすることで、文字はそのままで背景だけを透明にすることができます。

CSS
background-color: rgba (148,255,226,0.5);

CSSでbackground-colorの背景色の選択をし、rgbaの値を選択します。
このコードでは透明度0.5の薄黄緑を表しています。

透明な背景と文字を組み合わせたりすることで様々な表現ができ、デザイン性のあるサイトになるでしょう。

CSSで透明にするの際の注意点

CSSで透明度の指定をしても、反映されないことがあります。
その場合、ブラウザが対応していない可能性があるので確認しましょう。
以下のブラウザでない場合、透明にすることに対応していません。

透明にすることに対応しているブラウザ

  • Firefox 3.0以上
  • Google Chrome どのバージョンでも可
  • Safari 3.0以上
  • Opera 10.0以上
  • Internet Exprore 9.0以上

簡単にrgbaの数値を出す方法

CSSで色を決めるときは16進数を用いることが多いと思います。
そのような16進数で表している色を、rgbaで指定する際はうまく変換サイトを活用しましょう。

例えば、PEKO-STEPというサイトを使えば、16進数からrgbaに変換することができます。

まとめ

opacityを使えばセレクタ全体の透明度を、rgbaを使えば色の変更ができる部分の透過をすることができます。
自分が透明にしたい部分はどこなのかを確認しながら、その2つを使い分けられるようにしましょう。

きっとWebページのデザイン性の幅がぐんと広がるはずです!

\CSSでデザインを整える方法についての記事を合わせて読む/

CSSで中央寄せにする方法【要素を縦横自由に中央寄せ!】 CSSのdisplayをマスター!【要素理解がカギになる】

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率は98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点