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)を指定しています。
(opacityプロパティとRGBaプロパティバリューを指定せずに)背景色と文字色を指定した状態では、以下の図のように表示されます。
Opacityプロパティ
まず、サンプルのデフォルトにOpacityプロパティを適用します。そもそもOpacityは"透明"という意味で、背景が透けます。まずはOpacityプロパティは、様々CSSプロパティと要素に適用できることを確認しましょう。
- Opacityプロパティを適用できるCSSプロパティ
- ボーダー
- パディング
- 背景色
- 画像
- テキスト
- 他のプロパティ
Opacityプロパティのメリットは、サポートしているブラウザが多いことです。ただデメリットとして、コードが煩雑になるので注意が必要なプロパティになります。
Opacityプロパティの記述方法
Opacityプロパティの記述は非常にシンプルです。
Opcityプロパティの値には、0縲・までの値をコンマ(.)を使って指定します。.6,0.6や0.46726と小数点以下を指定することもできます。
Opacityプロパティを使った基本のサンプル
デフォルトのサンプルに、Opcityプロパティを用いてデザインを追加してみました。コードは以下のとおりです。
Opacityプロパティをサポートしたブラウザでは、次のように表示されます。
RGBaプロパティバリュー
続いて、RGBaプロパティバリューの適用方法を確認していきます。RGBaは、Red Green Blue alphaTransparency(赤 緑 青 透明度)の略です。
RGBaプロパティバリューは、以下の要素に適用することができます。
- 適用できるプロパティ
- border-color(ボーダーカラー)
- background-color(背景色)
- color(テキストカラー)
RGBaプロパティバリューのコードのメンテナンスが楽であること、今後ブラウザでサポートが期待されることが挙げられます。デメリットは、現在のブラウザのサポートが乏しいことです。
RGBaプロパティバリューの記述方法
RGBaプロパティバリューの記述は以下のとおりです。
RGBaプロパティバリューの値には、0縲・までの値をコンマ(.)を使って指定します。0.6や0.46726と小数点以下を指定することもできます。
RGBaの基本のサンプル
デフォルトのサンプルに、RGBaプロパティバリューを用いてデザインを追加してみました。コードは以下のとおりです。
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を
を指定した場合、透明度以外を除いた指定が適用されるわけではなく、一切のRGBaの指定は適用されません。つまり、上記の指定の場合、rgbaをサポートしないIE6は背景は黒くなりません。
実践テクニック:シンプルな透明度の設定
まずはシンプルな画像への透明度を指定してみましょう。画像の場合は、RGBaプロパティバリューでは透明度を指定することはできないので、Opacityプロパティを利用して透明度を適用します。
サンプルは画像へ透明度40%を指定したものです。
Opacityプロパティをサポートしたブラウザでは、次のように表示されます。
実践的テクニック:RGBaプロパティバリューとpositionプロパティの組み合わせ
シンプルな画像へOpacityプロパティを適用しましたが、より実践的な使い方に踏み込みましょう。
まず、Opacityプロパティ, RGBaプロパティバリューともに透明度を適用できるというのは、画像同士を重ねたり、画像とテキストを重ねたりするの非常に有効です。
Opacityプロパティでも実装可能ですが、RGBaプロパティバリューを利用してサンプルを作ってみます。
ここでのポイントはpositionプロパティを利用して、まず画像とテキストを重ね合わせ、つぎにRGBaプロパティバリューを利用して背景色に透明度を与えます。positionプロパティでは要素を自由に配置することができます。これで画像とテキストを重ね合わせることができます。
RGBaプロパティバリューをサポートしたブラウザでは、次のように表示されます。
実践テクニック: 透明度の別な考え方
透明度を指定するということは、背景色が透けるということです。ただ別な考え方をすると色を薄くすると考えられます。例えば先述の「シンプルな透明度の設定」のサンプルにおいて、透明度を40%にすれば背景の白が透けて画像が白っぽく見えます。これを利用するとナビゲーションのロールオーバーを記述する際に、ロールオーバー時の背景色を透明度で簡単に指定できます。このテクニックでは背景した際の色を入力する必要がなくメンテナンス性を向上させることが可能です。
RGBaプロパティバリューを利用したナビゲーションはコードをシンプルてるメリットがあります。
RGBaプロパティバリューをサポートしているブラウザで次のように表示されます。
立体感のあるナビゲーション
さらに一手間をかけ、テキストに前回の特集で紹介したtext-shadowプロパティをかけると、立体感のあるデザインを実現できます(sample-rgba-navigation02.html)。
実践テクニック:RGBaを0から1へ戻す
RGBaプロパティバリューとOpacityプロパティは透明度を指定し透明にするというプロパティです。しかし逆に透明度を戻すという不透明度を指定するという、逆の考え方を実践すると広がりのあるデザインを実現できます。
例えば、:hoverと組み合わせ、:hover時にマスクがかかったような状態のにデザインを作り出すことができます。また、positionプロパティを効果的に利用して、3次元で要素を配置することもポイントです。
RGBaプロパティバリューをサポートしたブラウザでは、次のように表示されます。
以上のように、OpacityプロパティとRGBaプロパティバリューを利用することで、ウェブサイトを立体的にみせたり、ナビゲーションのロールオーバーにみせたりと、意外と様々なことができることが分かります。まずは自分でOpacityやRGBaなどCSS3を使ってみて、もっとCSSを楽しんでみましょう。
次回は、いよいよtransformを詳しく説明したいと思います。