「画像や背景の透明度を指定したい！」
「HTML/CSS初心者だけど、オシャレなサイトを作りたい！」
そうやって考えたことはありませんか？
CSSのopacityやrgbaを使えば、簡単に画像や背景の透明度を決めることができます。
そうはいってもその２つの使い分けも曖昧になりやすく、難しく思ってしまう方が多いことも事実です。
今回の記事ではそんな方に向けて、opacityとrgbaの違いを解説していきます！
ぜひこの記事を最後まで読んで、透明度の指定を使いこなせるようになってください！
＼参加者満足度99％！／
無料カウンセリングに申し込む
※最短1分で申し込み可能
opacityとrgbaの違いはどこにある？
opacityとrgbaの大きな違いは「プロパティとプロパティ値の違い」にあります。
CSSは「どこの・何を・どうやって」変更するのかを指定していくものです。
その中の「何を」を決める部分であるプロパティであるのがopacityです。
rgbaは「どうやって」を決めるプロパティ値のことを指しています。
opacityの基本的な考え方
opacityはCSSのプロパティです。
そのため、セレクタ全体の透明度を決めることができます。
例えば、opacityを使うときはこのようなコードになります。
<!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>.opacity-sample {
background-color: #337079;
width: 200px;
text-align: center;
}
#opacity02 {
opacity: 0.5;
}
opacityは0から1までの間で指定することができ、数字が小さくなればなるほど透明に近づいていきます。
実際にopacityを使ってみると、セレクタ全体＝画像・文字ともに透明度が高くなっていることがわかります。
rgbaの基本的な考え方
rgbaはCSSのプロパティ値を指します。
そのため「background」や「color」などのプロパティの値を指定する役割を持っています。
rgbaはRGBカラーモデルと呼ばれる色の表現方法の一種に色の透明度を表すalphaが加わったもので、Red/Green/blueを混ぜることで色を再現していきます。
例えば16進数で「#e55550」の色は、rgbの場合「229,85,80」で表します。
opacityがセレクタ全体に指定をする一方で、rgbaは背景色や文字色をそれぞれで変更することができます。
例えば、rgbaを使うときはこのようなコードになります。
<!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>.rgba-sample {
background-color: #337079;
width: 200px;
text-align: center;
}
#rgba02 {
background:rgba(51,112,121,0.4);
}
rgbaの透明度を表すalphaは0から1までの間で指定することができ、数字が小さくなればなるほど透明に近づいていきます。
画像を見れば分かる通り、今回は「background」に指定をしているので、文字色は変わらず背景色だけが透明に近づいています。
opacityとrgbaの比較
それぞれの指定についてわかったところで、両者の違いを比べてみましょう。
今回はこのhtmlについてCSSで装飾を変えていきます。
<!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 {
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 {
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 {
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を使って透明度を指定する方法をみていきましょう。
この２つの方法は透明にしたい対象によって使い分ける必要があります。
画像などの対象全体の透明にはopacityを使い、文字や色を付けられる要素にはrgbaを使用します。
対象全体を透明にするopacity
opacityは画像のような対象全体を透明にすることができます。
画像にopacityを指定することで、文字を目立たせることもできます。
opacityは1～0の数字で示すことができ、1はそのまま変わらず不透明な状態です。
0は完全に透明で何も見えない状態になります。
小数点のある値で透明度の数値は設定することができます。
opacityは、対象全体に効果を表すので使う場面に注意しましょう。
例えば、文字を子要素に持つ背景だけを透明にするためにopacityを使うと、一緒に文字も透明になってしまいます。
うまくrgbaと使い分けることが必要です。
画像に対してのopacity
画像を透明にすることで、文字を読みやすくしたり、圧迫感を抑えた奥行きのあるサイト作りができます。
image {
opacity: 0.5;
}上記のコードでは、opacityで透明度を0.5にしています。
セレクタには透明にしたい要素を適応させ、その中にopacityで値を設定しましょう。
ここでは透明にしたい要素に、画像を示すセレクタであるimageを使っています。
複数の画像に対して使うことで、透明な画像を重ねて使うことができるなど、様々な表現ができます。
またopacityは、ボックス要素にも使えることができ、デザインの幅が広がります。
hover時に透明にする方法
次に、マウスが要素の上に乗った時に透明になる方法を紹介します。
:hoverを { の前に置くことで、マウスが上に乗った時の状態を示すことができます。
.image:hover {
opacity: 0.5;
}ここでは、セレクタを画像を示すimageにしており、透明度を表すopacityの値を0.5にしています。
これでマウスが上に乗った時、要素を透明にすることができ、簡単に動きのあるサイトが作れます。
色をつけるrgba
rgbaとは、色を付けられる対象を透明にできるタグです。
色を付けられる対象とは、文字、文字の背景、ボーダーなどのことです。
例えばrgbaを使うと、文字はそのままで、文字の背景だけを透明にすることができます。この方法は後ほど説明します。
rgbaは、４つの数値で対象の色と透明度を示しています。
rがredで赤、gがgreenで緑、bがblueで青、aがalphaという透明度を指定するもので、それぞれに数値が入ります。
透明度を表す値はopacityと同じく０〜１で、０が透明で、１が不透明です。
文字に対して
文字を透明にすることで後ろの画像を引き立たせることもできます。
color: rgba (0,0,0,0.5);このコードを使用すると、透明度の値が0.5なので、半透明の黒い色が適応されます
背景に対して
背景にrgbaを使って透明にすることで、文字はそのままで背景だけを透明にすることができます。
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を使えば色の変更ができる部分の透過をすることができます。
自分が透明にしたい部分はどこなのかを確認しながら、その２つを使い分けられるようにしましょう。
きっとWebページのデザイン性の幅がぐんと広がるはずです！
\CSSでデザインを整える方法についての記事を合わせて読む/
CSSで中央寄せにする方法【要素を縦横自由に中央寄せ！】
CSSのdisplayをマスター！【要素理解がカギになる】
自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談！
DMM WEBCAMPは転職成功率は98％※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます！
外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。
キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか？
自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう！この機会を活用し、ぜひDMM WEBCAMPの無料カウンセリングをご利用ください。
＼オンラインで実施中／
【無料】キャリア相談の日程を見る
※ 1 2020年４月時点
