diff options
Diffstat (limited to 'files/ja/web/css/opacity/index.md')
| -rw-r--r-- | files/ja/web/css/opacity/index.md | 218 |
1 files changed, 109 insertions, 109 deletions
diff --git a/files/ja/web/css/opacity/index.md b/files/ja/web/css/opacity/index.md index 48781e619b..5e7760a7ef 100644 --- a/files/ja/web/css/opacity/index.md +++ b/files/ja/web/css/opacity/index.md @@ -4,66 +4,91 @@ slug: Web/CSS/opacity tags: - CSS - CSS プロパティ - - Opacity - - Reference - 不透明度 + - リファレンス + - recipe:css-property +browser-compat: css.properties.opacity translation_of: Web/CSS/opacity --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>CSS の <strong><code>opacity</code></strong> プロパティは、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。</p> +**`opacity`** は CSS のプロパティで、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。 -<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div> +{{EmbedInteractiveExample("pages/css/opacity.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<p>この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。すなわち、要素とそれに含まれる子要素は、互いに透明度が異なっていても、その要素の背景に対しては同程度の透明度となります。</p> +```css +opacity: 0.9 +opacity: 90% -<p>このプロパティを <code>1</code> 以外の値で用いると、その要素は新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を作ります。</p> +/* グローバル値 */ +opacity: inherit; +opacity: initial; +opacity: revert; +opacity: unset; +``` -<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> +- `<alpha-value>` -<h2 id="Syntax" name="Syntax">構文</h2> + - : {{cssxref("number")}} を `0.0` 以上 `1.0` 以下で、また {{cssxref("percentage")}} を `0%` 以上 `100%` 以下で、チャネルの不透明度 (つまり、アルファチャネルの値) を表します。範囲外の数値も有効ですが、近い方の限界値に丸められます。 -<h3 id="Values" name="Values">値</h3> + | 値 | 意味 | + | ----------------------------------------------------- | ------------------------------------------------------------- | + | `0` | 要素は完全に透明です (つまり、不可視です)。 | + | `0` と `1` の中間にある何れかの {{cssxref("number")}} | 要素は半透明です (つまり、要素の背後のコンテンツが見えます)。 | + | `1` (既定値) | 要素は完全に不透明です (中身が詰まって見えます)。 | -<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> +`opacity` の値は子要素に継承されませんが、要素のコンテンツを含む全体に適用されます。すなわち、ある要素とその子の不透明度が互いに異なっていたとしても、その要素の背景に対してはすべて同じ不透明度になります。 + +このプロパティを `1` 以外の値で用いると、その要素は新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を作ります。 + +背景の不透明度のみを変更したい場合は、{{cssxref("background")}} プロパティでアルファチャネルを使用できる[色の値](/ja/docs/Web/CSS/color_value)を使用してください。 + +```css +background: rgba(0, 0, 0, 0.4); +``` + +## アクセシビリティの考慮 + +文字列の opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。 + +色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在の[ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)](https://www.w3.org/WAI/intro/wcag) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。 + +- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/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) +- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +<h3 id="Setting_opacity">基本的な例</h3> + +次の例では、`opacity` プロパティで要素とその内容全体の不透明度を変更することで、テキストを非常に読みにくくしています。 + +#### HTML + +```html +<div class="light">何とか見える程度でしょう。</div> +<div class="medium">簡単に見えるでしょう。</div> +<div class="heavy">とても見やすいでしょう。</div> +``` -<h3 id="Basic_example" name="Basic_example">基本的な例</h3> +#### CSS -<pre class="brush: css notranslate">div { background-color: yellow; } +```css +div { background-color: yellow; font-weight: bold; font-size: 130%; } .light { opacity: 0.2; /* Barely see the text over the background */ } @@ -73,80 +98,55 @@ translation_of: Web/CSS/opacity .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> +{{EmbedLiveSample('Setting_opacity', '640', '105')}} -<h3 id="Different_opacity_with_hover" name="Different_opacity_with_hover">:hover を使った透明度の変化</h3> +<h3 id="Setting_opacity_on_hover">ホバー時の透明度の設定</h3> -<pre class="brush: css notranslate">img.opacity { +次の例では、ホバー時に不透明度を変更し、親要素の縞模様の背景画像が透けて見えるようにしています。 + +#### HTML + +```html +<div class="wrapper"> + <img src="//interactive-examples.mdn.mozilla.net/media/dino.svg" + alt="MDN Dino" width="128" height="146" + class="opacity"> +</div> +``` + +#### CSS + +```css +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="/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> +} + +.wrapper { + width: 200px; + height: 160px; + background-color: #f03cc3; + background-image: linear-gradient(90deg, transparent 50%, + rgba(255,255,255,.5) 50%); + background-size: 20px 20px; +} +``` + +#### 結果 + +{{EmbedLiveSample('Setting_opacity_on_hover', '150', '200')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} |