コーディングメソドロジー

第108回 メディアクエリをJavaScriptでも使いこなす

近年、様々なサイズのスマートフォンやタブレットのデバイスが増えたことによって、デスクトップデバイスでも高解像度の画像が必要な場合があり、HTMLでのメディアクエリも重要になっています。
HTML5.1から追加された<picture>タグはメディアクエリが使えるようになりました。<picture>タグの子要素である<source>要素に、表示したい画像とメディアクエリを設定するとCSSのメディアクエリと同じく画像の変更ができます。JavaScriptでも同じく、デバイスに合わせて制御や処理することが増えています。
今回はCSSでよく使われているメディアクエリをmatchMediaというメソッドを組み合わせてJavaScriptで使う方法を紹介します。

matchMedia の基本的な使い方

matchMedia の基本的な使い方

matchMediaはIE10から最新ブラウザまで対応しています。コード①はmatchMediaの記述例です。

このコードはもしウィンドウ幅がmin-width:400px以上にマッチしたら、Aの処理をする。400px以下のときはBの処理をするという意味になります。これが基本的なmatchMediaの使い方です。

ただ、この記述は一番はじめにページをロードしたときだけ実行されますので、ウィンドウ幅が変更された場合は実行されず、ページの再読込が必要になります。では、設定したメディアクエリの時にある処理を実行したい場合はどうしたらいいでしょうか。

matchMediaをウィンドウの可変に対応させる方法
matchMedia をウィンドウの可変に対応させる方法
matchMedia をウィンドウの可変に対応させる方法

メディアクエリを使わずにコード②のようにresizeイベントを使ってウィンドウ幅の変化に対し処理を実行する方法があります。
しかしウィンドウ幅の変化に敏感に反応するので、少しでもウィンドウ幅が変化すると、毎回処理が実行されます。そのため、ページに必要ではない負荷をかけるので、ページのパフォーマンスとしてもよくないでしょう。

コード③はmatchMediaをウィンドウの可変に対応させる場合の記述例です。①のコードではif文だけ使ってウィンドウ幅を判定するだけでしたが、③のコードではaddListenerという関数でコールバック関数を追加しています。これでresizeイベントは違ってメディアクエリで設定したウィンドウ幅の時だけ処理が実行されます。

実際の制作では「PCでは豪華なアニメーションで、スマートフォンのときは静止画にしたい」「PCのグローバルナビをスマートフォンではドロップダウンメニューにしたい」など、CSSでは実装できない変更の場合はJavaScriptのメディアクエリを使って処理を切り替えています。しかし、メンバーとのルールを決めずに使用すると不具合が発生した場合、原因を探すことが難しく、メンテナンスも大変になります。
特にJavaScriptでページのスタイリングをしてしまうと、実装された処理がCSSなのかJavaScriptなのかすぐに判断することが難しくなります。基本的にページのスタイルはCSSでの実装が望ましいですが、JavaScriptでの実装が必要な場合はそれを明確にする必要があります。他の人が見て分かりやすくコメントを書いたり、ドキュメントを書くこともよい方法です。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム