diff options
Diffstat (limited to 'files/ja/web/css/media_queries')
8 files changed, 475 insertions, 682 deletions
diff --git a/files/ja/web/css/media_queries/index.html b/files/ja/web/css/media_queries/index.html deleted file mode 100644 index 518d1ffdda..0000000000 --- a/files/ja/web/css/media_queries/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: メディアクエリ -slug: Web/CSS/Media_queries -tags: - - CSS - - CSS3 メディアクエリ - - Reference - - メディアクエリ - - リファレンス - - レスポンシブデザイン - - 概要 -translation_of: Web/CSS/Media_Queries ---- -<div>{{CSSRef}}</div> - -<p><strong>メディアクエリ</strong>によって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。</p> - -<p>これは<a href="/ja/docs/Web/Progressive_web_apps">レスポンシブデザイン</a>のキーコンポーネントです。例えば、メディアクエリでは小さい端末でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落間の間隔を増やしたり、タッチスクリーンでボタンを拡大したりすることができます。</p> - -<p> <a href="/ja/docs/Web/CSS">CSS</a> では、 {{cssxref("@media")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>を使用して、メディアクエリの結果に基づいて条件付きでスタイルの一部を適用することができます。 {{cssxref("@import")}} を使用すると、条件付きでスタイルシート全体を適用することもできます。</p> - -<h3 id="Media_queries_in_HTML" name="Media_queries_in_HTML">HTML でのメディアクエリ</h3> - -<p> <a href="/ja/docs/Web/HTML">HTML</a> でも、メディアクエリは様々な要素に適用することができます。</p> - -<ul> - <li> {{HTMLElement("link")}} 要素の {{htmlattrxref("media", "link")}} 属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。</li> - <li> {{HTMLElement("source")}} 要素の {{htmlattrxref("media", "source")}} 属性では、ソースが適用されるメディアを定義します。 (これは {{HTMLElement("picture")}} 要素内でのみ有効です。)</li> - <li> {{HTMLElement("style")}} 要素の {{htmlattrxref("media", "style")}} 属性では、スタイルが適用されるメディアを定義します。</li> -</ul> - -<h3 id="Media_queries_in_JavaScript" name="Media_queries_in_JavaScript">JavaScript でのメディアクエリ</h3> - -<p> <a href="/ja/docs/Web/JavaScript">JavaScript</a> では、ウィンドウがメディアクエリに合うかどうかをテストするために {{domxref("Window.matchMedia()")}} メソッドを利用することができます。また、 {{domxref("MediaQueryList.addListener()")}} を使用して、クエリの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが端末の設定、方向、状態が変化したときに応答することができます。</p> - -<p>プログラムからのメディアクエリの使用については、<a href="/ja/docs/Web/CSS/Media_Queries/Testing_media_queries">メディアクエリのテスト</a>で知ることができます。</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="CSS_At-rules" name="CSS_At-rules">CSS @規則</h3> - -<div class="index"> -<ul> - <li>{{cssxref("@import")}}</li> - <li>{{cssxref("@media")}}</li> -</ul> -</div> - -<h2 id="Guides" name="Guides">ガイド</h2> - -<dl> - <dt><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの利用</a></dt> - <dd>メディアクエリと、その構文や演算子、メディアクエリ式を構築するために使用するメディア機能を紹介します。</dd> - <dt><a href="/ja/docs/Web/CSS/Media_Queries/Testing_media_queries">プログラムからのメディアクエリのテスト</a></dt> - <dd>JavaScript の中でメディアクエリを使用して端末の状態を特定する方法、メディアクエリの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナーをセットアップする方法を説明します。</dd> - <dt><a href="/ja/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">アクセシビリティのためのメディアクエリの使用</a></dt> - <dd>ユーザーがウェブサイトをより理解できるように、メディアクエリが支援できることを学びます。</dd> -</dl> - -<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('CSS5 Media Queries')}}</td> - <td>{{Spec2('CSS5 Media Queries')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Conditional')}}</td> - <td>{{Spec2('CSS3 Conditional')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS4 Media Queries')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'media.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li> {{cssxref("@supports")}} を使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。</li> -</ul> diff --git a/files/ja/web/css/media_queries/index.md b/files/ja/web/css/media_queries/index.md new file mode 100644 index 0000000000..acaca99d92 --- /dev/null +++ b/files/ja/web/css/media_queries/index.md @@ -0,0 +1,63 @@ +--- +title: メディアクエリー +slug: Web/CSS/Media_Queries +tags: + - CSS + - ガイド + - メディアクエリー + - 概要 + - リファレンス + - レスポンシブデザイン +translation_of: Web/CSS/Media_Queries +--- +{{CSSRef}} + +**メディアクエリー**によって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。 + +これは[レスポンシブデザイン](/ja/docs/Web/Progressive_web_apps)のキーコンポーネントです。例えば、メディアクエリーでは小さい端末でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落の間隔を広げたり、タッチ画面でボタンを拡大したりすることができます。 + +[CSS](/ja/docs/Web/CSS) では、 {{cssxref("@media")}} [アットルール](/ja/docs/Web/CSS/At-rule)を使用して、メディアクエリーの結果に基づいて条件付きでスタイルの一部を適用することができます。 {{cssxref("@import")}} を使用すると、条件付きでスタイルシート全体を適用することもできます。 + +### HTML でのメディアクエリー + +[HTML](/ja/docs/Web/HTML) でも、メディアクエリーは様々な要素に適用することができます。 + +- {{HTMLElement("link")}} 要素の {{htmlattrxref("media", "link")}} 属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。 +- {{HTMLElement("source")}} 要素の {{htmlattrxref("media", "source")}} 属性では、ソースが適用されるメディアを定義します。 (これは {{HTMLElement("picture")}} 要素内でのみ有効です。) +- {{HTMLElement("style")}} 要素の {{htmlattrxref("media", "style")}} 属性では、スタイルが適用されるメディアを定義します。 + +### avaScript でのメディアクエリー + +[JavaScript](/ja/docs/Web/JavaScript) では、ウィンドウがメディアクエリーに合うかどうかをテストするために {{domxref("Window.matchMedia()")}} メソッドを利用することができます。また、 {{domxref("MediaQueryList.addListener()")}} を使用して、クエリーの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが端末の設定、方向、状態が変化したときに応答することができます。 + +プログラムからのメディアクエリーの使用については、[メディアクエリーのテスト](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries)で知ることができます。 + +## リファレンス + +### アットルール + +- {{cssxref("@import")}} +- {{cssxref("@media")}} + +## ガイド + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) + - : メディアクエリーと、その構文や演算子、メディアクエリー式を構築するために使用するメディア機能を紹介します。 +- [プログラムからのメディアクエリーのテスト](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries) + - : JavaScript の中でメディアクエリーを使用して端末の状態を特定する方法、メディアクエリーの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナーをセットアップする方法を説明します。 +- [アクセシビリティのためのメディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility) + - : ユーザーがウェブサイトをより理解できるように、メディアクエリーが支援できることを学びます。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------ | ---------------------------------------- | ------------------ | +| {{SpecName('CSS5 Media Queries')}} | {{Spec2('CSS5 Media Queries')}} | | +| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | | +| {{SpecName('CSS4 Media Queries')}} | {{Spec2('CSS4 Media Queries')}} | | +| {{SpecName('CSS3 Media Queries')}} | {{Spec2('CSS3 Media Queries')}} | | +| {{SpecName('CSS2.1', 'media.html')}} | {{Spec2('CSS2.1')}} | 初回定義 | + +## 関連情報 + +- {{cssxref("@supports")}} を使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。 diff --git a/files/ja/web/css/media_queries/testing_media_queries/index.html b/files/ja/web/css/media_queries/testing_media_queries/index.html deleted file mode 100644 index 11ef861024..0000000000 --- a/files/ja/web/css/media_queries/testing_media_queries/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: プログラムによるメディアクエリーのテスト -slug: Web/CSS/Media_Queries/Testing_media_queries -tags: - - Advanced - - CSS - - DOM - - Guide - - JavaScript - - Media Queries - - MediaQueryList - - Responsive Design - - Web - - matchMedia - - ウェブ - - メディアクエリー - - レスポンシブデザイン -translation_of: Web/CSS/Media_Queries/Testing_media_queries ---- -<div>{{cssref}}</div> - -<p>{{Glossary("DOM")}} では、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a>の結果を {{domxref("MediaQueryList")}} インターフェイスおよびそのメソッドやプロパティを用いてプログラムからで調べることができる機能を備えています。 <code>MediaQueryList</code> オブジェクトを作成すると、クエリーの結果を確認したり、結果が変化したときに自動的に通知を受け取ったりすることができます。</p> - -<h2 id="Creating_a_media_query_list">メディアクエリーリストの作成</h2> - -<p>クエリーの結果を評価できるようにするのに先立ち、メディアクエリーを示す <code>MediaQueryList</code> オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia")}} メソッドを用います。</p> - -<p>例えば、端末が横置きか縦置きかを調べるクエリーリストを設定したい場合は、以下のようにします。</p> - -<pre class="brush: js">const mediaQueryList = window.matchMedia("(orientation: portrait)"); -</pre> - -<h2 id="Checking_the_result_of_a_query">クエリーの結果の確認</h2> - -<p>メディアクエリーリストが作成されると、その <code>matches</code> プロパティの値を参照することで、クエリーの結果を確認することができます。このプロパティは、クエリーの結果を反映します。</p> - -<pre class="brush: js">if (mediaQueryList.matches) { - /* 現在ビューポートが縦長である */ -} else { - /* 現在ビューポートが縦長ではない、すなわち横長である */ -} -</pre> - -<h2 id="Receiving_query_notifications">クエリーの通知の受信</h2> - -<p>クエリーの評価結果の変化を継続的に意識する必要がある場合は、クエリーの結果をポーリングするよりも<a href="/ja/docs/Web/API/EventTarget/addEventListener">リスナー</a>を登録したことが効率的です。このためには、 <code>addListener()</code> メソッドを {{domxref("MediaQueryList")}} オブジェクトに対して呼び出し、メディアクエリーの状態が変化したとき (例えば、メディアクエリーの結果が <code>true</code> から <code>false</code> へ移行した場合) に呼び出されるコールバック関数を設定します。</p> - -<pre class="brush: js">// クエリーリストを作成する。 -const mediaQueryList = window.matchMedia("(orientation: portrait)"); - -// イベントリスナーのコールバック関数を定義する。 -function handleOrientationChange(mql) { - // ... -} - -// 向き変更時のハンドラーを一度実行する。 -handleOrientationChange(mediaQueryList); - -// コールバック関数をリスナーとしてクエリーリストに追加する。 -mediaQueryList.addListener(handleOrientationChange); -</pre> - -<p>このコードでは端末の向き (orientation) を評価するメディアクエリーリストを作成し、次にリスナーを追加しています。リスナーを定義した後、そのリスナーを直接一度呼び出しています。これにより、リスナーが現在の端末の向きを基にして初期状態の調整を行うことができます (そうしないと、コードでは端末の初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。</p> - -<p>次の <code>handleOrientationChange()</code> メソッドで、クエリーの結果の確認や端末の向きが変わったときに必要な処理を行います。</p> - -<pre class="brush: js">function handleOrientationChange(evt) { - if (evt.matches) { - /* 現在ビューポートが縦長 */ - } else { - /* 現在ビューポートが横長 */ - } -} -</pre> - -<p>上記で、引数を <code>evt</code> — イベントオブジェクトとして定義しています。これは <a href="/ja/docs/Web/API/MediaQueryList#browser_compatibility"><code>MediaQueryList</code> の新しい実装</a>がイベントリスナーを標準の方法で扱うのでお分かりでしょう。標準外の {{domxref("MediaQueryListListener")}} の機構はもう使われませんが、標準のイベントリスナーの設定では、 {{domxref("MediaQueryListEvent")}} 型の<a href="/ja/docs/Web/API/Event">イベントオブジェクト</a>をコールバック関数の引数として渡します。</p> - -<p>このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} および {{domxref("MediaQueryListEvent.matches","matches")}} プロパティも含んでおり、 <code>MediaQueryList</code> のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。</p> - -<h2 id="Ending_query_notifications">クエリーの通知の終了</h2> - -<p>メディアクエリーの値の変化について通知を受ける必要がなくなったときは、 <code>removeListener()</code> メソッドを <code>MediaQueryList</code> オブジェクトに対して呼び出してください。</p> - -<pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange); -</pre> - -<h2 id="Browser_compatibility">ブラウザーの対応</h2> - -<h3 id="MediaQueryList_interface"><code>MediaQueryList</code> インターフェイス</h3> - -<p>{{Compat("api.MediaQueryList")}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリー</a></li> - <li>{{domxref("window.matchMedia()")}}</li> - <li>{{domxref("MediaQueryList")}}</li> - <li>{{domxref("MediaQueryListEvent")}}</li> -</ul> diff --git a/files/ja/web/css/media_queries/testing_media_queries/index.md b/files/ja/web/css/media_queries/testing_media_queries/index.md new file mode 100644 index 0000000000..a37028eb2a --- /dev/null +++ b/files/ja/web/css/media_queries/testing_media_queries/index.md @@ -0,0 +1,100 @@ +--- +title: プログラムによるメディアクエリーの評価 +slug: Web/CSS/Media_Queries/Testing_media_queries +tags: + - 上級者 + - CSS + - DOM + - ガイド + - JavaScript + - メディアクエリー + - MediaQueryList + - レスポンシブデザイン + - ウェブ + - matchMedia +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +{{CSSRef}} + +{{Glossary("DOM")}} では、[メディアクエリー](/ja/docs/Web/CSS/Media_Queries)の結果を {{domxref("MediaQueryList")}} インターフェイスおよびそのメソッドやプロパティを用いてプログラムからで調べることができる機能を備えています。 `MediaQueryList` オブジェクトを作成すると、クエリーの結果を確認したり、結果が変化したときに自動的に通知を受け取ったりすることができます。 + +## メディアクエリーリストの作成 + +クエリーの結果を評価できるようにするのに先立ち、メディアクエリーを示す `MediaQueryList` オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia")}} メソッドを用います。 + +例えば、端末が横置きか縦置きかを調べるクエリーリストを設定したい場合は、以下のようにします。 + +```js +const mediaQueryList = window.matchMedia("(orientation: portrait)"); +``` + +## クエリーの結果の確認 + +メディアクエリーリストが作成されると、その `matches` プロパティの値を参照することで、クエリーの結果を確認することができます。このプロパティは、クエリーの結果を反映します。 + +```js +if (mediaQueryList.matches) { + /* 現在ビューポートが縦長である */ +} else { + /* 現在ビューポートが縦長ではない、すなわち横長である */ +} +``` + +## クエリーの通知の受信 + +クエリーの評価結果の変化を継続的に意識する必要がある場合は、クエリーの結果をポーリングするよりも[リスナー](/ja/docs/Web/API/EventTarget/addEventListener)を登録したことが効率的です。このためには、 `addListener()` メソッドを {{domxref("MediaQueryList")}} オブジェクトに対して呼び出し、メディアクエリーの状態が変化したとき (例えば、メディアクエリーの結果が `true` から `false` へ移行した場合) に呼び出されるコールバック関数を設定します。 + +```js +// クエリーリストを作成する。 +const mediaQueryList = window.matchMedia("(orientation: portrait)"); + +// イベントリスナーのコールバック関数を定義する。 +function handleOrientationChange(mql) { + // ... +} + +// 向き変更時のハンドラーを一度実行する。 +handleOrientationChange(mediaQueryList); + +// コールバック関数をリスナーとしてクエリーリストに追加する。 +mediaQueryList.addListener(handleOrientationChange); +``` + +このコードでは端末の向き (orientation) を評価するメディアクエリーリストを作成し、次にリスナーを追加しています。リスナーを定義した後、そのリスナーを直接一度呼び出しています。これにより、リスナーが現在の端末の向きを基にして初期状態の調整を行うことができます (そうしないと、コードでは端末の初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。 + +次の `handleOrientationChange()` メソッドで、クエリーの結果の確認や端末の向きが変わったときに必要な処理を行います。 + +```js +function handleOrientationChange(evt) { + if (evt.matches) { + /* 現在ビューポートが縦長 */ + } else { + /* 現在ビューポートが横長 */ + } +} +``` + +上記で、引数を `evt` — イベントオブジェクトとして定義しています。これは [`MediaQueryList` の新しい実装](/ja/docs/Web/API/MediaQueryList#browser_compatibility)がイベントリスナーを標準の方法で扱うのでお分かりでしょう。標準外の {{domxref("MediaQueryListListener")}} の機構はもう使われませんが、標準のイベントリスナーの設定では、 {{domxref("MediaQueryListEvent")}} 型の[イベントオブジェクト](/ja/docs/Web/API/Event)をコールバック関数の引数として渡します。 + +このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} および {{domxref("MediaQueryListEvent.matches","matches")}} プロパティも含んでおり、 `MediaQueryList` のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。 + +## クエリーの通知の終了 + +メディアクエリーの値の変化について通知を受ける必要がなくなったときは、 `removeListener()` メソッドを `MediaQueryList` オブジェクトに対して呼び出してください。 + +```js +mediaQueryList.removeListener(handleOrientationChange); +``` + +## ブラウザーの互換性 + +### `MediaQueryList` インターフェイス + +{{Compat("api.MediaQueryList")}} + +## 関連情報 + +- [メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- {{domxref("window.matchMedia()")}} +- {{domxref("MediaQueryList")}} +- {{domxref("MediaQueryListEvent")}} diff --git a/files/ja/web/css/media_queries/using_media_queries/index.html b/files/ja/web/css/media_queries/using_media_queries/index.html deleted file mode 100644 index 779ab8f669..0000000000 --- a/files/ja/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,385 +0,0 @@ ---- -title: メディアクエリの使用 -slug: Web/CSS/Media_Queries/Using_media_queries -tags: - - Advanced - - CSS - - Guide - - ウェブ - - ガイド - - メディア - - メディアクエリ - - レスポンシブデザイン -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -<div>{{cssref}}</div> - -<p><strong>メディアクエリ</strong>は、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーの{{glossary("viewport", "ビューポート")}}の幅など) に応じてサイトやアプリを変更したいときに便利です。</p> - -<p>メディアクエリは以下の用途で使用されます。</p> - -<ul> - <li><a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref("@media")}} および {{cssxref("@import")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>により、条件付きでスタイルを適用する。</li> - <li>{{HTMLElement("link")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, などの <a href="/ja/docs/Web/HTML">HTML</a> 要素で <code>media=</code> 属性を付けて特定のメディアを対象とする。</li> - <li><a href="/ja/docs/Web/JavaScript">JavaScript</a> の {{domxref("Window.matchMedia()")}} および {{domxref("MediaQueryList.addListener()")}} メソッドを使用して<a href="/ja/docs/Web/CSS/Media_Queries/Testing_media_queries">メディアの状態を検査および監視</a>する。</li> -</ul> - -<div class="note"> -<p><strong>メモ:</strong> このページの例では説明のために CSS の <code>@media</code> を使用していますが、基本構文はすべての種類のメディアクエリで共通です。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p>メディアクエリは、任意の<em>メディアタイプ</em>と任意の数の<em>メディア特性</em>の式で構成されます。<em>論理演算子</em>を使用して、複数のクエリを様々な形で組み合わせることができます。メディアクエリは大文字・小文字の区別がありません。</p> - -<p>メディアクエリは、 (指定されていれば) メディアタイプが文書を表示している端末に一致しており、<em>かつ</em>すべてのメディア特性式が真と計算されれば、真と計算されます。不明なメディアタイプに対するクエリは常に偽です。</p> - -<div class="note"> -<p><strong>メモ:</strong> {{HTMLElement("link")}} タグによるメディアクエリ付きのスタイルシートは、クエリが偽を返しても<a href="http://scottjehl.github.com/CSS-Download-Tests/">ダウンロードされます</a>。にもかかわらず、中身はクエリが真に変わらない限り、適用されません。</p> -</div> - -<h3 id="Media_types" name="Media_types">メディアタイプ</h3> - -<p><em>メディアタイプ</em>は端末の全般的なカテゴリを説明します。 <code>not</code> 又は <code>only</code> の論理演算子を使用する場合を除いて、メディアタイプは任意であり、 <code>all</code> タイプが暗黙に含まれています。</p> - -<dl> - <dt><code id="all">all</code></dt> - <dd>すべての端末に一致します。</dd> - <dt><code id="print">print</code></dt> - <dd>ページ付きの素材や、印刷プレビューモードで画面に表示された文書のためのものです。 (これらの形式に特有の整形上の問題について詳しくは、<a href="/ja/docs/Web/CSS/Paged_Media">ページ付きメディア</a>をご覧ください。)</dd> - <dt><code id="screen">screen</code></dt> - <dd>主に画面のためのものです。</dd> - <dt><code id="speech">speech</code></dt> - <dd>主に音声合成のためのものです。</dd> -</dl> - -<div class="note"><strong>非推奨のメディアタイプ:</strong> CSS2.1 及び<a href="https://drafts.csswg.org/mediaqueries-3/#background">メディアクエリ 3</a> では、いくつかの追加のメディアタイプ (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) を定義しましたが、これらは<a href="http://dev.w3.org/csswg/mediaqueries/#media-types">メディアクエリ 4</a> で非推奨となり、使用するべきではありません。 <code>aural</code> タイプは似ている <code>speech</code> で置き換えられました。</div> - -<h3 id="Media_features" name="Media_features">メディア特性</h3> - -<p><em>メディア特性</em>は、特定の{{glossary("user agent", "ユーザーエージェント")}}や、出力端末や、環境などの特性を記述します。メディア特性式は、存在又は値を検査するもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。</p> - -<table> - <thead> - <tr> - <th>名前</th> - <th>概要</th> - <th>備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{cssxref("@media/any-hover", "any-hover")}}</td> - <td>入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものあるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td> - <td>入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td> - <td>ビューポートの幅対高さのアスペクト比</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/color", "color")}}</td> - <td>出力端末の色コンポーネントあたりの色数、または端末がカラーでなければゼロ</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td> - <td>ユーザーエージェント及び出力端末が対応しているおよその色の範囲</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/color-index", "color-index")}}</td> - <td>出力端末の色参照表の項目数、又は端末がそのような表を使用していないのであればゼロ</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td> - <td>出力端末の幅対高さのアスペクト比</td> - <td>Media Queries Level 4 で非推奨。</td> - </tr> - <tr> - <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td> - <td>出力端末のレンダリング面の高さ</td> - <td>Media Queries Level 4 で非推奨。</td> - </tr> - <tr> - <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td> - <td>出力端末のレンダリング面の幅</td> - <td>Media Queries Level 4 で非推奨。</td> - </tr> - <tr> - <td>{{cssxref("@media/display-mode", "display-mode")}}</td> - <td>ウェブアプリのマニフェストの <a href="/ja/docs/Web/Manifest#display"><code>display</code></a> メンバーで指定されているアプリケーションの表示モード</td> - <td><a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest 仕様書</a>で定義</td> - </tr> - <tr> - <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td> - <td>ユーザーエージェントがカラーパレットを制限しているかどうかを検出する</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/grid", "grid")}}</td> - <td>出力端末はグリッドとビットマップ画面のどちらを使用するか</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/height", "height")}}</td> - <td>ビューポートの高さ</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/hover", "hover")}}</td> - <td>主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td> - <td>ユーザーエージェントまたはその下の OS が色を反転しているか</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/light-level", "light-level")}}</td> - <td>環境の明るさレベル</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/monochrome", "monochrome")}}</td> - <td>出力端末のモノクロフレームバッファーにおけるピクセルあたりのビット数、又は端末がモノクロでなければゼロ</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/orientation", "orientation")}}</td> - <td>ビューポートの向き</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td> - <td>ビューポートをブロック軸方向にあふれたコンテンツを出力端末がどのように扱うか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td> - <td>ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/pointer", "pointer")}}</td> - <td>主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td> - <td>ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出する</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td> - <td>ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出する</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td> - <td>ユーザーがページであまり動きを望まないかどうか</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td> - <td>ユーザーが透明度を下げるよう望んでいるかどうか</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/resolution", "resolution")}}</td> - <td>出力端末のピクセル密度</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/scan", "scan")}}</td> - <td>出力端末のスキャン処理方式</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/scripting", "scripting")}}</td> - <td>スクリプト (例えば JavaScript) が利用できるかを検出する</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/update-frequency", "update")}}</td> - <td>どれだけの頻度で出力端末がコンテンツの表示を変更できるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/width", "width")}}</td> - <td>ビューポートの幅</td> - <td></td> - </tr> - </tbody> -</table> - -<h3 id="Logical_operators" name="Logical_operators">論理演算子</h3> - -<p><em>論理演算子</em> <code>not</code>, <code>and</code>, <code>only</code> を使用して、複雑なメディアクエリを構成することができます。複数のメディアクエリをカンマで区切って、単一の規則にまとめることもできます。</p> - -<h4 id="and" name="and"><code>and</code></h4> - -<p><code>and</code> 演算子は、複数のメディア特性を一つのメディアクエリにまとめるために使用し、クエリが真になるためには結合されたそれぞれの特性が真を返す必要があります。メディア特性とメディアタイプを組み合わせるためにも使用します。</p> - -<h4 id="not" name="not"><code>not</code></h4> - -<p><code>not</code> 演算子は、メディアクエリを否定するために使用し、もしクエリが偽を返せば真を返します。カンマ区切りのクエリのリストの中にある場合、適用された特定のクエリのみを否定します。 <code>not</code> 演算子を使用する場合は、メディアタイプも指定<em>しなければなりません</em>。</p> - -<div class="note"> -<p><strong>メモ:</strong> Level 3 では、 <code>not</code> キーワードは個別のメディア特性式を否定するために使用することはできず、メディアクエリ全体に対してしか使用できません。</p> -</div> - -<h4 id="only" name="only"><code>only</code></h4> - -<p><code>only</code> 演算子はクエリ全体が一致した場合にスタイルを適用し、古いブラウザーで選択されたスタイルが適用されるのを防ぐために使用します。 <code>only</code> を使用しない場合、古いブラウザーは <code>screen and (max-width: 500px)</code> というクエリを単なる <code>screen</code> として解釈してクエリの注釈を無視し、あらゆる画面にスタイルを適用します。 <code>only</code> 演算子を使用する場合は、メディアタイプも指定<em>しなければなりません</em>。</p> - -<h4 id="comma" name="comma"><code>,</code> (カンマ)</h4> - -<p>カンマは、複数のメディアクエリを一つのメディアクエリに結合するために使用します。カンマで区切ったリストの中にあるそれぞれのクエリは、他とは別なものとして扱われます。よって、リストの中の何れかのクエリが真になれば、メディアステートメント全体が真を返します。言い換えれば、リストは論理 <code>or</code> 演算子のように動作します。</p> - -<h2 id="Targeting_media_types" name="Targeting_media_types">メディアタイプの対象化</h2> - -<p>メディアタイプは、その端末の一般的なカテゴリを記述します。ウェブサイトは一般的に画面を想定してデザインされていますが、プリンターや音声ベースのスクリーンリーダーのような、特殊な端末を対象としたスタイルを作成したい場合もあるでしょう。例えば、この CSS はプリンターを対象としています。</p> - -<pre class="brush: css">@media print { ... }</pre> - -<p>複数の端末を対象にすることもできます。例えば、この <code>@media</code> ルールは2つのメディアクエリーを使用して、画面とプリンターの両方の端末を対象としています。</p> - -<pre class="brush: css">@media screen, print { ... }</pre> - -<p>すべてのメディアタイプの一覧は、<a class="internal" href="#Media_types">メディアタイプ</a>を参照してください。とても広い用語で端末を記述するため、数はわずかしかありません。もっと具体的な属性で対象にするには、代わりに<em>メディア特性</em>を使用してください。</p> - -<h2 id="Targeting_media_features" name="Targeting_media_features">メディア特性を対象とする</h2> - -<p>メディア特性は、{{glossary("user agent", "ユーザーエージェント")}}、出力端末、環境などの特定の特徴を記述します。例えば、画面の広いモニター、マウスを使用したコンピューター、暗い状況で使用される端末などに対して特定のスタイルを適用することができます。この例はユーザーの<em>主な</em>入力手段 (マウスなど) が要素の上で停止できる時にスタイルを適用します。</p> - -<pre class="brush: css">@media (hover: hover) { ... }</pre> - -<p>多くのメディア特性は<em>範囲特性</em>であり、 "min-" 又は "max-" の接頭辞をつけて「最小条件」又は「最大条件」の制約を表現します。例えば、この CSS はブラウザーの{{glossary("viewport", "ビューポート")}}の幅が 12,450px 以下である場合のみ、スタイルを適用します。</p> - -<pre class="brush: css">@media (max-width: 12450px) { ... }</pre> - -<p>値を指定せずにメディア特性クエリを作成した場合、特性の値がゼロ (または Level 4 では <code>none</code>) ではない場合に中のスタイルが使用されます。例えば、この CSS はカラー画面を持つ任意の端末に適用されます。</p> - -<pre class="brush: css">@media (color) { ... }</pre> - -<p>ブラウザーを実行している端末である特性が適用されない場合、メディア特性に向けた式は常に偽です。例えば、以下のクエリの中のスタイルは、音声のみの端末には画面のアスペクト比がないので、決して使われません。</p> - -<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }</pre> - -<p>その他の<a href="#Media_features">メディア特性</a>の例については、それぞれの特性のリファレンスページを参照してください。</p> - -<h2 id="Creating_complex_media_queries" name="Creating_complex_media_queries">複雑なメディアクエリの作成</h2> - -<p>時々、複数の条件に依存するメディアクエリを作成したくなる場合があるかもしれません。これは、 <code>not</code>, <code>and</code>, <code>only</code> の<strong>論理演算子</strong>の出番です。その上、複数のメディアクエリを<strong>カンマ区切りのリスト</strong>で結合することができます。これによって、同じスタイルを異なる場面に適用することができます。</p> - -<p>以前の例で、すでに <code>and</code> 演算子がメディア<em>タイプ</em>とメディア<em>特性</em>をグループ化するために使用されているのを見ました。 <code>and</code>演算子は、複数のメディア特性を1つのメディアクエリに結合することもできます。一方で <code>not</code> 演算子は、メディアクエリを反転し、基本的に普通の意味とは逆になります。 <code>only</code> 演算子は古いブラウザーでスタイルが適用されるのを防止します。</p> - -<div class="note"> -<p><strong>メモ:</strong> 多くの場合、 <code>all</code> メディアタイプが他のタイプが指定されない場合に既定で使用されます。しかし、 <code>not</code> 又は <code>only</code> 演算子を使用する場合は、メディアタイプを明示的に指定する必要があります。</p> -</div> - -<h3 id="Combining_multiple_types_or_features" name="Combining_multiple_types_or_features">複数のタイプ又は特性の組み合わせ</h3> - -<p><code>and</code> キーワードはメディア特性をメディアタイプ、<em>又は</em>他のメディア特性に結合します。この例は2つのメディア特性を結合して、スタイルを横長で幅が 30em 以上ある端末に制限します。</p> - -<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }</pre> - -<p>スタイルを画面に限定する場合は、メディア特性に <code>screen</code> メディアタイプを結合します。</p> - -<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre> - -<h3 id="Testing_for_multiple_queries" name="Testing_for_multiple_queries">複数のクエリの検査</h3> - -<p>カンマ区切りのリストを使うと、ユーザーの端末が様々なメディアタイプ、特性、状態のいずれか一つに一致する場合にスタイルを適用させることができます。例えば、以下の規則はユーザーの端末の高さが 680px 以上<em>又は</em>画面が縦長モードであるときにスタイルが適用されます。</p> - -<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre> - -<p>上記の例について言えば、もしユーザーがページの縦が 800px のプリンターを持っていた場合、最初のクエリが適用されるので media ステートメントは真を返します。同様に、ユーザーが縦長モードでビューポートの高さが 480px のスマートフォンを使っていた場合、2番目のクエリが適用され、 media ステートメントはやはり真を返します。</p> - -<h3 id="Inverting_a_querys_meaning" name="Inverting_a_querys_meaning">クエリの意味の反転</h3> - -<p><code>not</code> キーワードはメディアクエリ全体の意味を反転します。これは、適用される特定のメディアクエリを単純に反転します。 (従って、メディアクエリのカンマ区切りのリストの中では、それぞれのメディアクエリは適用されません。) <code>not</code> キーワードは個別の特性クエリに対して使用することができず、クエリ全体のみを反転します。 <code>not</code> は以下のクエリの最後に評価されます。</p> - -<pre class="brush: css">@media not all and (monochrome) { ... } -</pre> - -<p>... よって、上記のクエリは次のように評価されます。</p> - -<pre class="brush: css">@media not (all and (monochrome)) { ... } -</pre> - -<p>... このようにはなりません。</p> - -<pre class="brush: css example-bad">@media (not all) and (monochrome) { ... }</pre> - -<p>他の例を挙げます。以下のメディアクエリは、</p> - -<pre class="brush: css">@media not screen and (color), print and (color) { ... } -</pre> - -<p>... 次のように評価されます。</p> - -<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre> - -<h3 id="Improving_compatibility_with_older_browsers" name="Improving_compatibility_with_older_browsers">古いブラウザーとの互換性の維持</h3> - -<p><code>only</code> キーワードは、メディア特性がついたメディアクエリに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぎます。<em>最近のブラウザーでは効果がありません。</em></p> - -<pre class="brush: css">@media only screen and (color) { ... } -</pre> - -<h2 id="Syntax_improvements_in_Level_4" name="Syntax_improvements_in_Level_4">Level 4 での構文の拡張</h2> - -<p>Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリを作れるよう構文が拡張されました。 Level 4 はこのようなクエリを書くために<em>範囲コンテキスト</em>を追加しています。例えば、幅について <code>max-</code> の特性を使用する場合は、以下のように書くことができます。</p> - -<div class="note"> -<p><strong>注:</strong> Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は <a href="/ja/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> ブラウザー互換性一覧表</a>を参照してください。</p> -</div> - -<pre class="brush: css">@media (max-width: 30em) { ... }</pre> - -<p>Media Queries Level 4 では、これを次のように書くことができます。</p> - -<pre class="brush: css">@media (width <= 30em) { ... }</pre> - -<p><code>min-</code> および <code>max-</code> を使用すると、次のようにして幅が2つの値の間にあるかどうかを検査することができます。</p> - -<pre class="brush: css">@media (min-width: 30em) and (max-width: 50em) { ... }</pre> - -<p>Level 4 の構文に変換すると、次のようになります。</p> - -<pre class="brush: css">@media (30em <= width <= 50em ) { ... } -</pre> - -<p>また、 Media Queries Level 4 では <strong>and</strong>, <strong>not</strong>, <strong>or</strong> を伴う完全な論理代数を使ったメディアクエリの組み合わせの方法も追加されました。</p> - -<h3 id="Negating_a_feature_with_not" name="Negating_a_feature_with_not"><code>not</code> による特性の否定</h3> - -<p>メディア特性を <code>not()</code> を使用して囲むことで、クエリでその特性を否定します。例えば、 <code>not(hover)</code> は端末でホバーができない場合に一致します。</p> - -<pre class="brush: css">@media (not(hover)) { ... }</pre> - -<h3 id="or_による特性の結合"><code>or</code> による特性の結合</h3> - -<p><code>or</code> を使用して複数の特性の中の一つと一致するか検査することができ、特性のうちの何れかが true であれば <code>true</code> になります。例えば、次のクエリは端末がモノクロ画面である、またはホバーができるかどうかを検査します。</p> - -<pre class="brush: css">@media (not (color)) or (hover) { ... } -</pre> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/Using_media_queries_from_code">プログラムからのメディアクエリの検査</a></li> - <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a></li> - <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 拡張メディア特性</a></li> - <li><a href="/ja/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 拡張メディア特性</a></li> -</ul> diff --git a/files/ja/web/css/media_queries/using_media_queries/index.md b/files/ja/web/css/media_queries/using_media_queries/index.md new file mode 100644 index 0000000000..297e398020 --- /dev/null +++ b/files/ja/web/css/media_queries/using_media_queries/index.md @@ -0,0 +1,225 @@ +--- +title: メディアクエリーの使用 +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - 上級者 + - CSS + - ガイド + - ウェブ + - メディア + - メディアクエリー + - レスポンシブデザイン +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +{{CSSRef}} + +**メディアクエリー**は、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーの{{glossary("viewport", "ビューポート")}}の幅など) に応じてサイトやアプリを変更したいときに便利です。 + +メディアクエリーは以下の用途で使用されます。 + +- [CSS](/ja/docs/Web/CSS) の {{cssxref("@media")}} および {{cssxref("@import")}} [アットルール](/ja/docs/Web/CSS/At-rule)により、条件付きでスタイルを適用する。 +- {{HTMLElement("link")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, などの [HTML](/ja/docs/Web/HTML) 要素で `media=` 属性を付けて特定のメディアを対象とする。 +- [メディアの状態の検査と監視](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries)をするために、[JavaScript](/ja/docs/Web/JavaScript) で {{domxref("Window.matchMedia()")}} および {{domxref("MediaQueryList.addListener()")}} メソッドを使用する + +> **Note:** このページの例では説明のために CSS の `@media` を使用していますが、基本構文はすべての種類のメディアクエリーで共通です。 + +## 構文 + +メディアクエリーは、任意の*メディア種別*と任意の数の*メディア特性*の式で構成されます。*論理演算子*を使用して、複数のクエリーを様々な形で組み合わせることができます。メディアクエリーは大文字小文字の区別がありません。 + +- [メディア種別](/ja/docs/Web/CSS/@media#メディア種別)は、メディアクエリーを適用する機器の大まかな分類を `all`, `print`, `screen`, `speech` で定義します。 + + 種別は省略可能 (`all` と見なされる) ですが、 `not` や `only` 論理演算子を使用する場合は例外です。 +- [メディア特性](/ja/docs/Web/CSS/@media#メディア特性)は、{{glossary("user agent", "ユーザーエージェント")}}、出力機器、環境などの特定の特徴を記述します。 {{cssxref("@media/any-hover", "any-hover")}}, {{cssxref("@media/any-pointer", "any-pointer")}}, {{cssxref("@media/aspect-ratio", "aspect-ratio")}}, {{cssxref("@media/color", "color")}}, {{cssxref("@media/color-gamut", "color-gamut")}}, {{cssxref("@media/color-index", "color-index")}}, {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{deprecated_inline}}, {{cssxref("@media/device-height", "device-height")}} {{deprecated_inline}}, {{cssxref("@media/device-width", "device-width")}} {{deprecated_inline}}, {{cssxref("@media/display-mode", "display-mode")}}, {{cssxref("@media/forced-colors", "forced-colors")}}, {{cssxref("@media/grid", "grid")}}, {{cssxref("@media/height", "height")}}, {{cssxref("@media/hover", "hover")}}, {{cssxref("@media/inverted-colors", "inverted-colors")}}, {{cssxref("@media/monochrome", "monochrome")}}, {{cssxref("@media/orientation", "orientation")}}, {{cssxref("@media/overflow-block", "overflow-block")}}, {{cssxref("@media/overflow-inline", "overflow-inline")}}, {{cssxref("@media/pointer", "pointer")}}, {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}, {{cssxref("@media/prefers-contrast", "prefers-contrast")}}, {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}, {{cssxref("@media/resolution", "resolution")}}, {{cssxref("@media/scripting", "scripting")}}, {{cssxref("@media/update-frequency", "update")}}, {{cssxref("@media/width", "width")}} があります。 + + 例えば、{{cssxref("@media/hover", "hover")}} という機能では、端末が要素の上で停止したことを検出できるかどうかをクエリーで検査することができます。 + メディア特性式は、その存在や値をテストするもので、完全にオプションです。 + それぞれのメディア特性式は括弧で囲む必要があります。 + +- [論理演算子](/ja/docs/Web/CSS/@media#論理演算子)は、複合的なメディアクエリーを構成するために使用します。 `not`, `and`, `only` があります。 + また、複数のメディアクエリーをカンマで区切って 1 つのルールにまとめることもできます。 + +メディア種別（指定されている場合）が文書を表示する端末と照合され、かつ、すべてのメディア機能式が `true` と計算されると、メディアクエリーは true と計算されます。 +未知のメディア種別を含むクエリは常に false となります。 + +> **Note:** {{HTMLElement("link")}} タグにメディアクエリーがついていた場合、スタイルシートはクエリーが `false` を返したとしても[ダウンロードされます](https://scottjehl.github.io/CSS-Download-Tests/)が、ダウンロードの優先度ははるかに低くなります。 +> ただし、その内容は、クエリーの結果が `true` にならない限り適用されません。 +> なぜこのようになるかは、 Tomayac 氏のブログ [Why Browser Download Stylesheet with Non-Matching Media Queries](https://medium.com/@tomayac/why-browsers-download-stylesheets-with-non-matching-media-queries-eb61b91b85a2) に書かれています。 + + +## メディア種別を対象にする + +メディア種別は、その機器の一般的な分類を記述します。ウェブサイトは一般的に画面を想定してデザインされていますが、プリンターや、音声ベースの画面リーダーのような特殊な機器を対象としたスタイルを作成したい場合もあるでしょう。例えば、この CSS はプリンターを対象としています。 + +```css +@media print { ... } +``` + +複数の機器を対象にすることもできます。例えば、この `@media` ルールは 2 つのメディアクエリーを使用して、画面とプリンターの両方の端末を対象としています。 + +```css +@media screen, print { ... } +``` + +すべてのメディア種別の一覧は、[メディア種別](/ja/docs/Web/CSS/@media#メディア種別)を参照してください。とても大まかな用語で端末を記述するため、数はわずかしかありません。もっと具体的な属性で対象にするには、代わりに*メディア特性*を使用してください。 + +## メディア特性を対象にする + +メディア特性は、{{glossary("user agent", "ユーザーエージェント")}}、出力端末、環境などの特定の特徴を記述します。 +例えば、画面の広いモニター、マウスを使用したコンピューター、暗い状況で使用される端末などに対して特定のスタイルを適用することができます。 +この例は、ユーザーの*主な*入力手段（マウスなど）が要素の上で停止したことを検出できる場合にスタイルを適用します。 + +```css +@media (hover: hover) { ... } +``` + +多くのメディア特性は*範囲特性*であり、 "min-" または "max-" の接頭辞をつけて「最小条件」または「最大条件」の制約を表現します。例えば、この CSS はブラウザーの{{glossary("viewport", "ビューポート")}}の幅が 12450px 以下である場合のみ、スタイルを適用します。 + +```css +@media (max-width: 12450px) { ... } +``` + +値を指定せずにメディア特性クエリーを作成した場合、特性の値がゼロ (または Level 4 では `none`) ではない場合に中のスタイルが使用されます。例えば、この CSS はカラー画面を持つ任意の端末に適用されます。 + +```css +@media (color) { ... } +``` + +ブラウザーを実行している端末である特性が適用されない場合、メディア特性に向けた式は常に偽です。例えば、以下のクエリーの中のスタイルは、音声のみの端末には画面のアスペクト比がないので、決して使われません。 + +```css +@media speech and (aspect-ratio: 11/5) { ... } +``` + +その他の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)の例については、それぞれの特性のリファレンスページを参照してください。 + +## 複合メディアクエリーの作成 + +複数の条件に依存するメディアクエリーを作成したくなる場合があるかもしれません。これは、 `not`, `and`, `only` の**論理演算子**の出番です。その上、複数のメディアクエリーを**カンマ区切りのリスト**で結合することができます。これによって、同じスタイルを異なる場面で適用することができます。 + +以前の例で、すでに `and` 演算子がメディア*種別*とメディア*特性*をグループ化するために使用されているのを見ました。 +`and` 演算子は、複数のメディア特性を 1 つのメディアクエリーに結合することもできます。一方で `not` 演算子は、メディアクエリーを反転し、基本的に普通の意味とは逆になります。 +`only` 演算子は古いブラウザーでスタイルが適用されるのを防止します。 + +> **Note:** 多くの場合、 `all` メディア種別が他のタイプが指定されない場合に既定で使用されます。 +しかし、 `not` または `only` 演算子を使用する場合は、メディア種別を明示的に指定する必要があります。 + +### 複数の種別または特性の組み合わせ + +`and` キーワードはメディア特性をメディア種別、*または*他のメディア特性に結合します。この例は2つのメディア特性を結合して、スタイルを横長で幅が 30em 以上ある端末に制限します。 + +```css +@media (min-width: 30em) and (orientation: landscape) { ... } +``` + +スタイルを画面に限定する場合は、メディア特性に `screen` メディア種別を結合します。 + +```css +@media screen and (min-width: 30em) and (orientation: landscape) { ... } +``` + +### 複数のクエリーの検査 + +カンマ区切りのリストを使うと、ユーザーの端末が様々なメディア種別、特性、状態のいずれか一つに一致する場合にスタイルを適用させることができます。例えば、以下のルールはユーザーの端末の高さが 680px 以上*または*画面が縦長モードであるときにスタイルが適用されます。 + +```css +@media (min-height: 680px), screen and (orientation: portrait) { ... } +``` + +上記の例について言えば、もしユーザーがページの縦が 800px のプリンターを持っていた場合、最初のクエリーが適用されるので media ステートメントは真を返します。同様に、ユーザーが縦長モードでビューポートの高さが 480px のスマートフォンを使っていた場合、2番目のクエリーが適用され、 media ステートメントはやはり真を返します。 + +### クエリーの意味の反転 + +`not` キーワードはメディアクエリー全体の意味を反転します。これは、適用される特定のメディアクエリーを単純に反転します。 +(従って、メディアクエリーのカンマ区切りのリストにあるそれぞれのメディアクエリーには適用されません。) +`not` キーワードは個別の特性クエリーに対して使用することができず、クエリー全体のみを反転します。 `not` は以下のクエリーの最後に評価されます。 + +```css +@media not all and (monochrome) { ... } +``` + +... よって、上記のクエリーは次のように評価されます。 + +```css +@media not (all and (monochrome)) { ... } +``` + +... このようにはなりません。 + +```css example-bad +@media (not all) and (monochrome) { ... } +``` + +他の例を挙げます。以下のメディアクエリーは、 + +```css +@media not screen and (color), print and (color) { ... } +``` + +... 次のように評価されます。 + +```css +@media (not (screen and (color))), print and (color) { ... } +``` + +### 古いブラウザーとの互換性の維持 + +`only` キーワードは、メディア特性がついたメディアクエリーに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぎます。*最近のブラウザーでは効果がありません。* + +```css +@media only screen and (color) { ... } +``` + +## Level 4 での構文の拡張 + +Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリーを作れるよう構文が拡張されました。 +Level 4 はこのようなクエリーを書くために*範囲コンテキスト*を追加しています。例えば、幅について `max-` の特性を使用する場合は、以下のように書くことができます。 + +> **Note:** Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は [`@media` ブラウザー互換性一覧表](/ja/docs/Web/CSS/@media#ブラウザーの互換性)を参照してください。 + +```css +@media (max-width: 30em) { ... } +``` + +Media Queries Level 4 では、これを次のように書くことができます。 + +```css +@media (width <= 30em) { ... } +``` + +`min-` および `max-` を使用すると、次のようにして幅が2つの値の間にあるかどうかを検査することができます。 + +```css +@media (min-width: 30em) and (max-width: 50em) { ... } +``` + +Level 4 の構文に変換すると、次のようになります。 + +```css +@media (30em <= width <= 50em ) { ... } +``` + +また、 Media Queries Level 4 では **and**, **not**, **or** を伴う完全な論理代数を使ったメディアクエリーの組み合わせの方法も追加されました。 + +### `not` による特性の否定 + +`not()` を使用してメディア特性を囲むと、クエリーのその特性を否定します。例えば、 `not(hover)` は端末でホバーができない場合に一致します。 + +```css +@media (not(hover)) { ... } +``` + +### + +`or` を使用して複数の特性の中の一つと一致するか検査することができ、特性のうちの何れかが true であれば `true` になります。例えば、次のクエリーは端末がモノクロ画面である、またはホバーができるかどうかを検査します。 + +```css +@media (not (color)) or (hover) { ... } +``` + +## 関連情報 + +- [プログラムからのメディアクエリーの検査](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries) +- [CSS Animations Between Media Queries](https://davidwalsh.name/animate-media-queries) +- [Mozilla 拡張メディア特性](/ja/docs/Web/CSS/Mozilla_Extensions#media_features) +- [WebKit 拡張メディア特性](/ja/docs/Web/CSS/WebKit_Extensions#media_features) diff --git a/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html deleted file mode 100644 index 02eaddac0f..0000000000 --- a/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: アクセシビリティのためのメディアクエリの使用 -slug: Web/CSS/Media_queries/Using_Media_Queries_for_Accessibility -tags: - - '@media' - - CSS - - アクセシビリティ - - アニメーション - - メディア特性 -translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility ---- -<p><strong>メディアクエリ</strong>は、障碍を持ったユーザーがウェブサイトをより理解することを支援するためにも利用することができます。</p> - -<h2 id="Reduced_Motion" name="Reduced_Motion">動きの縮減</h2> - -<p>点滅やフラッシュのアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持った人々にとって問題になる可能性があります。加えて、特定の種類の動きが前庭障害、てんかん、片頭痛、スコピック感受性などを引き起こす可能性があります。</p> - -<p>また、この方法でユーザー設定によってアニメーションの停止を切り替えると、バッテリーが少ない、または性能が低い携帯電話やコンピューターを使用しているユーザーにも便益があります。</p> - -<h3 id="構文">構文</h3> - -<dl> - <dt><code><dfn>no-preference</dfn></code></dt> - <dd>システムが把握している設定をユーザーが行っていないことを示します。</dd> - <dt><code><dfn>reduce</dfn></code></dt> - <dd>ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。</dd> -</dl> - -<h3 id="Example">Example</h3> - -<p>この例は、アクセシビリティ設定で動きを抑制するよう設定しないと煩いアニメーションが表示されます。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><div class="animation">animated box</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">.animation { - -webkit-animation: vibrate 0.3s linear infinite both; - animation: vibrate 0.3s linear infinite both; -} - -@media (prefers-reduced-motion: reduce) { - .animation { - animation: none; - } -} -</pre> - -<h2 id="High_Contrast_Mode" name="High_Contrast_Mode">高コントラストモード</h2> - -<div>{{CSSRef}}{{Non-standard_header}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong>-ms-high-contrast</strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は <a href="/ja/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft 拡張</a>で、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。</p> - -<p>これは弱視やコントラストに敏感な問題を抱えるユーザーだけでなく、直射日光下のコンピューターや携帯電話で作業をしているユーザーにも役立ちます。</p> - -<h3 id="Syntax_2" name="Syntax_2">構文</h3> - -<p><strong><code>-ms-high-contrast</code></strong> メディア特性は、以下の値のうちの一つで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>active</code></dt> - <dd> - <p>配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。</p> - </dd> - <dt><code>black-on-white</code></dt> - <dd> - <p>配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。</p> - </dd> - <dt><code>white-on-black</code></dt> - <dd> - <p>配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。</p> - </dd> -</dl> - -<h3 id="Example_2" name="Example_2">例</h3> - -<p>以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。</p> - -<pre class="brush: css">@media screen and (-ms-high-contrast: active) { - /* すべての高コントラストの整形規則 */ -} -@media screen and (-ms-high-contrast: black-on-white) { - div { background-image: url('image-bw.png'); } -} -@media screen and (-ms-high-contrast: white-on-black) { - div { background-image: url('image-wb.png'); } -} -</pre> diff --git a/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.md b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.md new file mode 100644 index 0000000000..e81759e788 --- /dev/null +++ b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.md @@ -0,0 +1,87 @@ +--- +title: アクセシビリティのためのメディアクエリーの使用 +slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +tags: + - '@media' + - アクセシビリティ + - アニメーション + - CSS + - ガイド +translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +--- +**メディアクエリー**は、障碍を持ったユーザーがウェブサイトをより理解することを支援するためにも利用することができます。 + +## 動きの縮減 + +点滅やフラッシュのアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持った人々にとって問題になる可能性があります。加えて、特定の種類の動きが前庭障害、てんかん、片頭痛、スコピック感受性などを引き起こす可能性があります。 + +また、この方法でユーザー設定によってアニメーションの停止を切り替えると、バッテリーが少ない、または性能が低い携帯電話やコンピューターを使用しているユーザーにも便益があります。 + +### 構文 + +- `no-preference` + - : システムが把握している設定をユーザーが行っていないことを示します。 +- `reduce` + - : ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。 + +### 例 + +この例は、アクセシビリティ設定で動きを抑制するよう設定しないと煩いアニメーションが表示されます。 + +#### HTML + +```html +<div class="animation">animated box</div> +``` + +#### CSS + +```css +.animation { + -webkit-animation: vibrate 0.3s linear infinite both; + animation: vibrate 0.3s linear infinite both; +} + +@media (prefers-reduced-motion: reduce) { + .animation { + animation: none; + } +} +``` + +## 高コントラストモード + +{{CSSRef}}{{Non-standard_header}} + +**-ms-high-contrast** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)、 [Microsoft 拡張](/ja/docs/Web/CSS/Microsoft_extensions)であり、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。 + +これは弱視やコントラストに敏感な問題を抱えるユーザーだけでなく、直射日光下のコンピューターや携帯電話で作業をしているユーザーにも役立ちます。 + +## 構文 + +**`-ms-high-contrast`** メディア特性は、以下の値のうちの一つで指定します。 + +### 値 + +- `active` + - : 配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。 +- `black-on-white` + - : 配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。 +- `white-on-black` + - : 配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。 + +## 例 + +以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。 + +```css +@media screen and (-ms-high-contrast: active) { + /* すべての高コントラストの整形規則 */ +} +@media screen and (-ms-high-contrast: black-on-white) { + div { background-image: url('image-bw.png'); } +} +@media screen and (-ms-high-contrast: white-on-black) { + div { background-image: url('image-wb.png'); } +} +``` |