From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/mediaquerylist/index.html | 118 +++++++++++++++++++++ files/ja/web/api/mediaquerylist/matches/index.html | 90 ++++++++++++++++ files/ja/web/api/mediaquerylist/media/index.html | 98 +++++++++++++++++ .../ja/web/api/mediaquerylist/onchange/index.html | 74 +++++++++++++ 4 files changed, 380 insertions(+) create mode 100644 files/ja/web/api/mediaquerylist/index.html create mode 100644 files/ja/web/api/mediaquerylist/matches/index.html create mode 100644 files/ja/web/api/mediaquerylist/media/index.html create mode 100644 files/ja/web/api/mediaquerylist/onchange/index.html (limited to 'files/ja/web/api/mediaquerylist') 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 +--- +

{{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);
+ +
+

注: この例は GitHub にあります (ソースコードを参照、およびライブで実行)。

+
+ +

他の例は個別のプロパティやメソッドのページにあります。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}}{{Spec2("CSSOM View")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.MediaQueryList")}}

+ +

関連情報

+ + 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 +--- +

{{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")}}

+ +

関連情報

+ + 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 +--- +

{{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> は出力を受け取るためのものです。

+ + + +

結果

+ +

{{EmbedLiveSample("Examples", "100%", "60")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM View", "#dom-mediaquerylist-media", "media")}}{{Spec2("CSSOM View")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.MediaQueryList.media")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef("CSSOM")}}

+ +

onchange は {{DOMxRef("MediaQueryList")}} インターフェイスのプロパティで、 {{domxref("MediaQueryList/change_event", "change")}} イベントが発行されたとき、すなわちメディアクエリの対応の状態が変化したときに呼び出される関数を表します。イベントオブジェクトは {{DOMxRef("MediaQueryListEvent")}} のインスタンスであり、古いブラウザーからは後方互換性のために MediaListQuery のインスタンスと解釈されます。

+ +

構文

+ +
MediaQueryList.onchange = function() { ... };
+ +

例

+ +
var mql = window.matchMedia('(max-width: 600px)');
+
+mql.addEventListener( "change", (e) => {
+    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.')
+  }
+})
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM View", "#dom-mediaquerylist-onchange", "onchange")}}{{Spec2("CSSOM View")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.MediaQueryList.onchange")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf