1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
---
title: opacity
slug: Web/CSS/opacity
tags:
- CSS
- CSS プロパティ
- Opacity
- Reference
- 不透明度
translation_of: Web/CSS/opacity
---
<div>{{CSSRef}}</div>
<p>CSS の <strong><code>opacity</code></strong> プロパティは、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。</p>
<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<p>この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。すなわち、要素とそれに含まれる子要素は、互いに透明度が異なっていても、その要素の背景に対しては同程度の透明度となります。</p>
<p>このプロパティを <code>1</code> 以外の値で用いると、その要素は新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を作ります。</p>
<p>もし、<a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">子要素に透明度を適用したくない場合</a>は、以下のように代わりに {{cssxref("background")}} プロパティを使用してください。</p>
<pre class="brush:css notranslate">background: rgba(0, 0, 0, 0.4);</pre>
<h2 id="Syntax" name="Syntax">構文</h2>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code><alpha-value></code></dt>
<dd>{{cssxref("number")}} を <code>0.0</code> 以上 <code>1.0</code> 以下で、また {{cssxref("percentage")}} を <code>0%</code> 以上 <code>100%</code> 以下で、チャネルの不透明度 (つまり、アルファチャネルの値) を表します。範囲外の数値も有効ですが、近い方の限界値におさめられます。
<table class="standard-table">
<tbody>
<tr>
<th>値</th>
<th>意味</th>
</tr>
<tr>
<td><code>0</code></td>
<td>要素は完全に透明です (つまり、不可視です)</td>
</tr>
<tr>
<td>{{cssxref("number")}} が <code>0</code> より大きく <code>1</code> 未満の何れかの値</td>
<td>要素は半透明です (つまり、要素の背後のコンテンツが見えます)。</td>
</tr>
<tr>
<td><code>1</code> (既定値)</td>
<td>要素は完全に不透明です (中身が詰まって見えます)</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
<pre class="brush: css notranslate">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 */
}
</pre>
<pre class="brush: html notranslate"><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>
</pre>
<p>{{EmbedLiveSample('Basic_example', '640', '64')}}</p>
<h3 id="Different_opacity_with_hover" name="Different_opacity_with_hover">:hover を使った透明度の変化</h3>
<pre class="brush: css notranslate">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;
}</pre>
<pre class="brush: html notranslate"><img src="<a href="https://developer.mozilla.org/static/img/opengraph-logo.png">//developer.mozilla.org/static/img/opengraph-logo.png</a>"
alt="MDN ロゴ" width="128" height="146"
class="opacity">
</pre>
<p>{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
<p>文字列の opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。</p>
<p>色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。</p>
<ul>
<li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
<li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Colors', '#transparency', 'opacity')}}</td>
<td>{{Spec2('CSS4 Colors')}}</td>
<td>opacity の値にパーセント値を定義。</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
<td>{{Spec2('CSS3 Colors')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("css.properties.opacity", 2)}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="http://msdn.microsoft.com/ja-jp/library/ms532910%28VS.85%29.aspx">マイクロソフトの filter:alpha(opacity=xx)</a></li>
</ul>
|
