Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理に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>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

2 以降 ○

Edge

12 以降 ○

全バージョンで対応しています

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9 以降 ○

8 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

概要

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

『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以下のブラウザ対策 */
}

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

トップページへ