【jQuery】resize()でウィンドウのリサイズ時に処理を行う!

ウィンドウのリサイズ時に処理を行うにはjQueryのresize()メソッドを使用します。

jQueryのresize()メソッドとはブラウザのウィンドウサイズをマウスで変更した時に特定の処理を実行することができるメソッドであり、スマホ画面やPC画面などの画面のサイズが変わった際の処理を実装する際に使用することができます。

今回は、jQueryのresize()メソッドを使ってウィンドウのリサイズ時に処理を行う方法について以下の内容で解説していきます。

⚫︎ ウィンドウがリサイズされた時に処理を行う場合
⚫︎ ウィンドウがリサイズされた時に高さと幅を表示する場合
⚫︎ ウィンドウのリサイズ時に条件を設定する場合

ハルトさん

今回はjQueryのresize()メソッドでウィンドウのリサイズ時に処理を行う方法について説明していきます。

さとみさん

お願いします!

resize()とは

resize()とは、ブラウザのウィンドウサイズをマウスで変更した時に特定の処理を実行することができるメソッドとなります。

resize()の書き方

resize()メソッドの書き方は下記となります。

$の()にwindowを指定し、resize()の引数に関数を指定することで、ブラウザのウィンドウサイズをマウスで変更した時に特定の処理を行うことができます。

また、$の()はwindowを指定するようにしてください。

ウィンドウがリサイズされた時に処理を行うサンプルコード

ウィンドウがリサイズされた時に処理を行うサンプルコードを紹介します。

sample.html

index.js

出力結果

resize()メソッドの引数に関数を指定することでウィンドウがリサイズされた時に処理を行います。
そのため、ウィンドウを変更すると現在時刻がミリ秒で表示されています。

ウィンドウがリサイズされた時に高さと幅を表示する場合

ウィンドウがリサイズされた時に高さと幅を表示する場合は、resize()メソッドの関数にwidth()メソッドとheight()メソッドを使用します。

sample.html

index.js

出力結果

resize()メソッドの関数にwidth()やheight()を使用することでウィンドウがリサイズされた時に高さと幅を取得します。
そのため、ウィンドウを変更するとウィンドウの高さや幅がリサイズすることで表示されています。

ウィンドウのリサイズ時に条件を設定する場合

ウィンドウのリサイズ時に条件を設定する場合はresize()メソッドの関数でif文などの条件文を使用します。

sample.html

index.js

出力結果

resize()メソッドの関数に条件文を使用することでウィンドウのリサイズ時に条件を設定しています。
そのため、ウィンドウの幅が700px以下の場合と700pxより大きい場合でh2タグの背景色が変化します。

さとみさん

resize()を使用することで、ウィンドウのリサイズ時に処理を行うことができるのですね!

ハルトさん

そうです。
resize()を使用するとウィンドウのサイズに合わせて処理を行うことができます。
後えば、PCの画面で行う処理をスマホの画面では行うことができないように画面の大きさによって処理を変えたい場合にもresize()を使用します。

今回のポイント

resize()メソッドでウィンドウのリサイズ時に処理を行う

⚫︎ ウィンドウのリサイズ時に処理を行うにはjQueryのresize()メソッドを使用する

⚫︎ ウィンドウのリサイズ時に処理を行う場合はresize()の引数に処理を行う関数を指定する

⚫︎ resize()メソッドの前mにある$の()はwindowを指定する

⚫︎ resize()メソッドの指定する関数内にwidth()メソッドとheight()メソッドを使用することで、ウィンドウがリサイズされた時に高さと幅を表示することができる

⚫︎ ウィンドウのリサイズ時に条件を設定する場合はresizeメソッドの関数にif文などのような条件文を使用する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し