From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/opacity/index.html | 154 ++++++++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/ja/web/css/opacity/index.html (limited to 'files/ja/web/css/opacity') diff --git a/files/ja/web/css/opacity/index.html b/files/ja/web/css/opacity/index.html new file mode 100644 index 0000000000..68e73df742 --- /dev/null +++ b/files/ja/web/css/opacity/index.html @@ -0,0 +1,154 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS プロパティ + - Opacity + - Reference + - 不透明度 +translation_of: Web/CSS/opacity +--- +
{{CSSRef}}
+ +

CSS の opacity プロパティは、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。

+ +
{{EmbedInteractiveExample("pages/css/opacity.html")}}
+ + + +

この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。すなわち、要素とそれに含まれる子要素は、互いに透明度が異なっていても、その要素の背景に対しては同程度の透明度となります。

+ +

このプロパティを 1 以外の値で用いると、その要素は新しい重ね合わせコンテキストを作ります。

+ +

もし、子要素に透明度を適用したくない場合は、以下のように代わりに {{cssxref("background")}} プロパティを使用してください。

+ +
background: rgba(0, 0, 0, 0.4);
+ +

構文

+ +

値

+ +
+
<alpha-value>
+
{{cssxref("number")}} を 0.0 以上 1.0 以下で、また {{cssxref("percentage")}} を 0% 以上 100% 以下で、チャネルの不透明度 (つまり、アルファチャネルの値) を表します。範囲外の数値も有効ですが、近い方の限界値におさめられます。 + + + + + + + + + + + + + + + + + + + +
値意味
0要素は完全に透明です (つまり、不可視です)
{{cssxref("number")}} が 0 より大きく 1 未満の何れかの値要素は半透明です (つまり、要素の背後のコンテンツが見えます)。
1 (既定値)要素は完全に不透明です (中身が詰まって見えます)
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

基本的な例

+ +
div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* Barely see the text over the background */
+}
+.medium {
+  opacity: 0.5; /* See the text more clearly over the background */
+}
+.heavy {
+  opacity: 0.9; /* See the text very clearly over the background */
+}
+
+ +
<div class="light">You can barely see this.</div>
+<div class="medium">This is easier to see.</div>
+<div class="heavy">This is very easy to see.</div>
+
+ +

{{EmbedLiveSample('Basic_example', '640', '64')}}

+ +

:hover を使った透明度の変化

+ +
img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 and lower */
+  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}
+ +
<img src="//developer.mozilla.org/static/img/opengraph-logo.png"
+  alt="MDN ロゴ" width="128" height="146"
+  class="opacity">
+
+ +

{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}

+ +

アクセシビリティの考慮事項

+ +

文字列の opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。

+ +

色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Colors', '#transparency', 'opacity')}}{{Spec2('CSS4 Colors')}}opacity の値にパーセント値を定義。
{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.opacity", 2)}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf