CSS3大接近

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

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

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

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

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

リスト7 シンプルな透明度の設定(HTML⁠⁠:sample-opacity-image.html

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

リスト8 シンプルな透明度の設定(CSS⁠⁠:sample-opacity-image.html

div#photo img {
  opacity: .6;
}

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

図4 シンプルな透明度の設定(Opacityプロパティの適用前)

図4 シンプルな透明度の設定(Opacityプロパティの適用前)

図5 シンプルな透明度の設定(Opacityプロパティの適用後)

図5 シンプルな透明度の設定(Opacityプロパティの適用後)

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

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

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

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

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

リスト9 RGBaプロパティバリューとpositionプロパティの組み合わせ(HTML⁠⁠:sample-rgba-image-text.html

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

リスト10 RGBaプロパティバリューとpositionプロパティの組み合わせ(CSS⁠⁠:sample-rgba-image-text.html

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プロパティバリューをサポートしたブラウザでは,次のように表示されます。

図6 RGBaプロパティバリューとpositionプロパティを組み合わせたサンプルの表示結果

図6 RGBaプロパティバリューとpositionプロパティを組み合わせたサンプルの表示結果

著者プロフィール

菊池崇(きくちたかし)

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

バックナンバー

CSS3大接近