2010年5月20日木曜日

CSSで透明度を指定する方法 opacity - CSSカスタマイズ

CSSカスタマイズ。半透明にする
opacityは、要素の背景を半透明にする、一番簡単な方法です。

o ブラウザーによっては、文字も半透明になります(むしろ、CSS仕様です)ので、指定する透明度によっては、工夫が必要になります。


**** 手順
o 0が透明です。1行目と2行目の単位にご注意下さい。
o 4行ありますが、これは有名どころの複数のブラウザーに対応する為です。
----------------
-ms-filter: "alpha(opacity=70)"; /* 範囲は0-100。Internet Explorer 8 */
filter : alpha(opacity=70); /* 範囲は0-100。Internet Explorer 6, 7 */
-moz-opacity : 0.7; /* 範囲は0-1。古いFirefox/Netscape */
opacity : 0.7; /* 範囲は0-1。Safari3/Opera 9.5/Firefox 3.5/CSS3新標準の予定 */
----------------

o 指定しても半透明にならない場合は、後ろに !importantを付けてみて下さい。優先順位が上がります。
----------------
-ms-filter: "alpha(opacity=70)" !important; /* このような感じで */
----------------


**** メモ
** opacity方式の欠点について
o CSSで透明度を指定した時の欠点は、一部のブラウザー(Firefoxなど)で、文字まで半透明になる事です。
o 私がzoomeマイページをカスタマイズした時は、平行して、日記のタイトルの文字の色を濃くしました。
o それでも文字の薄さを解決できない所には、「半透明後の画像を表示する」「アルファチャンネル付きのPNG画像を表示する」を使う方法があります。

** 1行目の記述について
o Internet Explorer 8の為に、最初の行が必要になりました。
o この行が必要になるのは、最近の規格で厳密に作ったページを表示する時です。
o なお、1行目-ms-filterの値は「"」で囲みます。2行目filterの値は「"」で囲みません。

** -khtml-opacityを載せなかった理由
o Safariブラウザのバージョン1.1 に対応させる為に、-khtml-opacity: 0.7; という書き方があるみたいです。でも、次の理由で、上には載せませんでした。
  (1) 現在、この古いバージョンを使っている方は、ほとんど居ないみたいです。
  (2) また、このバージョンで-khtml-opacityを指定すると、見栄えが変になる不具合に出会うらしいという情報を、Web検索で見つけました。
  (3) そして、to_dkでは、このバージョンでは動作確認していません。

** 参考資料
o ▽Microsoft CSS ベンダー拡張(MSDN)
o ▽Safari の CSS 独自拡張あるいは先行実装など(娘娘飯店しるきぃうぇぶ)


==
関連ページ:
    ▼要素の背景を半透明にする
    ▼CSSカスタマイズ
    ▼制作メモ
    > 半透明後の画像を表示する
    アルファチャンネル付きのPNG画像を表示する