あくまでも現時点では非公式ですが、現行のPC向けブラウザの多くはCSSで要素の透過度を指定する事が出来ます。
これに依り、例えば背景の上に半透明の要素を重ね合わせると言うような視覚効果を出す事が出来ます。
平成19年 5月14日現在、まだ公式なものとされておりませんが、CSSには要素の透過度を指定するプロパティがあります。
このプロパティは現在策定中のCSS第三水準にて導入される予定となっております。
実を言うと透過度のプロパティは平成15年 5月14日に正式勧告の一歩前となる事前勧告となっておりますが、ちょうど四年経った今もまだ正式勧告には至っておりません。
一方、ウィンドウズ版のインターネットエクスプローラには強力なフィルタと呼ばれるヴィジュアル処理がCSSに依って利用出来、その中にはやはり透過度を指定する機能もあります。
現時点で勧告に至ってはいないと言うものの、現行のPC向けブラウザでは高い比率で対応しているため、推奨出来る代物では無いものの実例を紹介する事としました。
opacityプロパティはCSS第三水準にて勧告される予定となっているプロパティで、透過度を指定します。
一方、filterプロパティはマイクロソフトがウィンドウズ版のインターネットエクスプローラに導入した独自のヴィジュアル処理を指定するプロパティです。
様々な処理がありますが、透過度の指定もこのフィルタを用いる事で実現出来ます。
とは言うものの、あくまでもマイクロソフトが勝手に実装した独自仕様であり、本来は使うべきものではありません。
現在、opacityプロパティが利用出来るのは以下のブラウザとなっております。
一方、フィルタはウィンドウズ版のインターネットエクスプローラ 4.0以降で利用出来ます。
それでは、実際に透過度を指定してみましょう。
今、背景に以下のGIF画像 Background.GIF を利用するものとします。
その上で以下のスタイルシートを用意します。
body {background: #d1df9c url("Background.GIF");}p.sample1 {width: 100%;margin: 0;padding: 0;background: #fff;color: #090;font-weight: bold;opacity: 0.6;filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=60);}p.sample2 {width: 100%;margin: 0;padding: 0;background: #fff;color: #090;font-weight: bold;opacity: 0.8;filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=80);}p.sample3 {width: 100%;margin: 0;padding: 0;background: #fff;color: #090;font-weight: bold;}
それぞれ表します。
注意すべき事として、必ずwidthプロパティで横幅を指定しなければなりません。
これは、インターネットエクスプローラのフィルタはwidthプロパティで横幅が指定されていないと機能しない事があるからです。
一方、HTML文書は以下のようになります(重要な部分のみ)。
<title>透過度サンプル。</title><p class="sample1">透過度0.6の場合。</p><p class="sample2">透過度0.8の場合。</p><p class="sample3">透過度無指定の場合。</p>
実際にこのスタイルを当てたHTML文書を、透過度に対応しているファイヤーフォックス 2.0とインターネットエクスプローラ 6.0及び透過度に対応していないオペラ 8.5で表示させてみましょう。
ファイヤーフォックス 2.0の場合、一行目の透過度0.6では背景の模様が良く見えます。
また、文字にも透過度が適用されるためちょっと読み難くなっております。
二行目の透過度0.8でも背景の模様がうっすらと見えるようになっております。
三行目は透過度を指定していないため、完全な不透明となり、従って背景の模様は全く見えなくなります。
インターネットエクスプローラ 6.0の場合もファイヤーフォックスと全く同様の見え方となります。
オペラ 8.5は透過度に対応していないため、三行とも完全な不透明となり、従って背景の模様は全く見えません。
