スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

透明度を表す「opacity」 と 「RGBa」の違いと使い分け

ともに透明度を表す「opacity」 と 「RGBa」ですが、違いをちゃんと理解して正しい使い分けをしましょう。

opacity-rgba-title.png

対応しているブラウザ

ともにCSS3ですのでブラウザによってサポートしているもの、サポートしていないものがあります。

と言ってもIE以外は問題なく対応できています。IEについてはIE9から対応するようになりました。Firefox、Chrome、Safari、Operaなどはかなり前のバージョンから対応できています。

opacityとRGBaの仕組みについて

まずは、それぞれの仕組みを説明します。

opacityの仕組み

opacityは不透明を表し、値には0~1の間で「0.5」「0.555」などと指定します。

opacity-point2.png
RGBaの仕組み

RGBaは、RGBカラーモデルのred・green・blueに、alphaが加わったもので、alphaは色の透明度を表します。

rgba-point2.png

opacityとRGBaの決定的な違い

仕組みを比べてみると決定的な違いが分かるかと思います。

「opacity」はプロパティで、「RGBa」はプロパティの値を表すものということです。

css-kouzou.png

ですので、opacityはセレクタ内全体が不透明になるのに対し、RGBaはプロパティのみ不透明になります。

「opacity」と「RGBa」の比較画像

左がopacityで全体を不透明にしたもの、右がRGBaで背景色を指定したものとなります。サンプルコードは後に載せています。

opacity-rgba-sample.png

見比べると違いは明らかだと思います。

opacityのサンプル

IE8以下はopacityに対応していませんので、IE9か他のブラウザでご覧ください。

CSS
.opacity-rgba {
  color:#000033;
  width:300px;
  padding:5px 0;
  margin:0;
  text-align:center;
  font-weight:bold;
}
#opacity01 { background:#003366; opacity:0.1; }
#opacity02 { background:#003366; opacity:0.2; }
#opacity03 { background:#003366; opacity:0.3; }
#opacity04 { background:#003366; opacity:0.4; }
#opacity05 { background:#003366; opacity:0.5; }
#opacity06 { background:#003366; opacity:0.6; }
#opacity07 { background:#003366; opacity:0.7; }
#opacity08 { background:#003366; opacity:0.8; }
#opacity09 { background:#003366; opacity:0.9; }
#opacity10 { background:#003366; opacity:1; }
HTML
<div class="opacity-rgba" id="opacity01">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity02">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity03">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity04">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity05">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity06">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity07">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity08">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity09">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity10">opacityのサンプル</div>
サンプル

背景と文字がともに透明になっていることが分かると思います。

opacityのサンプル
opacityのサンプル
opacityのサンプル
opacityのサンプル
opacityのサンプル
opacityのサンプル
opacityのサンプル
opacityのサンプル
opacityのサンプル
opacityのサンプル

RGBaのサンプル

IE8以下はRGBaに対応していませんので、IE9か他のブラウザでご覧ください。

CSS
.opacity-rgba {
  color:#000033;
  width:300px;
  padding:5px 0;
  margin:0;
  text-align:center;
  font-weight:bold;
}
#rgba01 { background:rgba(0,51,102,0.1); }
#rgba02 { background:rgba(0,51,102,0.2); }
#rgba03 { background:rgba(0,51,102,0.3); }
#rgba04 { background:rgba(0,51,102,0.4); }
#rgba05 { background:rgba(0,51,102,0.5); }
#rgba06 { background:rgba(0,51,102,0.6); }
#rgba07 { background:rgba(0,51,102,0.7); }
#rgba08 { background:rgba(0,51,102,0.8); }
#rgba09 { background:rgba(0,51,102,0.9); }
#rgba10 { background:rgba(0,51,102,1); }
HTML
<div class="opacity-rgba" id="rgba01">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba02">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba03">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba04">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba05">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba06">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba07">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba08">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba09">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba10">RGBaのサンプル</div>
サンプル

背景は透明になっていますが、文字はすべて同じであることが分かると思います。

RGBaのサンプル
RGBaのサンプル
RGBaのサンプル
RGBaのサンプル
RGBaのサンプル
RGBaのサンプル
RGBaのサンプル
RGBaのサンプル
RGBaのサンプル
RGBaのサンプル

IE8以下ではどのように表示されるか

CSS3を使うにあたってネックになるのがIEです。IE8以下はCSS3にほぼ対応できていないにもかかわらず、新バージョンへの乗り換えも進んでいません。

そんなIE8以下でどのように表示されるか知っておく必要があります。

「opacity」の場合

opacityはIE8以下の場合に適用されず、不透明になりません。

先ほどのサンプルをIE8で確認すると、以下のように、すべて同じ文字色と背景色になります。

opacity-ie8.png
「RBGa」の場合

RGBaの場合は、値が無効となるため表示されません。例えば背景色をRGBaで指定した場合、その設定は無効となります。

こちらも先ほどのサンプルをIE8で見ると、以下のように、文字は表示されますが、背景は表示されません。

rgba-ie8.png

どのように使い分ければいいのか

このように同じ透明度を表す「opacity」と「RGBa」ですが、使い方は違いますので、用途によって使い分けるといいと思います。

画像を半透明にする場合は「opacity」

画像に透明度を適用する場合は、opacityを使う必要があります。

CSS
#opacity-img {
  opacity:0.5;
}
HTML
<div id="opacity-img">
  <img src="画像のアドレス" alt="サンプル" />
</div>

このように指定すれば、以下のサンプルのように画像が半透明になります。

opacity-sample-img.jpg
個別に透明度を適用したい場合は「RGBa」

RGBaはプロパティの値として使いますので、background、color、borderなど個別に指定することができます。実用的ではないですがtext-shadowなどにも使えます。

今回のサンプルで分かるように、すべてに透明度が適用されると、文字が見難くなったりします。そんなときは、RGBaで背景にのみ適用する方が見やすくなります。

IE8以下を意識した場合は臨機応変に

先ほど紹介したようにIE8以下ではopacityもRGBaも対応していません。opacityを使った場合は不透明にならず、RGBaの場合はプロパティが無効になります。

ですので、IE8以下を意識した場合、どちらが影響が少ないか比べた上で使用するといいと思います。

おまけ:IE8以下でも対応する

先日紹介したところですが、関連するので改めてご紹介します。

IE8以下でopacityを表現

不透明を表すIE独自の仕様を使います。

CSS
.opacity {
  opacity:0.7;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

0~100 まで指定でき、数値が小さいほど透明になります。

IE8以下でRGBaカラーモデルを指定する

こちらもIE独自の仕様があります。

CSS
.rgba{
  background: rgba(51, 102, 153, .4);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#88336699', endColorstr='#88336699');

IEでは#AARRGGBBの最初のAAは00(透明)~ ff(不透明)の範囲で透明度を指定し、RRGGBBは色を指定します。本来gradient()はグラデーションとして使うものです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
不透明になる・ならないというのは、逆で、透明になる・ならないではないですか?
【2012/04/11 23:32】 | 天 #- | [edit]
天さん

ご指摘ありがとうございます。
確かにそうですね。
また修正したいと思います~
【2012/04/13 07:59】 | 管理人 #E2ywrYdA | [edit]
まさに悩んでいるピッタリの記事でした!
ありがとうございました!
【2013/04/05 03:52】 | にせモン #- | [edit]
にせモン さん

コメントありがとうございます。
お役に立ててうれしいです!
またお立ち寄りください~
【2013/04/05 07:32】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。