ywork2020.com

Title

要素ボックスの透明度を指定する

目次 (INDEX)

opacityとは

opacity とは次の語句からなるCSSのプロパティです。
opacity
読み: オパシティ
意味: 不透明度

目次に戻る

opacityプロパティの概要

このプロパティは要素ボックス全体の透明度を指定することができます。

このプロパティの効果はブロックレベル要素やインライン要素に関係なく、 指定した要素とその要素に内包される全てのコンテンツに適用されます。

内包される全てのコンテンツに適用されるというのは効果値を継承しているのではなく、内包コンテンツに影響を与えていると解釈してください。 例えば親要素でopacity 50%にした場合、内包コンテンツの基準値は親要素の透過度となります。 そこで内包コンテンツにopacity 100%にしたところで、そのコンテンツは既に50%の透過度になっているので不透明に戻すことはできません。 しかし既に50%の透過度になっているコンテンツの要素にopacity 50%を適用することはできます。 これは親要素で50%の透過になっているところに、そこから更に50%の透過を加えるので、親要素からいうと75%の透過率ということになります。

指定できる数値は、透明(0.0)~不透明(1.0)の間の実数値か、又は透明(0%)~不透明(100%)のパーセンテージ値となります。

このプロパティは、指定した要素ボックス内に含まれる子要素にも同レベルの透明度となるので、子要素に適用したくない場合は、 colorプロパティや background-colorプロパティにRGBAカラーを使用してください。

RGBAカラーについては、 色見本 のページでも紹介しています。

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。 サンプルの検証に使うのはdiv要素です。サンプルではdiv要素を黄色の背景色に設定しています。 つまり、この中に入っているコンテンツがopacityプロパティの効果対象となります。

透明度の値は実数値かパーセンテージ値で指定します。 最小値(0.0)は完全な透明となり数値が上がるにしたがい不透明感は失われていきます。最大値は(1.0)で不透明になります。

構文

セレクター{opacity: 透明度;}

初期値: 1.0

このプロパティの初期値は、1.0です。 1.0は100%と同じ値であり、不透明度100%ということになります。 つまり、透明感は全く無く、要素内の背景色やテキストや画像など、全てのコンテンツは元の画質で表示されます。

opacity: 未設定 画像の透明度を検証するサンプル
opacity: 1.0 画像の透明度を検証するサンプル
opacity: 100% 画像の透明度を検証するサンプル

div{opacity: 1.0;}

目次に戻る

数値: opacity: 0.5

opacity: 0.5にすると中間の数値なので不透明度は50%となります。

初期値 画像の透明度を検証するサンプル
opacity: 0.5 画像の透明度を検証するサンプル
opacity: 50% 画像の透明度を検証するサンプル

div{opacity: 0.5;}

目次に戻る

数値: opacity: 0.2

opacity: 0.1にすると不透明度は20%なので、透明度80%はとなり、色合いが、かなり薄くなります。

初期値 画像の透明度を検証するサンプル
opacity: 0.2 画像の透明度を検証するサンプル
opacity: 20% 画像の透明度を検証するサンプル

div{opacity: 0.2;}

目次に戻る

サンプル: 文字の透過

opacityを使用してテキストに透明度を指定したサンプルです。 指定の仕方も画像やバックグラウンドを透過する方法と変わりはありません。

opacity: 1.0
opacity: 0.3

余談になるかもしれませんが、 文字の透過にはRGBAカラーコードを使うこともできます。詳しくは CSS: colorのページをご覧ください。

セレクター{opacity: 0.3;}

目次に戻る

グローバル値

opacityプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値の1.0に戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{opacity: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

opacity: 1.0;

opacity: 0.9;

opacity: 0.8;

opacity: 0.7;

opacity: 0.6;

opacity: 0.5;

opacity: 0.4;

opacity: 0.3;

opacity: 0.2;

opacity: 0.1;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る