sugulogの日記

JavaScript、matchMedia!画面サイズに応じて処理を実行しよう!!

スポンサードリンク

f:id:sugulog:20210530225517p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptのmatchMediaいうことで

  •  画面サイズに応じての処理

について簡単に解説します!!

その為このブログを読むことで、matchMediaについて理解が深まるのはもちろん、matchMediaを使用した画面サイズに応じの処理を実装できるようになります。

是非最後までご愛読ください。

 

今回は、

  • matchMedia()

  • 画面サイズに応じて処理を実行しよう

の順で解説していきます。

では早速、みていきましょう!!

・matchMedia()

引数に応じたメディアクエリ(画面環境に応じて適用するスタイルを切り替える機能)の情報を返す。

f:id:sugulog:20210527225509p:plain

今回はメディアクエリの情報として「ウインドウサイズが400px以上」を引数で指定しました。

するとMediaQueryList(オブジェクト)として以下のような情報を返してくれます。

f:id:sugulog:20210527225516p:plain

またその中の「matches」は現在の状況がメディアクエリに一致するか(今回の場合はウインドウサイズが400px以上)かどうかを真偽値で表しており、以下のように続けて指定することで情報を取得することができます。

f:id:sugulog:20210527231539p:plain

f:id:sugulog:20210527231621p:plain 

では次にmatchMedia()を使用して画面サイズに応じて処理を実行してみましょう。

・画面サイズに応じて処理を実行しよう

今回は画面サイズが500px以上は背景が青、それ以下は赤という形で画面サイズに応じて処理を実行させていきます。

まずはCSSを記述します。

f:id:sugulog:20210530213458p:plain

今回はbody要素自体にCSSを設定しています。

次にJavaScriptに記述していきます。

f:id:sugulog:20210530223403p:plain
まずは要素を取得し、メディアクエリを設定しています。

そしてメディアクエリに対しaddListenerを実行することでイベントとして追加し、メディアクエリが変更されるたびに引数に指定した関数を実行することができます。

その関数ではメディアクエリのmatchesがtrue、falseかによって、クラスを追加、削除を行い背景色を変更しています。

また今まではメディアクエリが変更された時のみの記述です。

そのため初期表示時にも画面サイズによる処理判定を行いため、最後に関数を呼び出しています。

では実際に見てみましょう。

f:id:sugulog:20210530224029g:plain

画面サイズが500pxを境に青と赤に変更されているのが確認できますね。

addListenerを使いイベントとして追加したことで画面サイズを監視し処理を行なっているのがポイントですね!!

 

以上、今回のブログでした。

matchMediaについて理解が深まり、matchMediaを使用した画面サイズに応じての処理を実装できるようになりましたか??

matchMediaを使うことでより画面サイズに応じた実装が可能になりますね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!