CSS メディアクエリ vs JavaScript & jQuery：スクリーン幅判定のベストプラクティス

2024-05-02

JavaScriptと jQuery を使って、スクリーン幅が 960px 未満の場合に何かを実行する方法を説明します。

方法 1: window.innerWidth を使用する

この方法は、JavaScript の window.innerWidth プロパティを使用して、現在のウィンドウ幅を取得します。その後、960 と比較して、条件に応じて処理を実行します。

if (window.innerWidth < 960) {
  // スクリーン幅が 960px 未満の場合の処理
  console.log("スクリーン幅が 960px 未満です。");
} else {
  // スクリーン幅が 960px 以上の場合の処理
  console.log("スクリーン幅が 960px以上です。");
}

$(window).width(function(event) {
  var width = event.target.innerWidth;
  if (width < 960) {
    // スクリーン幅が 960px 未満の場合の処理
    console.log("スクリーン幅が 960px 未満です。");
  } else {
    // スクリーン幅が 960px 以上の場合の処理
    console.log("スクリーン幅が 960px以上です。");
  }
});

方法 3: メディアクエリを使用する

この方法は、CSS のメディアクエリを使用して、スクリーン幅に応じてスタイルを適用します。JavaScript を使用する必要はありませんが、スクリーン幅が 960px 未満の場合にのみ何かを実行したい場合は、この方法が最適です。

@media only screen and (max-width: 959px) {
  /* スクリーン幅が 960px 未満の場合のスタイル */
  body {
    font-size: 14px;
  }
}

補足

上記の例では、console.log() を使用してスクリーン幅を出力しています。実際には、この部分を、メニューの表示/非表示を切り替えたり、レスポンシブなレイアウトを適用したりするなど、必要な処理に置き換えることができます。
メディアクエリを使用する場合は、JavaScript を使用する必要はありませんが、JavaScript でより動的な処理を実行する必要がある場合は、方法 1 または 2 を使用することができます。

これらの方法を参考に、スクリーン幅に応じて必要な処理を実行してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スクリーン幅判定</title>
  <style>
    #menu {
      width: 200px;
      height: 50px;
      background-color: #ccc;
      display: block;
    }

    @media only screen and (max-width: 959px) {
      #menu {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div id="menu">メニュー</div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      if ($(window).width() < 960) {
        $("#menu").hide();
      } else {
        $("#menu").show();
      }

      $(window).resize(function() {
        if ($(window).width() < 960) {
          $("#menu").hide();
        } else {
          $("#menu").show();
        }
      });
    });
  </script>
</body>
</html>

説明

HTML コードでは、id="menu" という ID を持つメニュー要素を作成します。
CSS コードでは、メニューのスタイルを定義します。初期状態では display: block で表示されていますが、メディアクエリにより、スクリーン幅が 960px 未満の場合は display: none で非表示になります。
JavaScript コードでは、jQuery を使用して、ページが読み込まれたときとウィンドウのサイズが変更されたときに、メニューの表示/非表示を切り替えます。

このサンプルコードは、基本的な例です。実際の開発では、必要に応じてスタイルや JavaScript コードを変更する必要があります。