
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.10.10
jQuery の resize メソッドを使うと、画面のサイズが変わった際の処理を実装することができます。
今回は、jQuery の resize メソッドの使用方法について紹介します。
1.resize メソッド
2.画面をリサイズした際の処理
3.ロード時とリサイズ時の処理
resize メソッドは、画面のリサイズを行った際にイベントを発生させるメソッドです。
resize メソッドは、引数によって 3 通りの記述方法があります。
$(セレクタ).resize( );
$(セレクタ).resize( handler( eventObject ) );
$(セレクタ).resize( [ eventData ], handler( eventObject ) );
引数なしの「 .resize( ) 」は、「 .trigger(“resize”) 」の省略形です。
(trigger メソッドの使用方法についてはjQuery【 trigger 】手動でイベントを発生させる trigger メソッドをご参照下さい。)
また、「 .resize( handler( eventObject ) ) 」及び「 .resize( [ eventData ], handler( eventObject ) ) 」は、「 on( “resize”, handler ) 」の省略形です。
(on メソッドの使用方法についてはjQuery【 on 】on メソッドの使い方をご参照下さい。)
resize メソッドの引数の内容は、それぞれ以下の通りです。
.resize( handler( eventObject ) )
handler( eventObject ) リサイズ時に実行する処理を関数として指定
.resize( [ eventData ], handler( eventObject ) )
[ eventData ] イベントハンドラに渡すデータをマップ値で指定 handler( eventObject ) リサイズ時に実行する処理を関数として指定
resize メソッドを使用して、画面をリサイズした際の処理を実装します。
このページのウィンドウサイズを色々と変えてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $(window).resize(function() { $("#out1").html($(window).height()); $("#out2").html($(window).width()); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> 縦(px): <span id="out1"></span> 横(px): <span id="out2"></span> </div>
「 $(window).height() 」及び「 $(window).width() 」でブラウザの縦幅と横幅のサイズが取得できます。
リサイズ時と共に 画面を読み込んだ際にもイベントを発生させる場合は、次のようなソースコードになります。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $(window).on("load resize", function() { $("#out3").html($(window).height()); $("#out4").html($(window).width()); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> 縦(px): <span id="out3"></span> 横(px): <span id="out4"></span> </div>
「 $(window).on(“load resize”, function() {…}); 」のように、load メソッドと resize メソッドの両方を記述すると、リサイズ時と共にページが読み込まれた際のサイズも表示されます。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.