JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでメディアクエリを使う方法｜window.matchMediaの基本と実装例

JavaScriptでメディアクエリを扱うには、window.matchMedia()メソッドを使用します。CSSだけでは実現できない「画面幅に応じたJavaScriptの動的な処理」を行いたい場合に非常に便利です。

基本的な仕組み

window.matchMedia()に、CSSと同じ書式のメディアクエリ文字列を渡すと、MediaQueryListオブジェクトが返されます。このオブジェクトのmatchesプロパティがtrueであれば、現在の画面がその条件に一致していることを意味します。

サンプルコード

次の例では、画面幅が700px以下かどうかを判定し、背景色を「赤」または「青」に切り替えています。ブラウザのウィンドウサイズを変更すると、色がリアルタイムに変化するのが分かります。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: white;
        padding: 20px;
    }
</style>
</head>
<body>
<h1>JavaScriptでメディアクエリを使用する例</h1>
<h2>画面サイズを変更すると、色が青から赤に変わります</h2>
<script>
    // 最大幅700pxのメディアクエリを作成
    var mediaQuery = window.matchMedia("(max-width: 700px)");

    // 条件に応じて背景色を設定する関数
    function setColor(e) {
        if (e.matches) {
            document.body.style.backgroundColor = "red";
        } else {
            document.body.style.backgroundColor = "blue";
        }
    }

    // 初期状態を判定して色を設定
    setColor(mediaQuery);

    // 画面幅の変化を監視してsetColorを実行
    mediaQuery.addEventListener("change", setColor);
</script>
</body>
</html>

実行結果

ウィンドウ幅が700pxより大きい場合、背景色は青で表示されます。

JavaScriptでメディアクエリを使う方法｜window.matchMediaの基本と実装例

ウィンドウ幅を700px以下に縮小すると、背景色が赤へと変化します。

JavaScriptでメディアクエリを使う方法｜window.matchMediaの基本と実装例

ポイント解説

  • window.matchMedia()：CSSと同じ記法のメディアクエリ文字列を受け取り、MediaQueryListオブジェクトを返します。
  • matchesプロパティ：条件に一致していればtrue、一致していなければfalseを返します。
  • addEventListener('change', ...)：メディアクエリの判定結果が切り替わった瞬間に関数を実行できます。旧来のaddListener()は非推奨となっているため、addEventListener()の使用が推奨されます。
  1. JavaScriptとFont Awesomeアイコンでアニメーション効果を作成する方法

    Webページに動きを加えることで、訪問者の視線を引きつけ、UIに彩りを添えることができます。Font Awesomeのようなアイコンフォントと、JavaScriptのタイマー関数である setTimeout() や setInterval() を組み合わせれば、外部ライブラリに頼ることなく、手軽にアイコンのアニメーション効果を実現できます。 仕組みはとてもシンプルです。一定時間ごとにアイコンのUnicode文字を入れ替えることで、アイコンが次々と切り替わって動いているように見せます。 実装のポイント Font AwesomeのCSSファイルをCDNから読み込む アイコンを表示する要素に「fa

  2. CSSメディアクエリで一般的なデバイス別ブレークポイントを設定する方法

    CSSのメディアクエリ（@media）を活用すると、スマートフォン、タブレット、デスクトップPCなど、デバイスごとの画面幅（ブレークポイント）に応じてスタイルを柔軟に切り替えることができます。レスポンシブWebデザインを実現するうえで欠かせないテクニックです。 よく使われる一般的なブレークポイント 多くのWebサイトでは、以下のような画面幅がブレークポイントの目安として採用されています。 600px以下 … スマートフォン 600px〜767px … タブレット（縦向き） 768px〜991px … タブレット（横向き）・小型ノートPC 992px〜1199px … デスクトップPC 120