OpacityプロパティとRGBaプロパティバリューは、どちらも要素に透明度を指定することができるCSS3のプロパティとプロパティバリューです。どちらも透明度を指定し背景が透けさせることが可能なプロパティです。

今回は、OpacityプロパティやRGBaプロパティバリューの実践的テクニックと、それぞれの違いを説明します。OpacityプロパティもRGBaプロパティバリューもイマジネーションを利用する事で効果的な使い方ができます。

OpacityプロパティとRGBaプロパティバリューをサポートしているブラウザ

OpacityプロパティとRGBaプロパティバリューをサポートしているブラウザは以下のとおりです。

Opacityプロパティ

Firefox 2以上、Safari 2以上、Opera 9以上、IE8以上、Chrome

RGBaプロパティバリュー

Firefox 3以上、Safari 3以上、Opera 10以上、IE8以上、Chrome

上記のように、OpacityプロパティはRGBaプロパティバリューに比べ、ブラウザのサポートが優れています。ただ、最近は、RGBaプロパティバリューもブラウザのサポートが進んできているのが分かります。現状としては後で説明する違いが影響しRGBaを利用する開発者が増えてきています。

今回のサンプル

サンプルを利用して、最初にOpacityプロパティとRGBaプロパティバリューの記述方法をそれぞれ確認していきましょう。

今回、利用するHTMLソースは以下のものになります。CSSはhtmlにはあらかじめfont-familyプロパティを指定しています。h1の文字色は薄い青（#94B3C5）を指定しています。

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

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

h1{
    color: #E45A49;
}

（opacityプロパティとRGBaプロパティバリューを指定せずに）背景色と文字色を指定した状態では、以下の図のように表示されます。

Opacityプロパティ

まず、サンプルのデフォルトにOpacityプロパティを適用します。そもそもOpacityは"透明"という意味で、背景が透けます。まずはOpacityプロパティは、様々CSSプロパティと要素に適用できることを確認しましょう。

Opacityプロパティを適用できるCSSプロパティ

• ボーダー
• パディング
• 背景色
• 画像
• テキスト
• 他のプロパティ

Opacityプロパティのメリットは、サポートしているブラウザが多いことです。ただデメリットとして、コードが煩雑になるので注意が必要なプロパティになります。

Opacityプロパティの記述方法

Opacityプロパティの記述は非常にシンプルです。

セレクタ {
  opacity: 値
}

Opcityプロパティの値には、0縲・までの値をコンマ（.）を使って指定します。.6,0.6や0.46726と小数点以下を指定することもできます。

Opacityプロパティを使った基本のサンプル

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

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

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

div#photo {
  background-color: #000;
  opacity: .6;
}

h1 {
  color: #E45A49;
}

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

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プロパティバリューを用いてデザインを追加してみました。コードは以下のとおりです。

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

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

h1 {
  color: #E45A49;
}

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

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は背景は黒くなりません。

実践テクニック：シンプルな透明度の設定

まずはシンプルな画像への透明度を指定してみましょう。画像の場合は、RGBaプロパティバリューでは透明度を指定することはできないので、Opacityプロパティを利用して透明度を適用します。

サンプルは画像へ透明度40％を指定したものです。

<div id="photo">
  <img src="images/boston-sunset.jpg" alt="写真　ボストンの夕焼け" title="ボストンの美しい夕焼けの写真" />
</div>

div#photo img {
  opacity: .6;
}

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

実践的テクニック：RGBaプロパティバリューとpositionプロパティの組み合わせ

シンプルな画像へOpacityプロパティを適用しましたが、より実践的な使い方に踏み込みましょう。

まず、Opacityプロパティ, RGBaプロパティバリューともに透明度を適用できるというのは、画像同士を重ねたり、画像とテキストを重ねたりするの非常に有効です。

Opacityプロパティでも実装可能ですが、RGBaプロパティバリューを利用してサンプルを作ってみます。

ここでのポイントはpositionプロパティを利用して、まず画像とテキストを重ね合わせ、つぎにRGBaプロパティバリューを利用して背景色に透明度を与えます。positionプロパティでは要素を自由に配置することができます。これで画像とテキストを重ね合わせることができます。

<div id="photo">
  <img src="images/boston-sunset.jpg" alt="写真　ボストンの夕焼け" title="ボストンの美しい夕焼けの写真" />
  <p>ボストンはアメリカ北東部に位置し、レンガ造りの町並みが広がる非常に美しい街です。12月には初雪がふり、写真にも雪がふりつもっているのが見られます。地域によってはネオンはなく、夜には素朴なライトアップが町並みをてらし幻想的な風景をつくりだしています。</p>
</div>

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

div#photo {
  position: relative;
  background-color: white;
  border: 1px solid #999;
  float: left;
  height: 375px;
  padding: 10px;
  width: 500px;
}

div#photo p {
  position: absolute;
  z-index: 10;
  margin: 0px 10px 0px 0px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);　/*背景を黒で透明度40％を指定*/
  left: 10px;
  bottom: 10px;
  color: white;
  font-size: 12px;
  letter-spacing: 2px;
  line-height: 1.4;
}

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

実践テクニック: 透明度の別な考え方

透明度を指定するということは、背景色が透けるということです。ただ別な考え方をすると色を薄くすると考えられます。例えば先述の「シンプルな透明度の設定」のサンプルにおいて、透明度を40％にすれば背景の白が透けて画像が白っぽく見えます。これを利用するとナビゲーションのロールオーバーを記述する際に、ロールオーバー時の背景色を透明度で簡単に指定できます。このテクニックでは背景した際の色を入力する必要がなくメンテナンス性を向上させることが可能です。

RGBaプロパティバリューを利用したナビゲーションはコードをシンプルてるメリットがあります。

<ul>
  <li><a href="" title="">ホーム</a></li>
  <li><a href="" title="">ボストンの観光地</a></li>
  <li><a href="" title="">ボストンのホテル</a></li>
  <li><a href="" title="">ボストンの食事</a></li>
  <li><a href="" title="">ボストンの地図</a></li>
</ul>

html {
  font: normal normal normal 12px/1.5 Verdana, Osaka, sans-serif;
}

a {
  text-decoration: none;
}

ul li {
  display: inline;
  float: left;
}

ul li a {
  display: block;
  padding: 10px 15px;
  background-color: rgba(65, 89, 104, .9);
  color: #f7f7f7;
}

ul li a:hover {
  background-color: rgba(65, 89, 104, .5);
  color: #fff;
}

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

立体感のあるナビゲーション

さらに一手間をかけ、テキストに前回の特集で紹介したtext-shadowプロパティをかけると、立体感のあるデザインを実現できます（sample-rgba-navigation02.html⁠）⁠。

実践テクニック：RGBaを0から1へ戻す

RGBaプロパティバリューとOpacityプロパティは透明度を指定し透明にするというプロパティです。しかし逆に透明度を戻すという不透明度を指定するという、逆の考え方を実践すると広がりのあるデザインを実現できます。

例えば、:hoverと組み合わせ、:hover時にマスクがかかったような状態のにデザインを作り出すことができます。また、positionプロパティを効果的に利用して、3次元で要素を配置することもポイントです。

<ul>
  <li>
  <img src="images/boston-sunset.jpg" alt="写真　ボストンの夕焼け" title="ボストンの美しい夕焼けの写真" />
  <em>Merry Christmas !! <br />Happy holidays for Gihyo readers !!</em>
  </li>
</ul>

html {
  font: normal normal normal 12px/1.5 Verdana, Osaka, sans-serif;
}

ul {
  position: relative;
  border: 1px solid #f7f7f7;
}

ul li {
  list-style-type: none;
}

ul li em {
  position: absolute;
  display: block;
  width: 460px;
  height: 335px;
  top: 0px;
  left: 40px;
  padding: 20px;
  font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; /*フォントを少しクリスマスの雰囲気に*/
  font-size: 40px;
  color: rgba(247, 247, 247, 0); /*透明度を0に指定して、透明に指定*/
  background-color: rgba(0, 0, 0, 0); /*背景色も予め0に指定して、透明に指定*/
}

ul li em:hover {
  color: rgba(247, 247, 247, 1); /*透明度を1に指定して、完全に不透明に指定*/
  background-color: rgba(0, 0, 0, 0.6); /*背景色を60％*/
}

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

以上のように、OpacityプロパティとRGBaプロパティバリューを利用することで、ウェブサイトを立体的にみせたり、ナビゲーションのロールオーバーにみせたりと、意外と様々なことができることが分かります。まずは自分でOpacityやRGBaなどCSS3を使ってみて、もっとCSSを楽しんでみましょう。

次回は、いよいよtransformを詳しく説明したいと思います。