• HOME > 
  • JavaScript > 
  • jQueryのレスポンシブ対応の方法【ウィンドウサイズごとに...

jQueryのレスポンシブ対応の方法【ウィンドウサイズごとに切り替える】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

ウィンドウサイズごとに処理を切り替えるには?

WEBサイトはPCやタブレット・スマートフォンなどさまざまなデバイスで閲覧できる状況にあります。

CSSによるデザイン面もどのようなウィンドウサイズでも最適に見えるようなレスポンシブ化が必須とされていますが、jQueryによる処理においてもPCとスマホとでは見え方や操作性が大きく異なりますのでウィンドウサイズに応じた処理の切替が必要です。

CSSはメディアクエリを用いて、PCとスマホのようにウィンドウサイズごとに異なるデザインを作成します。

一方、jQueryの場合は条件分岐を作成して、ウィンドウサイズに応じて実行する処理の切り替えを行います。

条件分岐の作り方

「Aが○○の時はXXを行い、Aが△△の時は□□を行う」というような特定の条件を満たすか満たさないかで処理を分けることを条件分岐と呼びます。

条件分岐はif文を用いて下記のように記述して作成します。ウィンドウサイズ以外でも様々な条件を設定して処理を分岐させる時に利用します。

if文の書き方

レスポンシブ対応を行うには、このif文を用いてウィンドウサイズごとの条件分岐を作り処理を分けます。以下の2通りの方法でサイズ指定し条件を設定します。

  • matchMediaメソッドを使う方法
  • widthメソッドやheightメソッドで取得したサイズを使う方法

それぞれの使い方について説明していきます。

matchMediaメソッドを使う方法

matchMediaメソッドを使えば、CSSのメディアクエリと同じような感覚でウィンドウサイズごとに処理を分けることができます。

下記のように記述して使います。サイズの指定もメディアクエリと同様に「max-width」「max-height」「min-width」「min-height」を使います。

window.matchMediaの書き方

次の例では、ウィンドウサイズに応じてテキストが切り替わります。

HTML

<div id="nowW" class="test">現在のウィンドウ幅:<span></span>px</div>
<div id="nowH" class="test">現在のウィンドウ高さ:<span></span>px</div>
<div id="test1" class="test">matchMediaによる分岐:「<span></span>」</div>

jQuery

$(window).on("load resize",function(){
    var ww = $(window).width();
    var wh = $(window).height();
    $("#nowW span").text(ww);
    $("#nowh span").text(wh);
    if(window.matchMedia("(max-width:600px)").matches){
        $("#test1 span").text("スマホサイズです。");
    }else if(window.matchMedia("(max-width:900px)").matches){
        $("#test1 span").text("タブレットサイズです。");
    }else{
        $("#test1 span").text("PCサイズです。");
    }
});//end load resize

プレビュー

リサイズにも対応する

PCで閲覧している場合はユーザーがブラウザのウィンドウサイズを変更することがあります。

読み込んだ時にウィンドウサイズを取得されるため、サイズ変更が行われた場合には処理が実行されません。

先程の例では、あらかじめリサイズにも対応するようにしてあります。

リサイズイベントの書き方

width()やheight()で取得したサイズを使う方法

matchMediaメソッドと比べると少し手順が増えますが、width()メソッドやheight()メソッドでウィンドウのサイズを取得し、比較演算子を使って条件分岐を作成する方法です。

widthを使った書き方

HTML

<div id="nowW" class="test">現在のウィンドウ幅:<span></span>px</div>
<div id="nowH" class="test">現在のウィンドウ高さ:<span></span>px</div>
<div id="test1" class="test">width()による分岐:「<span></span>」</div>

jQuery

$(window).on("load resize",function(){
    var ww = $(window).width();
    var wh = $(window).height();
    $("#nowW span").text(ww);
    $("#nowh span").text(wh);

    if(ww < 600){
        $("#test2 span").text("スマホサイズです。");
    }else if(ww < 900){
        $("#test2 span").text("タブレットサイズです。");
    }else{
        $("#test2 span").text("PCサイズです。");
    }
});

プレビュー

まとめ

matchMediaメソッドを使えばjQueryのレスポンシブ対応はとても簡単です。CSSの分岐だけでは対応しきれないような画面サイズに応じた処理もjQueryによって対応することが可能です。分岐の条件の指定方法によって細かな切替も実現できます。

リンク先のサムネイル
CSSのメディアクエリの使い方

画面サイズに応じたスタイルの変更を実現するには、CSSに「メディアクエリ」と呼ばれる記述を使用します。メディアクエリを使って、画面サイズが●●px以上(または以下)の場合のスタイルをそれぞれ分けて指定することでレスポンシブデザインを作ることができます...【もっと読む】

広告
広告

関連する記事

サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。
サムネイル

JSで特定の位置までスクロールされたら要素を固定する方法【s……

2024年04月12日
CSSのstickyのような動きをJSで実装する JavaScriptを使って、「ある要素がページ上部に当たるまでスクロールされたら、その位置でその要素を固定表 […]
サムネイル

JSで日付を表示するならtoLocaleDateString……

2024年03月15日
toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます
サムネイル

JSで自動かな入力補完を実装できるライブラリ【jquery.……

2024年03月15日
jquery.autokana.jsは入力された日本語テキストのふりがな(フリガナ)を自動的に別の欄に入力してくれるJQueryのライブラリです。
サムネイル

JSでページ離脱時にメッセージを出す方法【beforeunl……

2024年03月15日
JavaScriptのイベントであるbeforeunloadを使えばページを離脱する前にメッセージを出して注意を促すことができます。
サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]