現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

ウィンドウ

【JavaScript入門】window.resizeTo・resizeByの使い方|ウィンドウサイズを絶対・相対で変更する方法を解説

投稿日:2019年5月10日 更新日:

JavaScriptのwindow.resizeTo・resizeByとは?ウィンドウサイズを変更する方法を初心者向けに解説

window.resizeTo()window.resizeBy() は、ブラウザウィンドウのサイズを変更するためのメソッドです。
指定した幅・高さに変更したり、現在のサイズから相対的に変更したりできます。



window.resizeToとは?(絶対サイズに変更)

window.resizeTo(width, height) は、ウィンドウのサイズを指定した幅・高さに変更します。

window.resizeTo(幅px, 高さpx);
  • 幅(px):ウィンドウの横幅
  • 高さ(px):ウィンドウの高さ

ブラウザによっては、ツールバーや枠のサイズを含むかどうかが異なるため、
実際の表示領域が完全に一致しない場合があります。

使用例:指定サイズに変更

subWin.resizeTo(400, 400);

→ ウィンドウ subWin を幅400px、高さ400pxに変更します。



window.resizeByとは?(相対的にサイズ変更)

window.resizeBy(dx, dy) は、現在のウィンドウサイズに対して指定した分だけサイズを増減させます。

window.resizeBy(幅の増減px, 高さの増減px);
  • 正の値:サイズを大きくする
  • 負の値:サイズを小さくする

使用例:現在のサイズから変更

window.resizeBy(50, 100);

→ 現在のウィンドウを横に50px、縦に100px大きくします。

注意点

  • ブラウザの設定により、ウィンドウサイズ変更が制限される場合がある
  • ユーザー操作を妨げないよう、過度なサイズ変更は避けるべき
  • ポップアップウィンドウでの利用が一般的



まとめ

  • resizeTo():指定した絶対サイズに変更
  • resizeBy():現在のサイズから相対的に変更
  • サイズはピクセル単位で指定する
  • ブラウザによって動作が制限される場合がある

関連リンク

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。
レンタルサーバー エックスサーバー

-ウィンドウ
-

執筆者:

関連記事

【JavaScript入門】pageXOffset・pageYOffsetとは?現在のスクロール位置を取得・設定する方法を解説

JavaScriptのpageXOffset・pageYOffsetとは?現在のスクロール位置を取得・設定する方法を解説 pageXOffset と pageYOffset は、ページがどれだけスクロ …

【JavaScript入門】window.scrollToの使い方|指定位置へスクロールする方法を初心者向けに解説

JavaScriptのwindow.scrollToとは?指定位置へスクロールする方法を初心者向けに解説 window.scrollTo() は、ページを指定した座標位置までスクロールさせるためのメソ …

【JavaScript入門】status・defaultStatusとは?ステータスバーの文字列を設定する方法と注意点を解説

JavaScriptのstatus・defaultStatusとは?ステータスバーの文字列を参照・設定する方法を解説 window.status と window.defaultStatus は、ブラ …

【JavaScript入門】window.closeの使い方|ウィンドウを閉じる方法と注意点を初心者向けに解説

JavaScriptのwindow.closeとは?ウィンドウを閉じる方法と注意点を初心者向けに解説 window.close() は、指定したウィンドウ、または自分自身のウィンドウを閉じるためのメソ …

【JavaScript入門】back・forward・home・print・stop・findの使い方|ブラウザ操作メソッドをわかりやすく解説

JavaScriptのback・forward・home・print・stop・findとは?ブラウザ操作メソッドを初心者向けに解説 JavaScript には、ブラウザの「戻る」「進む」「印刷」など …