opacityプロパティ。

opacityプロパティの扱い。

• 読み飛ばす

継承の有無

opacityプロパティは、上位要素からの継承はありません。

対象セレクタ

対象となるセレクタに制限はありません。

対象メディア

視覚系のメディア全てが対象となります。

opacityプロパティの書式。

opacityプロパティの書式は、以下のようになります。

opacity: 値

値としては、以下のものが取れます。

• 読み飛ばす

inherit

一番近い上位要素での色を継承します。

0以上 1以下の実数

0は完全透過で、1は完全不透過です。デフォルト値は 1(完全不透過)となります。

opacityプロパティの記述例。

• 読み飛ばす

例えば、透過度を90％にする場合は、

* {
    background: #fff;
    color: #000;
    opacity: 0.9;
    }

と記述します。

背景だけでなく前景も影響を受けます。

opacityプロパティは要素の前景・背景を問わない透過度です。

従って、opacityプロパティを変更した要素直下にあるテキスト類も、当然変更された透過度になってしまいます。

多くの場合、背景は半透明で文字は読み易いように不透明にしたいと思う事でしょうが、不透明にしたい(或いは透過度を変えたい)テキスト類は、opacityプロパティを変更した要素直下に置いてはいけない事となります。

つまり、背景だけを半透明にしたい場合は、opacityプロパティを変更した要素の内容はその要素の下位に別の要素としてマークアップしなければならないのです。

• 好ましいかどうかはともかく、<div>要素のopacityプロパティを変更した場合には、その直下は単一且つ別の<div>要素となるようにします。

尚、opacityプロパティは上位から継承されず、指定無き場合は1.0(完全な不透明)となります。

従って、opacityプロパティを変更した要素の下位要素を完全不透明にしたい場合には、特にopacityプロパティを記述する必要はありません。

• リスト系要素(<ul>要素など)のopacityプロパティを変更した場合は、直下のリストアイテム要素(<li>要素など)は特にopacityプロパティを変更しない限りは完全不透明となりますので、都合がよいでしょう。

visibilityプロパティとの違い。

visibilityプロパティはhidden値に変更した場合も完全透明になります。

つまり、opacityプロパティの値を0に変更するのと同じ効果があります。

ただ、visibilityプロパティは完全透明と完全不透明のいずれかにしか変更出来ません。

また、visibilityプロパティは、表(テーブル)で独自の機能を持った値に変更する事も出来ます。

インターネットエクスプローラのフィルタについて。

インターネットエクスプローラではopacityプロパティはまだ実装されていないようですが、ウィンドウズ版のインターネットエクスプローラ 4.x以降では独自仕様のフィルタで同様の効果を出す事は出来ます。

• インターネットエクスプローラ 9.0以降でopacityプロパティが実装される予定です。

但し、フィルタは以下の問題点があります。

あくまでも独自仕様なので、W3Cの検証サーヴィスに不合格となります

フィルタはマイクロソフトが勝手に実装したものなので、勿論非公式です。

W3Cの検証サーヴィスに掛けると、必ずエラーになります。

フィルタ処理のためにインターネットエクスプローラには過大な負荷が掛かる場合があります

特にインターネットエクスプローラ 4.xでは負荷に堪え兼ねてフリーズする場合さえあるとの事です。

• 最も、インターネットエクスプローラ 4.xが使えるウィンドウズ98以前は既に廃止扱いになっており、ユーザもそれほど残ってはいないと思われますが。

同じインターネットエクスプローラでも、マッキントッシュ版には実装されていません

実のところ、同じインターネットエクスプローラと言う名前のソフトウェアであっても、ウィンドウズ版とマッキントッシュ版は全く別物です。

アクティヴ Xなど、ウィンドウズ版限定の余計な機能が多数ありますが、フィルタもウィンドウズ版限定の余計なものです。

widthプロパティを指定しないと機能しない場合があります

これは恐らくバグでしょうが、widthプロパティを指定しないとフィルタが効かない場合があります。

インライン要素はwidthプロパティを持たないのでインライン要素では実現出来ない場合があると言う事になります。

opacityプロパティと同等のスタイルをウィンドウズ版インターネットエクスプローラでも実現するには以下のようにします。

• 読み飛ばす

例えば、透過度を90％にする場合は、

* {
    background: #fff;
    color: #000;
    opacity: 0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90);
    /* 実際にはこの他IEで機能させるために
       widthプロパティも必要です。 */
    }

と記述します。

括弧の中のOpacity=90が透過度の指定で、透過度を整数のパーセンテージ(単位は付けない)で指定します。

• 尚、同様に括弧の中のStyle=0の数字を変える事で不透過度の表現が変わるようになっておりますが、ここでは解説は割愛させて頂きます。
• また、同じく括弧の中のEnabled=1はフィルタ機能をオンにすると言うものです。

• 但し、インターネットエクスプローラではwidthプロパティを指定していない要素では効果が無い場合があります。

もじら系ブラウザの-moz-opacityプロパティについて。

一方、もじら系ブラウザも独自実装として非公式に-moz-opacityプロパティを実装しておりました。

現行のもじら系ブラウザでは-moz-opacityプロパティはopacityプロパティに読み替えられる事となっており、今更併記する必要は無いでしょう。

• 但し、アップデートが停止しているマックOSクラシックや超漢字などはこちらにしないと機能しません。

尚、もじらとしては-moz-で始まるプロパティは全て内部で利用するためだけのものとしており、一般人がスタイルシートに利用しない事を強く求めております。

公式なプロパティとなる(予定の)opacityプロパティが実装された事で、-moz-opacityプロパティは今後無効になる事も予想されます。

携帯端末に於ける実装。

携帯端末向けのCSSではopacityプロパティは規定されておらず、従って実装もされていないようです。

但し、オペラ 9.x以降をベースとしたモバイルオペラでは利用出来る可能性があります。

opacityプロパティはあくまでも現時点では非公式なプロパティです。

平成19年 5月14日現在、opacityプロパティを含む色関係のプロパティは事前勧告となっております。

• 西暦2003年(平成15年) 5月14日に事前勧告となって以来、ちょうど四年が経ったものの、何故か正式勧告には至っておりません。

このため、現時点では以下の問題点がある事に注意して下さい。

• opacityプロパティをスタイルシートに利用した場合、W3CのCSS検証サーヴィスでは必ず不合格となります。
• opacityプロパティを認識しないユーザエージェントがあります。

特に後者に関しては、インターネットエクスプローラ及びオペラ 8.x以前など非対応環境の存在を忘れてはいけません。

opacityプロパティを認識しない場合、background-colorプロパティの値がtransparent(透過)となっている背景以外は全て完全不透過となります。

恐らく多くの場合当該要素の可読性は損なわれないでしょうが、当該要素の下敷きになっているコンテンツは見えなくなります。

従って、opacityプロパティを与えない状態で正しく利用出来るようにする事が必要となります。