initial commit

1 files changed, 68 insertions, 0 deletions

diff --git a/files/ja/web/api/window/matchmedia/index.html b/files/ja/web/api/window/matchmedia/index.html
new file mode 100644
index 0000000000..a29368376d
--- /dev/null
+++ b/files/ja/web/api/window/matchmedia/index.html
@@ -0,0 +1,68 @@
+---
+title: window.matchMedia
+slug: Web/API/Window/matchMedia
+tags:
+  - API
+  - CSSOM View
+  - Method
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Reference
+translation_of: Web/API/Window/matchMedia
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>指定された <a href="/ja/docs/Web/Guide/CSS/Media_queries">メディアクエリ</a>文字列のパース結果を表す、新しい {{domxref("MediaQueryList")}} オブジェクトを返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var>mql</var> = window.matchMedia(<em>mediaQueryString</em>)</pre>
+
+<p><code>mediaQueryString</code> は、新しい {{domxref("MediaQueryList")}} オブジェクトを返すための、メディアクエリ文字列です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js">if (window.matchMedia( "(min-width: 400px)" ).matches) {
+  /* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
+} else {
+  /* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
+}
+</pre>
+
+<p>このコードでは、ウィンドウが非常に狭いときに、何か別の処理を行うことができます。</p>
+
+<p>他にも『<a href="/ja/docs/Web/Guide/CSS/Testing_media_queries">コード内でのメディアクエリの使用</a>』にいくつか例があります。</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-window-matchmedia", "Window.matchMedia()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ互換性</h2>
+
+<div>{{Compat("api.Window.matchMedia")}}</div>
+
+<h2 id="See_also" name="See_also">関連記事</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/CSS/Media_queries">メディアクエリ</a></li>
+ <li><a href="/ja/docs/Web/CSS/Using_media_queries_from_code">コード内でのメディアクエリの使用</a></li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+</ul>