initial commit

4 files changed, 380 insertions, 0 deletions

diff --git a/files/ja/web/api/mediaquerylist/index.html b/files/ja/web/api/mediaquerylist/index.html
new file mode 100644
index 0000000000..b0c50fd12f
--- /dev/null
+++ b/files/ja/web/api/mediaquerylist/index.html
@@ -0,0 +1,118 @@
+---
+title: MediaQueryList
+slug: Web/API/MediaQueryList
+tags:
+  - API
+  - Adaptive Design
+  - CSSOM View
+  - DOM
+  - Interface
+  - Media Queries
+  - MediaQueryList
+  - Reference
+  - query
+  - アダプティブデザイン
+  - インターフェイス
+  - メディアクエリ
+translation_of: Web/API/MediaQueryList
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<p><span class="seoSummary">A <strong><code>MediaQueryList</code></strong> オブジェクトは文書に適用されている<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>の情報を格納し、文書の状態に対する中間かつイベントドリブンのマッチングに対応します。</span> <code>MediaQueryList</code> は {{DOMxRef("Window.matchMedia", "matchMedia()")}} を {{DOMxRef("window")}} オブジェクト上で呼び出すことで作成することができます。結果として得られるオブジェクトは、メディアクエリの状態が変化したとき (つまり、メディアクエリのテストが <code>true</code> の評価が開始または停止したとき) に、リスナーへの通知の送信を処理します。</p>
+
+<p>これにより、定期的に値をポーリングするのではなく、文書を観察してメディアクエリが変更されたときに検出することが可能になり、メディアクエリの状態に基づいて文書にプログラム的に変更を加えることができるので、アダプティブデザインにとても便利です。</p>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<p><em><code>MediaQueryList</code> インターフェイスは親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承しています。</em></p>
+
+<dl>
+ <dt>{{DOMxRef("MediaQueryList.matches", "matches")}}{{ReadOnlyInline}}</dt>
+ <dd>{{jsxref("Boolean")}} で、 <code>true</code> であれば {{DOMxRef("document")}} が現在メディアクエリリストに一致しており、 <code>false</code> であればそうではありません。</dd>
+ <dt>{{DOMxRef("MediaQueryList.media", "media")}}{{ReadOnlyInline}}</dt>
+ <dd>{{DOMxRef("DOMString")}} で、シリアライズされたメディアクエリを表します。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p><em><code>MediaQueryList</code> インターフェイスは親インターフェイスである {{DOMxRef("EventTarget")}} からメソッドを継承しています。</em></p>
+
+<dl>
+ <dt>{{DOMxRef("MediaQueryList.addListener", "addListener()")}}</dt>
+ <dd><code>MediaQueryList</code> にコールバックを追加します。このコールバックは、メディアクエリの状態 (リスト内のメディアクエリと文書が一致するかどうか) が変化するたびに呼び出されます。このメソッドは、主に下位互換性のために存在します。可能であれば、代わりに {{domxref("EventTarget.addEventListener", "addEventListener()")}}を使用して {{domxref("EventTarget.change_event", "change")}} イベントを監視してください。</dd>
+ <dt>{{DOMxRef("MediaQueryList.removeListener", "removeListener()")}}</dt>
+ <dd>指定されたリスナーコールバックを、 <code>MediaQueryList</code> でメディアクエリの状態が変化するたび、すなわち <code>MediaQueryList</code> に列挙されたメディアクエリの一致・不一致の状態が変化するに呼び出されるコールバックから削除します。このメソッドは下位互換性のために保持されています。可能であれば、一般的に {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} を使用して、変更通知コールバックを削除してください (以前 <code>addEventListener()</code> を使用して追加されたものです)。</dd>
+</dl>
+
+<h2 id="Events" name="Events">イベント</h2>
+
+<p><em>以下のイベントは <code>MediaQueryList</code> オブジェクトに配信されます。</em></p>
+
+<dl>
+ <dt>{{DOMxRef("MediaQueryList.change_event", "change")}}</dt>
+ <dd>文書に対してメディアクエリを実行した結果が変更されたときに <code>MediaQueryList</code> に送信されます。例えば、メディアクエリが <code>(min-width: 400px)</code> の場合、 <code>change</code> イベントが文書の{{Glossary("viewport", "ビューポート")}}}の幅が 400px の閾値を通過するよう変更されるたびに発行されます。<br>
+ また、 {{DOMxRef("MediaQueryList.onchange", "onchange")}} イベントハンドラープロパティを使用することもできます。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このシンプルな例では、 <code>MediaQueryList</code> を作成し、メディアクエリの状態が変化したときにそれを検出するリスナーを設定し、それがページの表示を変更するときにカスタム関数を実行します。</p>
+
+<pre class="brush: js notranslate">var para = document.querySelector('p');
+var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* the viewport is 600 pixels wide or less */
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* the viewport is more than than 600 pixels wide */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addEventListener(screenTest);</pre>
+
+<div class="note">
+<p><strong>注</strong>: この例は GitHub にあります (<a href="https://github.com/mdn/dom-examples/blob/master/mediaquerylist/index.html">ソースコード</a>を参照、および<a href="https://mdn.github.io/dom-examples/mediaquerylist/index.html">ライブで実行</a>)。</p>
+</div>
+
+<p>他の例は個別のプロパティやメソッドのページにあります。</p>
+
+<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("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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/CSS/Media_queries">メディアクエリ</a></li>
+ <li><a href="/ja/docs/CSS/Using_media_queries_from_code">コードからのメディアクエリの使用</a></li>
+ <li>{{DOMxRef("window.matchMedia()")}}</li>
+ <li>{{DOMxRef("MediaQueryListListener")}}</li>
+ <li>{{DOMxRef("MediaQueryListEvent")}}</li>
+ <li>{{DOMxRef("Window.devicePixelRatio")}} の記事にも有益な例があります</li>
+</ul>
diff --git a/files/ja/web/api/mediaquerylist/matches/index.html b/files/ja/web/api/mediaquerylist/matches/index.html
new file mode 100644
index 0000000000..c45ac010cf
--- /dev/null
+++ b/files/ja/web/api/mediaquerylist/matches/index.html
@@ -0,0 +1,90 @@
+---
+title: MediaQueryList.matches
+slug: Web/API/MediaQueryList/matches
+tags:
+  - API
+  - Adaptive Design
+  - CSSOM
+  - CSSOM View
+  - DOM
+  - Media Queries
+  - MediaQueryList
+  - Property
+  - Reference
+  - matches
+  - アダプティブデザイン
+  - プロパティ
+  - メディアクエリ
+translation_of: Web/API/MediaQueryList/matches
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<p><strong><code>matches</code></strong> は {{DOMxRef("MediaQueryList")}} インターフェイスの読み取り専用プロパティで、 {{jsxref("Boolean")}} であり、文書が現在メディアクエリリストと一致している場合は <code>true</code> を返し、一致していない場合は <code>false</code> を返します。</p>
+
+<p><code>matches</code> の値が変化した場合は、 <code>MediaQueryList</code> で発生する {{domxref("MediaQueryList.change_event", "change")}} イベントを監視することで通知を受けることができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">var <var>matches</var> = &lt;varm&gt;MediaQueryList.matches;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>{{DOMxRef("Boolean")}}。 {{DOMxRef("document")}} が現在メディアクエリーのリストに一致していれば <code>true</code> を返し、そうでなければ <code>false</code> を返します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では <code><a href="/ja/docs/Web/CSS/@media/orientation">orientation</a></code> メディア特性を使用したメディアクエリを作成することにより、ビューポートの向きの変化を検出します。</p>
+
+<pre class="brush: js notranslate">function addMQListener(mq, callback) {
+  if (mq.addEventListener) {
+    mq.addEventListener("change", callback);
+  } else {
+    mq.addListener(callback);
+  }
+}
+
+addMQListener(window.matchMedia("(orientation:landscape)"),
+  event =&gt; {
+    if (event.matches) {
+      /* 横向きの画面になった */
+    } else {
+      /* 縦向きの画面になった */
+    }
+  }
+);
+</pre>
+
+<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("CSSOM View", "#dom-mediaquerylist-matches", "matches")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>編集者草稿</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.matches")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/CSS/Media_queries">メディアクエリ</a></li>
+ <li><a href="/ja/docs/CSS/Using_media_queries_from_code">コードからのメディアクエリの使用</a></li>
+ <li>{{DOMxRef("window.matchMedia()")}}</li>
+ <li>{{DOMxRef("MediaQueryList")}}</li>
+ <li>{{DOMxRef("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/ja/web/api/mediaquerylist/media/index.html b/files/ja/web/api/mediaquerylist/media/index.html
new file mode 100644
index 0000000000..cebf436a43
--- /dev/null
+++ b/files/ja/web/api/mediaquerylist/media/index.html
@@ -0,0 +1,98 @@
+---
+title: MediaQueryList.media
+slug: Web/API/MediaQueryList/media
+tags:
+  - API
+  - CSSOM View
+  - Media
+  - Media Queries
+  - MediaQueryList
+  - Property
+  - Reference
+  - プロパティ
+  - メディア
+  - メディアクエリ
+translation_of: Web/API/MediaQueryList/media
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<p><code><strong>media</strong></code> は {{DOMxRef("MediaQueryList")}} インターフェイスの読取専用プロパティであり、 {{DOMxRef("DOMString")}} でシリアライズされたメディアクエリを表します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">var <var>media</var> = <var>MediaQueryList</var>.media;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>{{DOMxRef("DOMString")}} で、シリアライズされたメディアクエリあを表します。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、 <code>(max-width: 600px)</code> のメディアクエリを実行し、 <code>MediaQueryList</code> の <code>media</code> プロパティの結果の値を {{HTMLElement("span")}} の中に表示します。</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">let mql = window.matchMedia('(max-width: 600px)');
+
+document.querySelector(".mq-value").innerText = mql.media;
+</pre>
+
+<p>この JavaScript コードは一致させるメディアクエリを単に {{DOMxRef("Window.matchMedia", "matchMedia()")}} に渡してコンパイルし、それから <code>&lt;span&gt;</code> の {{DOMxRef("HTMLElement.innerText", "innerText")}} に {{DOMxRef("MediaQueryList.media", "media")}} プロパティの結果の値を設定します。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;span class="mq-value"&gt;&lt;/span&gt;</pre>
+
+<p>シンプルな <code>&lt;span&gt;</code> は出力を受け取るためのものです。</p>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.mq-value {
+  font: 18px arial, sans-serif;
+  font-weight: bold;
+  color: #88f;
+  padding: 0.4em;
+  border: 1px solid #dde;
+}
+</pre>
+</div>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", "60")}}</p>
+
+<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("CSSOM View", "#dom-mediaquerylist-media", "media")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.media")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/CSS/Media_queries">メディアクエリ</a></li>
+ <li><a href="/ja/docs/CSS/Using_media_queries_from_code">コードからのメディアクエリの使用</a></li>
+ <li>{{DOMxRef("window.matchMedia()")}}</li>
+ <li>{{DOMxRef("MediaQueryList")}}</li>
+ <li>{{DOMxRef("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/ja/web/api/mediaquerylist/onchange/index.html b/files/ja/web/api/mediaquerylist/onchange/index.html
new file mode 100644
index 0000000000..893aa1d38b
--- /dev/null
+++ b/files/ja/web/api/mediaquerylist/onchange/index.html
@@ -0,0 +1,74 @@
+---
+title: MediaQueryList.onchange
+slug: Web/API/MediaQueryList/onchange
+tags:
+  - API
+  - CSSOM View
+  - Event Handler
+  - MediaQueryList
+  - Property
+  - Reference
+  - onchange
+  - イベントハンドラー
+  - プロパティ
+  - メディアクエリ
+translation_of: Web/API/MediaQueryList/onchange
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<p><code><strong>onchange</strong></code> は {{DOMxRef("MediaQueryList")}} インターフェイスのプロパティで、 {{domxref("MediaQueryList/change_event", "change")}} イベントが発行されたとき、すなわちメディアクエリの対応の状態が変化したときに呼び出される関数を表します。イベントオブジェクトは {{DOMxRef("MediaQueryListEvent")}} のインスタンスであり、古いブラウザーからは後方互換性のために <code>MediaListQuery</code> のインスタンスと解釈されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>MediaQueryList</var>.onchange = function() { ... };</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js notranslate">var mql = window.matchMedia('(max-width: 600px)');
+
+mql.addEventListener( "change", (e) =&gt; {
+    if (e.matches) {
+    /* ビューポートが 600 ピクセル幅以下 */
+    console.log('This is a narrow screen — less than 600px wide.')
+  } else {
+    /* ビューポートが 600 ピクセル幅より広い */
+    console.log('This is a wide screen — more than 600px wide.')
+  }
+})
+
+</pre>
+
+<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("CSSOM View", "#dom-mediaquerylist-onchange", "onchange")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.onchange")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/CSS/Media_queries">メディアクエリ</a></li>
+ <li><a href="/ja/docs/CSS/Using_media_queries_from_code">コードからのメディアクエリの使用</a></li>
+ <li>{{DOMxRef("window.matchMedia()")}}</li>
+ <li>{{DOMxRef("MediaQueryList")}}</li>
+ <li>{{DOMxRef("MediaQueryListEvent")}}</li>
+</ul>