CSS opacityプロパティについてメモ

ちょっとこのサイトhttp://www.salp.net/を見ていて、画像のとこ...

ちょっとこのサイトhttp://www.salp.net/を見ていて、画像のところのhoverの動きが興味深かったので、ソースを見てみると、別にjsも使っているわけでもなく、opacityプロパティでCSSだけでやっていたので、おーってことに。
opacityプロパティについてあまり知らなかったので、もう一回情報を集めて、ちょろっとメモ。

opacityプロパティは、CSS3で標準化する予定だけど、現時点では非公式なプロパティ。でもとりあえず、モダンブラウザなら動作するよってことです。

書き方は、
opacity:0.8;
など0~1.0の間の値で設定する。

ただし、毎度のことながら、IE系では動きがいまいち・・というか動作しないみたい。そこでハック。
IEのスターハックを用いて、

filter:alpha(opacity:80);

と指定。ここでの値は%値。つまり0~100の間で指定。


注意事項としては、
opacityはCSS検証でひっかかる(非公式だからね)
opacityは反応しないブラウザ(ユーザ環境)もあるので注意

ということで、結論は現時点では、
opacityプロパティは あまり影響のないところで使うような プラスアルファの装飾

この記事の周辺情報

著者

稲本[せぶん]浩介
福岡の企業に在籍し、Webを中心に活動中。Webディレクター、IA(インフォメーション アーキテクト)、マークアップエンジニア、CSSコーダーetc。
Twitterボタン

amazonさんがこのサイトを見て、書籍を紹介してくれています。