diff --git a/files/ja/web/api/mediaquerylist/change_event/index.md b/files/ja/web/api/mediaquerylist/change_event/index.md
index 7be6dea98a0b2..40651df347bb0 100644
--- a/files/ja/web/api/mediaquerylist/change_event/index.md
+++ b/files/ja/web/api/mediaquerylist/change_event/index.md
@@ -70,8 +70,8 @@ mql.onchange = (e) => {
## 関連情報
-- [メディアクエリー](/ja/docs/CSS/Media_queries)
-- [コードからのメディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries)
+- [メディアクエリー](/ja/docs/Web/CSS/Media_Queries)
+- [プログラムによるメディアクエリーの評価](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries)
- {{DOMxRef("window.matchMedia()")}}
- {{DOMxRef("MediaQueryList")}}
- {{DOMxRef("MediaQueryListEvent")}}
\ No newline at end of file
diff --git a/files/ja/web/api/mediaquerylist/index.html b/files/ja/web/api/mediaquerylist/index.html
deleted file mode 100644
index 848696dddc160..0000000000000
--- a/files/ja/web/api/mediaquerylist/index.html
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: MediaQueryList
-slug: Web/API/MediaQueryList
-tags:
- - API
- - Adaptive Design
- - CSSOM View
- - DOM
- - Interface
- - Media Queries
- - MediaQueryList
- - Reference
- - query
- - アダプティブデザイン
- - インターフェイス
- - メディアクエリ
-translation_of: Web/API/MediaQueryList
----
-{{APIRef("CSSOM")}}
-
-A MediaQueryList オブジェクトは文書に適用されているメディアクエリの情報を格納し、文書の状態に対する中間かつイベントドリブンのマッチングに対応します。 MediaQueryList は {{DOMxRef("Window.matchMedia", "matchMedia()")}} を {{DOMxRef("window")}} オブジェクト上で呼び出すことで作成することができます。結果として得られるオブジェクトは、メディアクエリの状態が変化したとき (つまり、メディアクエリのテストが true の評価が開始または停止したとき) に、リスナーへの通知の送信を処理します。
-
-これにより、定期的に値をポーリングするのではなく、文書を観察してメディアクエリが変更されたときに検出することが可能になり、メディアクエリの状態に基づいて文書にプログラム的に変更を加えることができるので、アダプティブデザインにとても便利です。
-
-プロパティ
-
-MediaQueryList インターフェイスは親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承しています。
-
-
- - {{DOMxRef("MediaQueryList.matches", "matches")}}{{ReadOnlyInline}}
- - {{jsxref("Boolean")}} で、
true であれば {{DOMxRef("document")}} が現在メディアクエリリストに一致しており、 false であればそうではありません。
- - {{DOMxRef("MediaQueryList.media", "media")}}{{ReadOnlyInline}}
- - {{DOMxRef("DOMString")}} で、シリアライズされたメディアクエリを表します。
-
-
-メソッド
-
-MediaQueryList インターフェイスは親インターフェイスである {{DOMxRef("EventTarget")}} からメソッドを継承しています。
-
-
- - {{DOMxRef("MediaQueryList.addListener", "addListener()")}}
- MediaQueryList にコールバックを追加します。このコールバックは、メディアクエリの状態 (リスト内のメディアクエリと文書が一致するかどうか) が変化するたびに呼び出されます。このメソッドは、主に下位互換性のために存在します。可能であれば、代わりに {{domxref("EventTarget.addEventListener", "addEventListener()")}}を使用して {{domxref("EventTarget.change_event", "change")}} イベントを監視してください。- {{DOMxRef("MediaQueryList.removeListener", "removeListener()")}}
- - 指定されたリスナーコールバックを、
MediaQueryList でメディアクエリの状態が変化するたび、すなわち MediaQueryList に列挙されたメディアクエリの一致・不一致の状態が変化するに呼び出されるコールバックから削除します。このメソッドは下位互換性のために保持されています。可能であれば、一般的に {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} を使用して、変更通知コールバックを削除してください (以前 addEventListener() を使用して追加されたものです)。
-
-
-イベント
-
-以下のイベントは MediaQueryList オブジェクトに配信されます。
-
-
- - {{DOMxRef("MediaQueryList.change_event", "change")}}
- - 文書に対してメディアクエリを実行した結果が変更されたときに
MediaQueryList に送信されます。例えば、メディアクエリが (min-width: 400px) の場合、 change イベントが文書の{{Glossary("viewport", "ビューポート")}}}の幅が 400px の閾値を通過するよう変更されるたびに発行されます。
- また、 {{DOMxRef("MediaQueryList.onchange", "onchange")}} イベントハンドラープロパティを使用することもできます。
-
-
-例
-
-このシンプルな例では、 MediaQueryList を作成し、メディアクエリの状態が変化したときにそれを検出するリスナーを設定し、それがページの表示を変更するときにカスタム関数を実行します。
-
-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);
-
-
-
-他の例は個別のプロパティやメソッドのページにあります。
-
-仕様書
-
-
-
-
- | 仕様書 |
- 状態 |
- 備考 |
-
-
-
-
- | {{SpecName("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}} |
- {{Spec2("CSSOM View")}} |
- 初回定義 |
-
-
-
-
-ブラウザーの互換性
-
-{{Compat("api.MediaQueryList")}}
-
-関連情報
-
-
- - メディアクエリ
- - コードからのメディアクエリの使用
- - {{DOMxRef("window.matchMedia()")}}
- - {{DOMxRef("MediaQueryListListener")}}
- - {{DOMxRef("MediaQueryListEvent")}}
- - {{DOMxRef("Window.devicePixelRatio")}} の記事にも有益な例があります
-
diff --git a/files/ja/web/api/mediaquerylist/index.md b/files/ja/web/api/mediaquerylist/index.md
new file mode 100644
index 0000000000000..abca8b15c7ac2
--- /dev/null
+++ b/files/ja/web/api/mediaquerylist/index.md
@@ -0,0 +1,94 @@
+---
+title: MediaQueryList
+slug: Web/API/MediaQueryList
+tags:
+ - API
+ - Adaptive Design
+ - CSSOM View
+ - DOM
+ - Interface
+ - Media Queries
+ - MediaQueryList
+ - Reference
+ - query
+ - アダプティブデザイン
+ - インターフェイス
+ - メディアクエリー
+translation_of: Web/API/MediaQueryList
+---
+{{APIRef("CSSOM")}}
+
+**`MediaQueryList`** オブジェクトは文書に適用されている[メディアクエリー](/ja/docs/Web/CSS/Media_Queries)の情報を格納し、文書の状態に対する即時かつイベントドリブンのマッチングに対応します。
+
+`MediaQueryList` は {{DOMxRef("Window.matchMedia", "matchMedia()")}} を {{DOMxRef("window")}} オブジェクト上で呼び出すことで作成することができます。結果として得られるオブジェクトは、メディアクエリーの状態が変化したとき (つまり、メディアクエリーのテストが `true` の評価が開始または停止したとき) に、リスナーへの通知の送信を処理します。
+
+これにより、定期的に値をポーリングするのではなく、文書を監視してメディアクエリーが変更されたときに検出することが可能になり、メディアクエリーの状態に基づいて文書にプログラム的に変更を加えることができるので、アダプティブデザインにとても便利です。
+
+## プロパティ
+
+_`MediaQueryList` インターフェイスは親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承しています。_
+
+- {{DOMxRef("MediaQueryList.matches", "matches")}}{{ReadOnlyInline}}
+ - : `boolean` で、 `true` であれば {{DOMxRef("document")}} が現在メディアクエリーリストに一致しており、 `false` であればそうではありません。
+- {{DOMxRef("MediaQueryList.media", "media")}}{{ReadOnlyInline}}
+ - : 文字列で、シリアライズされたメディアクエリーを表します。
+
+## メソッド
+
+_`MediaQueryList` インターフェイスは親インターフェイスである {{DOMxRef("EventTarget")}} からメソッドを継承しています。_
+
+- {{DOMxRef("MediaQueryList.addListener", "addListener()")}}{{deprecated_inline}}
+ - : `MediaQueryList` にコールバックを追加します。このコールバックは、メディアクエリーの状態 (リスト内のメディアクエリーと文書が一致するかどうか) が変化するたびに呼び出されます。このメソッドは、主に下位互換性のために存在します。可能であれば、代わりに {{domxref("EventTarget.addEventListener", "addEventListener()")}}を使用して {{domxref("MediaQueryList.change_event", "change")}} イベントを監視してください。
+- {{DOMxRef("MediaQueryList.removeListener", "removeListener()")}}{{deprecated_inline}}
+ - : 指定されたリスナーコールバックを、 `MediaQueryList` でメディアクエリーの状態が変化するたび、すなわち `MediaQueryList` に列挙されたメディアクエリーの一致・不一致の状態が変化するに呼び出されるコールバックから削除します。このメソッドは下位互換性のために保持されています。可能であれば、一般的に {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} を使用して、変更通知コールバックを削除してください (以前 `addEventListener()` を使用して追加されたものです)。
+
+## イベント
+
+_以下のイベントは `MediaQueryList` オブジェクトに配信されます。_
+
+- {{DOMxRef("MediaQueryList.change_event", "change")}}
+ - : 文書に対してメディアクエリーを実行した結果が変更されたときに `MediaQueryList` に送信されます。例えば、メディアクエリーが `(min-width: 400px)` の場合、 `change` イベントが文書の{{Glossary("viewport", "ビューポート")}}の幅が 400px の閾値を通過するよう変更されるたびに発行されます。
+
+## 例
+
+このシンプルな例では、 `MediaQueryList` を作成し、メディアクエリーの状態が変化したときにそれを検出するリスナーを設定し、それがページの表示を変更するときにカスタム関数を実行します。
+
+```js
+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);
+```
+
+> **Note:** この例は GitHub にあります ([ソースコード](https://github.com/mdn/dom-examples/blob/master/mediaquerylist/index.html)を参照、および[ライブで実行](https://mdn.github.io/dom-examples/mediaquerylist/index.html))。
+
+他の例は個別のプロパティやメソッドのページにあります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [メディアクエリー](/ja/docs/Web/CSS/Media_Queries)
+- [プログラムによるメディアクエリーの評価](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries)
+- {{DOMxRef("window.matchMedia()")}}
+- {{DOMxRef("MediaQueryListListener")}}
+- {{DOMxRef("MediaQueryListEvent")}}
+- {{DOMxRef("Window.devicePixelRatio")}} の記事にも有益な例があります
\ No newline at end of file
diff --git a/files/ja/web/api/mediaquerylist/matches/index.html b/files/ja/web/api/mediaquerylist/matches/index.html
deleted file mode 100644
index 1383ae5b16c1d..0000000000000
--- a/files/ja/web/api/mediaquerylist/matches/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-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
----
-{{APIRef("CSSOM")}}
-
-matches は {{DOMxRef("MediaQueryList")}} インターフェイスの読み取り専用プロパティで、 {{jsxref("Boolean")}} であり、文書が現在メディアクエリーリストと一致している場合は true を返し、一致していない場合は false を返します。
-
-matches の値が変化した場合は、 MediaQueryList で発生する {{domxref("MediaQueryList.change_event", "change")}} イベントを監視することで通知を受けることができます。
-
-構文
-
-var matches = <varm>MediaQueryList.matches;
-
-値
-
-{{DOMxRef("Boolean")}}。 {{DOMxRef("document")}} が現在メディアクエリーのリストに一致していれば true を返し、そうでなければ false を返します。
-
-例
-
-この例では orientation メディア特性を使用したメディアクエリーを作成することにより、ビューポートの向きの変化を検出します。
-
-function addMQListener(mq, callback) {
- if (mq.addEventListener) {
- mq.addEventListener("change", callback);
- } else {
- mq.addListener(callback);
- }
-}
-
-addMQListener(window.matchMedia("(orientation:landscape)"),
- event => {
- if (event.matches) {
- /* 横向きの画面になった */
- } else {
- /* 縦向きの画面になった */
- }
- }
-);
-
-
-仕様書
-
-
-
-
- | 仕様書 |
- 状態 |
- 備考 |
-
-
-
-
- | {{SpecName("CSSOM View", "#dom-mediaquerylist-matches", "matches")}} |
- {{Spec2("CSSOM View")}} |
- 編集者草稿 |
-
-
-
-
-ブラウザーの互換性
-
-{{Compat("api.MediaQueryList.matches")}}
-
-関連情報
-
-
- - メディアクエリー
- - コードからのメディアクエリーの使用
- - {{DOMxRef("window.matchMedia()")}}
- - {{DOMxRef("MediaQueryList")}}
- - {{DOMxRef("MediaQueryListEvent")}}
-
diff --git a/files/ja/web/api/mediaquerylist/matches/index.md b/files/ja/web/api/mediaquerylist/matches/index.md
new file mode 100644
index 0000000000000..855b653c0eaaa
--- /dev/null
+++ b/files/ja/web/api/mediaquerylist/matches/index.md
@@ -0,0 +1,69 @@
+---
+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
+---
+
+{{APIRef("CSSOM")}}
+
+**`matches`** は {{DOMxRef("MediaQueryList")}} インターフェイスの読み取り専用プロパティで、 `boolean` であり、文書が現在メディアクエリーリストと一致している場合は `true` を返し、一致していない場合は `false` を返します。
+
+`matches` の値が変化した場合は、 `MediaQueryList` で発生する {{domxref("MediaQueryList.change_event", "change")}} イベントを監視することで通知を受けることができます。
+
+### 値
+
+boolean。 {{DOMxRef("document")}} が現在メディアクエリーのリストに一致していれば `true` を返し、そうでなければ `false` を返します。
+
+## 例
+
+この例では [`orientation`](/ja/docs/Web/CSS/@media/orientation) メディア特性を使用したメディアクエリーを作成することにより、ビューポートの向きの変化を検出します。
+
+```js
+function addMQListener(mq, callback) {
+ if (mq.addEventListener) {
+ mq.addEventListener("change", callback);
+ } else {
+ mq.addListener(callback);
+ }
+}
+
+addMQListener(window.matchMedia("(orientation:landscape)"),
+ event => {
+ if (event.matches) {
+ /* 横向きの画面になった */
+ } else {
+ /* 縦向きの画面になった */
+ }
+ }
+);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat("api.MediaQueryList.matches")}}
+
+## 関連情報
+
+- [メディアクエリー](/ja/docs/Web/CSS/Media_Queries)
+- [プログラムによるメディアクエリーの評価](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries)
+- {{DOMxRef("window.matchMedia()")}}
+- {{DOMxRef("MediaQueryList")}}
+- {{DOMxRef("MediaQueryListEvent")}}
diff --git a/files/ja/web/api/mediaquerylist/media/index.html b/files/ja/web/api/mediaquerylist/media/index.html
deleted file mode 100644
index d02312e0663dc..0000000000000
--- a/files/ja/web/api/mediaquerylist/media/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: MediaQueryList.media
-slug: Web/API/MediaQueryList/media
-tags:
- - API
- - CSSOM View
- - Media
- - Media Queries
- - MediaQueryList
- - Property
- - Reference
- - プロパティ
- - メディア
- - メディアクエリー
-translation_of: Web/API/MediaQueryList/media
----
-{{APIRef("CSSOM")}}
-
-media は {{DOMxRef("MediaQueryList")}} インターフェイスの読取専用プロパティであり、 {{DOMxRef("DOMString")}} でシリアライズされたメディアクエリーを表します。
-
-構文
-
-var media = MediaQueryList.media;
-
-値
-
-{{DOMxRef("DOMString")}} で、シリアライズされたメディアクエリーを表します。
-
-例
-
-この例では、 (max-width: 600px) のメディアクエリーを実行し、 MediaQueryList の media プロパティの結果の値を {{HTMLElement("span")}} の中に表示します。
-
-JavaScript
-
-let mql = window.matchMedia('(max-width: 600px)');
-
-document.querySelector(".mq-value").innerText = mql.media;
-
-
-この JavaScript コードは一致させるメディアクエリーを単に {{DOMxRef("Window.matchMedia", "matchMedia()")}} に渡してコンパイルし、それから <span> の {{DOMxRef("HTMLElement.innerText", "innerText")}} に {{DOMxRef("MediaQueryList.media", "media")}} プロパティの結果の値を設定します。
-
-HTML
-
-<span class="mq-value"></span>
-
-シンプルな <span> は出力を受け取るためのものです。
-
-
-
CSS
-
-
.mq-value {
- font: 18px arial, sans-serif;
- font-weight: bold;
- color: #88f;
- padding: 0.4em;
- border: 1px solid #dde;
-}
-
-
結果
-
-{{EmbedLiveSample("Examples", "100%", "60")}}
-
-仕様書
-
-
-
-
- | 仕様書 |
- 状態 |
- 備考 |
-
-
-
-
- | {{SpecName("CSSOM View", "#dom-mediaquerylist-media", "media")}} |
- {{Spec2("CSSOM View")}} |
- 初回定義 |
-
-
-
-
-ブラウザーの互換性
-
-{{Compat("api.MediaQueryList.media")}}
-
-関連情報
-
-
- - メディアクエリー
- - コードからのメディアクエリーの使用
- - {{DOMxRef("window.matchMedia()")}}
- - {{DOMxRef("MediaQueryList")}}
- - {{DOMxRef("MediaQueryListEvent")}}
-
diff --git a/files/ja/web/api/mediaquerylist/media/index.md b/files/ja/web/api/mediaquerylist/media/index.md
new file mode 100644
index 0000000000000..f943b78220996
--- /dev/null
+++ b/files/ja/web/api/mediaquerylist/media/index.md
@@ -0,0 +1,76 @@
+---
+title: MediaQueryList.media
+slug: Web/API/MediaQueryList/media
+tags:
+ - API
+ - CSSOM View
+ - Media
+ - Media Queries
+ - MediaQueryList
+ - Property
+ - Reference
+ - プロパティ
+ - メディア
+ - メディアクエリー
+translation_of: Web/API/MediaQueryList/media
+---
+
+{{APIRef("CSSOM")}}
+
+**`media`** は {{DOMxRef("MediaQueryList")}} インターフェイスの読取専用プロパティであり、 文字列で、シリアライズされたメディアクエリーを表します。
+
+### 値
+
+文字列で、シリアライズされたメディアクエリーを表します。
+
+## 例
+
+この例では、 `(max-width: 600px)` のメディアクエリーを実行し、 `MediaQueryList` の `media` プロパティの結果の値を {{HTMLElement("span")}} の中に表示します。
+
+### JavaScript
+
+```js
+let mql = window.matchMedia('(max-width: 600px)');
+
+document.querySelector(".mq-value").innerText = mql.media;
+```
+
+この JavaScript コードは一致させるメディアクエリーを単に {{DOMxRef("Window.matchMedia", "matchMedia()")}} に渡してコンパイルし、それから `` の {{DOMxRef("HTMLElement.innerText", "innerText")}} に {{DOMxRef("MediaQueryList.media", "media")}} プロパティの結果の値を設定します。
+
+### HTML
+
+```html
+
+```
+
+シンプルな `` は出力を受け取るためのものです。
+
+```css hidden
+.mq-value {
+ font: 18px arial, sans-serif;
+ font-weight: bold;
+ color: #88f;
+ padding: 0.4em;
+ border: 1px solid #dde;
+}
+```
+
+### 結果
+
+{{EmbedLiveSample("Examples", "100%", "60")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [メディアクエリー](/ja/docs/Web/CSS/Media_Queries)
+- [プログラムによるメディアクエリーの評価](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries)
+- {{DOMxRef("window.matchMedia()")}}
+- {{DOMxRef("MediaQueryList")}}
+- {{DOMxRef("MediaQueryListEvent")}}
\ No newline at end of file