initial commit

4 files changed, 673 insertions, 0 deletions

diff --git a/files/ja/web/css/media_queries/index.html b/files/ja/web/css/media_queries/index.html
new file mode 100644
index 0000000000..518d1ffdda
--- /dev/null
+++ b/files/ja/web/css/media_queries/index.html
@@ -0,0 +1,103 @@
+---
+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/testing_media_queries/index.html b/files/ja/web/css/media_queries/testing_media_queries/index.html
new file mode 100644
index 0000000000..cce7bfcb84
--- /dev/null
+++ b/files/ja/web/css/media_queries/testing_media_queries/index.html
@@ -0,0 +1,91 @@
+---
+title: プログラムによるメディアクエリのテスト
+slug: Web/CSS/Media_Queries/Testing_media_queries
+tags:
+  - Advanced
+  - CSS
+  - DOM
+  - Guide
+  - JavaScript
+  - MediaQueryList
+  - matchMedia
+  - ウェブ
+  - メディアクエリ
+  - レスポンシブデザイン
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<div>{{cssref}}</div>
+
+<p>{{Glossary("DOM")}} では、 {{domxref("MediaQueryList") }} インタフェースおよびそのメソッドやプロパティを用いて、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>の結果をプログラムで調べることができる機能を備えています。 {{domxref("MediaQueryList") }} オブジェクトを作成すると、クエリの結果を確認すること、あるいは結果が変化したときに自動的に通知を受け取ることができます。</p>
+
+<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">メディアクエリリストの作成</h2>
+
+<p>クエリの結果を評価できるようにするのに先立ち、メディアクエリを示す {{domxref("MediaQueryList") }} オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia") }} メソッドを用います。</p>
+
+<p>例えば、デバイスが横置きか縦置きかを調べるクエリリストを設定したい場合は、以下のようにしてください:</p>
+
+<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)");
+</pre>
+
+<h2 id="Checking_the_result_of_a_query" name="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" name="Receiving_query_notifications">クエリの通知の受信</h2>
+
+<p>クエリの評価結果の変化を継続的に意識する必要がある場合は、クエリの結果をポーリングするよりも<a href="/ja/docs/Web/API/EventTarget/addEventListener">リスナー</a>を登録することが効率的です。このためには、 {{domxref("MediaQueryList") }} オブジェクトの <code>addListener()</code> メソッドを呼び出し、メディアクエリの状態が変化したときに (例えば、メディアクエリの結果が <code>true</code> から <code>false</code> へ移行した場合に) 呼び出されるコールバック関数を設定してください。</p>
+
+<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
+function handleOrientationChange(mql) { ... } // イベントリスナーにコールバック関数を定義
+mediaQueryList.addListener(handleOrientationChange); // クエリリストにコールバック関数をリスナーとして追加
+
+handleOrientationChange(mediaQueryList); // 画面の向きが変更された時のハンドラーを一度実行。
+</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="/en-US/docs/Web/API/Event">イベントオブジェクト</a>をコールバック関数の引数として渡します。</p>
+
+<p>このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} 及び {{domxref("MediaQueryListEvent.match","match")}} プロパティも含んでおり、 <code>MediaQueryList</code> のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。</p>
+
+<h2 id="Ending_query_notifications" name="Ending_query_notifications">クエリの通知の終了</h2>
+
+<p>メディアクエリの値の変化について通知を受ける必要がなくなったときは、{{domxref("MediaQueryList") }} オブジェクトの <code>removeListener()</code> メソッドを呼び出してください。</p>
+
+<pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange);
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="MediaQueryList_インターフェイス"><code>MediaQueryList</code> インターフェイス</h3>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.MediaQueryList")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/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/using_media_queries/index.html b/files/ja/web/css/media_queries/using_media_queries/index.html
new file mode 100644
index 0000000000..a24ffa4734
--- /dev/null
+++ b/files/ja/web/css/media_queries/using_media_queries/index.html
@@ -0,0 +1,385 @@
+---
+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="/en-US/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 &lt;= 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 &lt;= width &lt;= 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_for_accessibility/index.html b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html
new file mode 100644
index 0000000000..02eaddac0f
--- /dev/null
+++ b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html
@@ -0,0 +1,94 @@
+---
+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">&lt;div class="animation"&gt;animated box&lt;/div&gt;
+</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>