CSS3大接近

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

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

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)を指定しています。

リスト1 デフォルトのサンプル(HTML)sample-opacity-rgba-default.html

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

リスト2 デフォルトのサンプル(CSS)sample-opacity-rgba-default.html

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

h1{
    color: #E45A49;
}

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

図1 デフォルトのサンプルの表示結果

図1 今回のサンプルのデフォルト

Opacityプロパティ

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

Opacityプロパティを適用できるCSSプロパティ
  • ボーダー
  • パディング
  • 背景色
  • 画像
  • テキスト
  • 他のプロパティ

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

Opacityプロパティの記述方法

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

セレクタ {
  opacity: 値
}

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

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

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

リスト3 Opacityプロパティを使った基本のサンプル(HTML)sample-opacity-simple.html

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

リスト4 Opacityプロパティの基本のサンプル(CSS)sample-opacity-simple.html

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

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

h1 {
  color: #E45A49;
}

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

図2 Opacityプロパティを使った基本のサンプルの表示結果

画像

著者プロフィール

菊池崇(きくちたかし)

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

バックナンバー

CSS3大接近

コメント

  • opacityは不透明(度)

    「そもそもOpacityは"透明"という意味で,背景が透けます。」とありますが、英単語の意味としても不透明ですし、
    白い背景の黒い字で
    opacity:0.2 は薄く、opacity:0.9 は濃く表示されますから
    opacityは透明度でなく不透明度ということになります。
    0.9より0.2の方が透明度は高いと言うのは不自然で
    0.2より0.9の方が不透明度は高いと言うのが自然です。
    不透明度というのは日本語としては落ち着きませんが
    GIMPなどでもこう訳しています。

    また、私の環境(debian/firefox)では
    「Opcityプロパティの値には,0縲・までの値をコンマ(.)を使って指定します。」と文字化けしています。ユニコードとShift_JISとの変換で記号部分に解釈の違いがあるように思います。

    Commented : #3  安達 (2011/07/21, 12:04)

  • ありがとうございます。

    key-child様、

    執筆者の菊池です。御指摘ありがとうございます。
    変更修正をしましたので、宜しく御願いいたします。

    Commented : #2  菊池崇 (2009/03/07, 00:34)

  • Re:

    > RGBaプロパティ

    プロパティではないんじゃないか?


    > 実はRGBaプロパティを利用したサンプルでは,テキストの色が薄くなっていません。

    文字色には指定していないので当たり前なんじゃないだろうか?


    > Opacityプロパティは指定した要素の子要素も透明度がそのまま継承されてしまうのです。

    Opacityプロパティは継承しないことになっている。
    おそらく、要素全体(子要素含む)に作用するって書かれているのではないだろうか?
    (英吾が苦手なので自信はないが)


    > RGBaプロパティは指定した要素の子要素へ,その値は継承されず,RGBaプロパティを指定した要素のみに適用されます。

    指定したプロパティによって異なる。
    colorプロパティなどは継承することになっているので継承される。


    『OpacityプロパティとRGBaプロパティの違い』は書き直した方がいい気がする。

    Commented : #1  key-child (2009/01/12, 01:56)

コメントの記入