CSS3大接近

第2回 OpacityとRGBa実践テクニック

この記事を読むのに必要な時間:およそ 5 分

RGBaプロパティバリュー

続いて,RGBaプロパティバリューの適用方法を確認していきます。RGBaは,Red Green Blue alphaTransparency(赤 緑 青 透明度)の略です。

RGBaプロパティバリューは,以下の要素に適用することができます。

適用できるプロパティ
  • border-color(ボーダーカラー)
  • background-color(背景色)
  • color(テキストカラー)

RGBaプロパティバリューのコードのメンテナンスが楽であること,今後ブラウザでサポートが期待されることが挙げられます。デメリットは,現在のブラウザのサポートが乏しいことです。

RGBaプロパティバリューの記述方法

RGBaプロパティバリューの記述は以下のとおりです。

セレクタ {
  background-color:rgba (赤,緑,青,透明度);
}

セレクタ {
  border-color:rgba (赤,緑,青,透明度);
}

セレクタ {
  color:rgba (赤,緑,青,透明度);
}

RGBaプロパティバリューの値には,0縲・までの値をコンマ(.)を使って指定します。0.6や0.46726と小数点以下を指定することもできます。

RGBaの基本のサンプル

デフォルトのサンプルに,RGBaプロパティバリューを用いてデザインを追加してみました。コードは以下のとおりです。

リスト5 RGBaプロパティバリューを使った基本のサンプル(CSS⁠⁠:sample-rgba-simple.html

html {
  font-family: verdana, Osaka, sans-serif;
}

div#photo {
  background-color: rgba(00,00,00,.6);
}

h1 {
  color: #E45A49;
}

リスト6 RGBaプロパティバリューを使った基本のサンプル(HTML⁠⁠:sample-rgba-simple.html

<div id="photo">
  <h1>ボストンの夕暮れ</h1>
</div>

RGBaプロパティバリューをサポートしたブラウザでは,次のように表示されます。

図3 RGBaプロパティバリューを使った基本のサンプルの表示結果

図3 RGBaプロパティバリューを使った基本のサンプルの表示結果

OpacityプロパティとRGBaプロパティバリューの違い

OpacityプロパティとRGBaプロパティバリューをそれぞれ適用したサンプルを見て既に気づいたと思いますが,実はRGBaプロパティバリューを利用したサンプルでは,テキストの色が薄くなっていません。これはどういうことでしょうか?

RGBaを指定していないので当然ですが,Opacityプロパティは指定した要素の子要素も透明度が適用されます。正確には指定した要素に含まれる要素すべてに適用されます。一方,RGBaプロパティバリューは指定した要素の子要素へ,もしくは,ふくまれる要素には,その値は適用されず,それぞれの要素のRGBaプロパティバリューを指定した要素のみに適用されます。

今回のOpacityプロパティのサンプルの場合,<div="photo">にOpacityプロパティを指定したため,その要素に含まれるh1にもOpacityは適用されてしまいました。

このように,RGBaプロパティバリューは,要素ごとにプロパティごとにbackground-color/ color/ border-colorとOpacityに比べてより細かい指定をできる為,使いやすいです。実際,CSS3を積極的に利用したWebサイトは透明度を指定する場合は,OpacityよりもプロパティごとにRGBaプロパティバリューを利用することが多いようです。

ただし,画像へ透明度を指定する場合はRGBaプロパティバリューでは指定することができないため,そのときはOpacityプロパティを使います。

RGBaプロパティバリューをサポートしていないブラウザでは注意が必要

当たり前ですが,RGBaプロパティバリューをサポートしないブラウザは,RGBaプロパティバリューで指定した色を全く表示しません。例えば以下のCSSを

p { background-color: rgba(0, 0, 0, 0.6) }

を指定した場合,透明度以外を除いた指定が適用されるわけではなく,一切のRGBaの指定は適用されません。つまり,上記の指定の場合,rgbaをサポートしないIE6は背景は黒くなりません。

著者プロフィール

菊池崇(きくちたかし)

ActLink株式会社にてプロデューサー,allWebクリエイター塾ではXHTML+CSS,microformatsの講師。また,11月に行われたWeb Directions Eastのプロデューサーでもありmicroformats japanの代表。

バックナンバー

CSS3大接近