Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

opacity

要素の透明度を指定できます。

サンプルコード

div.test { opacity: 1;}
div.test1 { opacity: 0.5;}
div.test2 { opacity: 0;}

指定可能な値一覧

値	概要
数値	数値で透明度を指定します。単位は使いません。指定可能な範囲は『0.0』〜『1.0』です。『0.0』に近づくほど透明度が高くなります。初期値は『1.0』です。

ブラウザでの表示結果

<p style="opacity: 1;"><img src="/dics/dictionary-css/img/sample.jpg"></p>

<p style="opacity: 0.5;"><img src="/dics/dictionary-css/img/sample.jpg"></p>

<p style="opacity: 0;"><img src="/dics/dictionary-css/img/sample.jpg"></p>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

要素の透明度を指定できます。

『opacity』プロパティで完全透明にされた要素はあくまでも見えなくなっているだけなので要素の存在が消えてしまうというわけではありません。要素の存在をなかったものとしてレイアウトを組みたい場合は『display』プロパティに『none』と指定すると良いでしょう。

尚、この『opacity』プロパティはIE8以下のIEブラウザでは動きません。IE8以下のブラウザに対しても透明度を指定したい、といった場合には『filter』プロパティの『alpha(opacity=数値)』を同時に指定するようにしてください。『filter』プロパティの『alpha(opacity=数値)』の数値は『0』〜『100』の値を取ります。『0』が完全透明、『100』が完全不透明です。

div.test {
    opacity: 0.5;
    filter: alpha(opacity=50); /* IE8以下のブラウザ対策 */
    -ms-filter: alpha(opacity=50); /* IE8以下のブラウザ対策 */
}

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル