JavaScript PR

JavaScriptでマスターする！window.openによるカスタムサイズ新ウィンドウの開き方完全ガイド

  /
記事内に商品プロモーションを含む場合があります

今回はJavaScriptのwindow.openメソッドを用いて、ブラウザの新しいウィンドウで指定サイズのページを開く方法についてご紹介します。
これまでに、ページ内にモーダルとしてポップアップを表示する方法「JavaScriptでモーダル表示する方法【プラグイン、jQuery不使用】」を紹介しましたが、今回は少し異なるアプローチを取ります。ページ内では無くブラウザサイズ指定して別ウィンドウでページを開いてみます。

Contents

別ウィンドウでページを開くためのCSSの書き方

まずは、新しいウィンドウを開くためのクリックボタンに適用するCSSから始めましょう。
別ウィンドウを表示させるクリックボタン（.clk）のCSS記述です。
この部分はデザインに関わるので、必要に応じて自由に変更してください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.2em;
}
.clk{
  width: 200px;
  height: 50px;
  margin: 0 auto;
  background-color: #cccccc;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
</style>

HTMLでのボタンの設定

次に、HTMLでクリックボタン（class=”clk”）を設定します。このボタンをクリックするとwopn()関数が呼び出され、新しいウィンドウが開きます。

<h1>以下をクリックすると幅500px、高さ500pxのページが別ウィンドウで開きます。</h1>
<br>

<div class="clk" onclick="wopn()">ここをクリック</div>

JavaScriptでのwindow.openの使用

実際に新しいウィンドウを開くJavaScriptのコードは以下の通りです。ここでは、幅500px、高さ500pxのサイズで「https://dad-union.com/」のページを新しいウィンドウで開きます。「windowname」というパラメータは新しいウィンドウの名前を指定するもので、後でこのウィンドウを操作する際に使用します。

<script type="text/javascript">
function wopn() {
    window.open("https://dad-union.com/", "windowname", "width=500,height=500");
}
</script>

【window.open】ブラウザサイズ指定して別ウィンドウのページを開くデモページ

実際にこの機能を試せるデモページも用意しました。是非試してみてください。

【window.open】ブラウザサイズ指定して別ウィンドウのページを開くデモ

まとめ

この記事では、JavaScriptのwindow.openメソッドを使って新しいウィンドウで特定のサイズのページを開く方法をご紹介しました。コーディング初心者から上級者まで、幅広く役立つテクニックだと思います。この方法を活用して、ユーザーに異なる体験を提供することができます。何か疑問点があれば、ぜひコメントで質問してください。次回も役立つ情報をお届けする予定ですので、お楽しみに！

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

別ウィンドウ window.open
RELATED POST