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

2023.01.29
CSSで透明度を指定する方法

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

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

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

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

CSSの書き方について学びたい方は、こちらの記事を読んでみてください。

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

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

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

opacityとrgbaの違い

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

初心者でも実践的なスキルが身につく DMM WEBCAMP

「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ！
国内最大級のプログラミングスクール【DMM WEBCAMP】

✔受講生の97%が未経験からのスタート！
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる！
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能！

＼経済産業省認定の圧倒的カリキュラム／

今すぐ詳細を確認する

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

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

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

対象全体を透明にするopacity

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

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

[su_row][su_column][su_column size=”1/2″ center=”no” class=””]

対象全体を透明にするopacity

[/su_column] [su_column size=”1/2″ center=”no” class=””]

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

[/su_column][/su_row]

注意

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にしています。
これでマウスが上に乗った時、要素を透明にすることができ、簡単に動きのあるサイトが作れます。

CSS初心者入門【CSS】hoverってなに？初心者向けに使い方を解説！

色をつけるrgba

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

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

[su_row][su_column][su_column size=”1/2″ center=”no” class=””] 色をつけるrgba
[/su_column] [su_column size=”1/2″ center=”no” class=””]

rgbaは、４つの数値で対象の色と透明度を示しています。
rがredで赤、gがgreenで緑、bがblueで青、aがalphaという透明度を指定するもので、それぞれに数値が入ります。

透明度を表す値はopacityと同じく０〜１で、０が透明で、１が不透明です。 [/su_column][/su_row]

文字に対して

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

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

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

HTML入門【HTML初心者入門】文字色や背景色を指定する方法

背景に対して

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

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

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

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

HTML入門【HTML初心者入門】背景色・背景画像を設定・変更する方法

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に変換することができます。

「HTML・CSS」をもっと詳しく学習したい方へ！
国内最大級のプログラミングスクール【DMM WEBCAMP】

✔受講生の97%が未経験！
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能！
✔通学不要！スキマ時間でプログラミング学習ができる！

＼経済産業省認定の圧倒的カリキュラム／

受講内容を見る

まとめ

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

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

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

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

関連記事

  • おすすめのhtml作成ツールテキストエディタ4選!

    【超厳選】おすすめのhtml作成ツール テキストエディタ4選！

    2023.01.29
  • javascriptでhtmlを書き換える方法を解説!上手く反映されない時の原因と対策も

    JavascriptでHTMLを書き換える方法を解説！上手く反映されない時の原因と対策も

    2023.01.29
  • breakの基本と応用を徹底解説

    【python入門者必見！】breakの基本と応用を徹底解説

    2023.01.31
  • Javaのおすすめ勉強会5選

    【初心者向け】Javaのおすすめ勉強会5選！

    2023.01.28

    • 資料請求

    • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

      DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

      資料をダウンロードする
    • IT技術がもたらす3つの変化と身につけるべきスキル

      IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

      資料をダウンロードする
    • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

      働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

      資料をダウンロードする

    資料請求一覧はこちら

    サービス紹介

    © 2023 WEBCAMP MEDIA Powered by AFFINGER5