TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのリンクで別ウィンドウを開く方法を現役エンジニアが解説【初心者向け】
HTML

HTMLのリンクで別ウィンドウを開く方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLのリンクで別ウィンドウを開く方法について解説しています。リンクから別のページに移動するときの仕組みと、別ウィンドウでリンクを開くときの書き方について実際に書きながら学びましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLのリンクで別ウィンドウを開く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

目次

本記事は、テックアカデミーのWebデザインコースのカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

リンクで別ウィンドウを開く方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

別ウィンドウとは

ブラウザは複数のウィンドウを立ち上げることが可能で、別ウィンドウとは、現在Webサイトを開いているウィンドウとは別のウィンドウのことを指します。

通常のリンクでは、同じウインドウ内でページを移動します。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

HTMLのリンクで別ウィンドウを開く方法

HTMLでは、別ウィンドウを立ち上げることができません。

代替案として、同じウィンドウの別タブでページを開くことができます。

外部リンク（現在閲覧しているWebサイトとは別のサイトを参照する）の場合や、お問い合わせなどの入力フォームで、「プライバシーポリシー」のページを表示する際など、現在のページをキープしながら別のページを見せたいときに、別タブで開く方法が用いられていることが多いです。

どうしても別タブではなく、別ウィンドウでWebサイトを開きたい場合には、JavaScriptで新規ウィンドウを開く方法を現役エンジニアが解説【初心者向け】の記事を参考にしてください。

 

ブラウザの別タブ

別タブ（GoogleChrome）

 

ブラウザの別ウインドウ

別ウィンドウ（GoogleChrome）

 

別タブでページを開きたい場合にも、通常のリンクと同様に<a>タグを使用します。

TechAcademyマガジンのトップページに移動するリンクを配置したい場合、HTMLは以下のように書きます。

<a href="https://techacademy.jp/magazine/">TechAcademyMagazine</a>

 

 

別タブでページを開く場合には、<a> タグに target=”_blank” を追加して、以下のように書きます。

<a href="https://techacademy.jp/magazine/" target="_blank">TechAcademyMagazine</a>

 

 

ただし、別タブで外部ページを開く場合には注意が必要です。

別タブで開いたWebサイト上に悪意のあるプログラムが書かれていた場合に、元のタブのWebサイトにアクセスされて別の悪意のあるWebサイトに移動されてしまう可能性があります。

これを回避するための方法として、target=”_blank”を使用する際には<a>タグにさらに、rel=”noopener” または rel=”noreferrer” を追加し、以下のように書くとよいです。

<a href="https://techacademy.jp/magazine/" target="_blank" rel="noopener">TechAcademyMagazine</a>
<a href="https://techacademy.jp/magazine/" target="_blank" rel="norefferrer">TechAcademyMagazine</a>

 

 

こうすることで、別タブで開いたWebサイトに万が一、悪意のあるプログラムが書かれていても安心です。

rel="noopener" や rel="noreferrer" はあってもなくても動作に変わりはありません。

IE11では rel="noopener"が非対応（2021/2/10）ですので、rel="noopener noreferrer" としておくとよいでしょう。

参考：https://web.dev/external-anchors-use-rel-noopener/

実際に書いてみよう

テックアカデミー マガジンのWebサイトをそのままのタブで開くリンクと、別タブで開くリンクを書いてみます。

通常のリンク（同じタブでページを移動）

<a href="https://techacademy.jp/magazine/">TechAcademyMagazine</a>

実際のリンク > TechAcademyMagazine

別タブで開くリンク

<a href="https://techacademy.jp/magazine/" target="_blank" rel="noopener noreferrer">TechAcademyMagazine（別タブで開きます）</a>

実際のリンク > TechAcademyMagazine

 

執筆してくれたメンター

メンター稲員さん

フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。おうち大好きマンです。

 

大石ゆかり

内容わかりやすくて良かったです！

田島悠介

ゆかりちゃんもわからないことがあったら質問してね！

大石ゆかり

わかりました。ありがとうございます！

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

記事を検索

関連するキーワード

関連する記事

HTMLで画像やテキストの回り込みを指定する方法を現役デザイナーが解説【初心者向け】

HTMLで画像やテキストの回り込みを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでtableタグを使わないで段組レイアウトする方法を現役エンジニアが解説【初心者向け】

HTMLでtableタグを使わないで段組レイアウトする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
HTML

入門から応用まで！HTMLの学習に役立つリファレンスサイト10選

HTMLで作りたい機能があるのに方法がわからない時、大きな味方になってくれるのが、リファレンスサイトです。 今回はそんなHTMLのリファレンスサイトを10...
HTML

HTMLで右寄せ・中央寄せ・左寄せをする方法【初心者向け】現役エンジニアが解説

この記事では、Webページ制作の際に、要素の右寄せ・中央寄せ・左寄せを実現するHTML/CSSの記述方法をみていきます。 以下のような悩みや疑問を持ってい...
HTML

HTMLでpre要素を使って折返し改行する方法を現役エンジニアが解説【初心者向け】

HTMLでpre要素を使って折返し改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでformを使って送信フォームを作成する方法【初心者向け】

最近HTMLを勉強し始めた方は、HTMLは文字や画像を表示するだけの言語と思っておられる方がいらっしゃるかもしれません。HTMLは文字や画像以外にも、簡単なフォ...
HTML

あわせてよく読まれている記事

HTMLをリンクして新しいウィンドウで開く方法を現役エンジニアが解説【初心者向け】

HTMLをリンクして新しいウィンドウで開く方法について解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLをリンクして新しいウィンドウで開く方法について詳しく説明していくね！ 大石ゆかり お願いします！   リンクタグとは リンクタグは、ブラウザの画面を閲覧中のHTML文書(Webサイト)から他のHTML文書に移動させるものです。ブラウザで閲覧中の画面の内容が変更されることから、「ページ(画面)遷移」とも呼ばれています。 そして、「ページ遷移」を実現するための代表的な手法として、「リンクタグ」(aタグ)があります。そして、aタグとタグに付随する属性(href)を記述し実装します。以下がリンクタグを用いるコードの例となります。 HTML <a href="https://techacademy.jp">テックアカデミー</a> テックアカデミー 属性の使い方と新しいウィンドウで開く方法 aタグに付随する属性は、約10種類以上もあるものの、おもに使用するのは2種類のみです。「リンクタグ」の説明でもふれたhref属性、その「ページ遷移」を実現するための対象を定めるtarget属性です。この他の属性は、ブラウザの種類によっては、挙動として不安定な動作があるため、細かく知らなくても問題ありません。 以下のコードは新しいウィンドウを開くためのコードの例となります。 HTML <a href="https://techacademy.jp">テックアカデミー｜同一の画面</a> <a href="https://techacademy.jp" target="_blank">テックアカデミー｜新しいウィンドウ(タブ)</a> テックアカデミー｜同一の画面 テックアカデミー｜新しいウィンドウ(タブ) 同一の画面の方は新規のタブを開くことなく、そのままリンク先に移動します。 対して、新しいウィンドウ(タブ)の方はtarget属性の値として_blankを設定しているため、href属性の値として指定されたURL(リンク先)がブラウザの新しいタブで表示されます。 また、余談として、新しいタブが作られる場合に、タブの機能がなかった古いブラウザでは、リンク先が文字どおり「新しいウィンドウ」と表示されていました。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中新しいウィンドウで開く場面 同じドメインのWebサイトから、他のドメインのWebサイトを表示させる場合では、「新しいウィンドウ（タブ）」が活用されています。また、閲覧中のWebサイトからユーザーを離脱させたくないなどの理由がある場合は、「新しいウィンドウ（タブ）」で表示させる方法がよく選ばれています。   監修してくれたメンター 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり HTMLをリンクして新しいウィンドウで開く方法がよくわかりました！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

JavaScriptで新規ウィンドウを開く方法を現役エンジニアが解説【初心者向け】

JavaScriptで新規ウィンドウを開く方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで新規ウィンドウを開く方法について詳しく説明していくね！ 大石ゆかり お願いします！   新規ウィンドウのしくみ 新規ウィンドウは、指定されたURLのリソースを別のタブや別のウィンドウに読み込むことで開かれます。 JavaScriptで新規ウィンドウを開く場合は、URLを引数に渡すことでそのURLのリソースを、新しいウィンドウに読み込んで表示するということが行われます。 JavaScriptで新規ウィンドウを開く方法 JavaScriptで新規ウィンドウを開く場合は、window.open()を使用することが可能です。window.open()は以下のように使用します。 window(url,ウィンドウの名前,オプション)   第1引数のurlには、新規ウィンドウに読み込ませるurlを指定します。 第2引数には、ウィンドウの名前を指定します。任意の名前を指定できます。 第3引数では、ウィンドウの大きさや出現する位置といったオプションを指定します。 以上が使い方です。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう それでは実際にwindow.openを使用して、google.comを開いてみましょう。 第1引数には、googleのトップであるhttps://www.google.comを指定します。また今回はウィンドウの大きさも指定してみます。高さ300幅300のウィンドウを作成します。 var mywindow = window.open("https://www.google.com","mywindow","width=300,height=300") またcloseメソッドを呼び出すことでウィンドウを閉じることもできます。 mywindow.close() 以上で解説を終わります。 筆者プロフィール メンター金成さん。 2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。 現在も、開発案件に携わりながら、日々勉強中。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptでリンク先を新しいタブで開く方法を現役エンジニアが解説【初心者向け】

JavaScriptでリンク先を新しいタブで開く方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでリンク先を新しいタブで開く方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptでリンク先を新しいタブで開く方法 JavaScriptで新しい画面で指定したリンク先に移動する方法を紹介します。Windowオブジェクトの”open”メソッドを利用し、新しい画面を開くと同時にページ遷移を行います。 “open”メソッドは新しい画面を開くメソッドです。第一引数に遷移したいURL(パス)を指定し、第二引数には、Window名を指定します。第三引数にはオプションを指定します。また、第三引数を省略するとブラウザーによっては、新しいTABを開くことになります。 Point：引数は全て、ダブルコーテーションで囲む必要があります。 オプション内容を下記に示します。 top：画面上からの位置を数値で指定します left：画面左からの位置を数値で指定します width：ウィンドウの幅を数値で指定します height：ウィンドウの高さを数値で指定します menubar：メニューバーの有無をyes、noで指定します toolbar ツールバーの有無をyes、noで指定します location アドレスバーの有無をyes、noで指定します resizable ウィンドウのリサイズ可否をyes、noで指定します scrollbars スクロールバーの有無をyes、noで指定します ※ブラウザーによって利用できるオプションが異なる為、一般的に位置指定のオプションを利用します。 実際に書いてみよう では、実際に書いてみましょう <html> <head> <title>javaScriptでリンク先を新しいタブで開く方法 サンプル</title> </head> <body> 新しいタブで開く(※TAB表示できるブラウザーのみ)<br> <button onclick="newtab()">New Tab</button><br> <br> 新しい画面で開く<br> <button onclick="newwindow()">New Window</button><br> <script type="text/javascript"> var window_A,window_b; function newtab() { window_A = window.open("https://www.google.com", "google"); } function newwindow() { window_b = window.open("https://www.google.com", "google", "width=500,height=500"); } </script> </body> </html> 以上で解説を終わります。 シンプルなものですが、利用頻度は多いと思いますので覚えておきましょう。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中筆者プロフィール 小宮山晃史（こみやまこうじ） 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

Pythonでウィンドウを全画面表示にする方法【初心者向け】

Pythonでウィンドウをフルスクリーン表示にする方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonでウィンドウをフルスクリーン表示にする方法について詳しく説明していくね！ 大石ゆかり お願いします！   Tkinterでウィンドウをフルスクリーン表示にする方法 Tkinterでフルスクリーン表示するには、以下のように”-fullscreen”属性を設定します。 Escapeキーでウィンドウを破棄し終了します。   import tkinter as tk root = tk.Tk() root.attributes('-fullscreen', True) root.bind('',lambda e: root.destroy()) root.mainloop()   Seleniumでウィンドウをフルスクリーン表示にする方法（maximize_window()の使い方） Seleniumでフルスクリーン表示するには、以下のようにmaximize_window関数を呼び出します。   import selenium.webdriver driver = selenium.webdriver.Chrome() driver.get('https://techacademy.jp/') driver.maximize_window()   [PR] HTML/CSSで挫折しない学習方法を動画で公開中その他ツールでウィンドウをフルスクリーン表示にする方法 PythonのGUIライブラリでは他にPyQtが有名です。 PyQtでフルスクリーン表示するには、ウィジェットに対し、以下のようにshowFullScreen関数を呼び出します。 Alt+F4キーでウィンドウを閉じ終了します。   from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout app = QApplication([]) window = QWidget() layout = QVBoxLayout() layout.addWidget(QPushButton('Top')) layout.addWidget(QPushButton('Bottom')) window.setLayout(layout) window.showFullScreen() app.exec_()   監修してくれたメンター 橋本紘希 システムインテグレータ企業勤務のシステムエンジニア。 開発実績: Javaプログラムを用いた業務用Webアプリケーションや、基幹システム用バッチアプリケーションなどの設計構築試験。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

JavaScriptでPDFファイルを開く方法を現役エンジニアが解説【初心者向け】

JavaScriptでPDFファイルを開く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PDFファイルを開く方法について詳しく説明していくね！ 大石ゆかり お願いします！   PDFファイルとは PDFファイルとは電子化された書類のことを指します。 単純にワードファイルやエクセルファイルをPDF化できるだけでなく、スキャナされたものもPDFファイルとして扱えるので、その利用法は多岐にわたるといえるでしょう。   JavaScriptでPDFファイルを開く方法 システムによってはJavaScriptでPDFファイルを開く必要があります。 JavaScriptでPDFファイルを開く方法として、 document.location.href = “XXX.pdf” を使用しましょう。 XXXには、PDFの存在する場所とファイル名を記載することで使用できます。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中新規タブでPDFファイルを開く方法 JavaScriptの新規タブでPDFを開く方法は、 window.open( ‘XXX.pdf’ ) といったコードを使用しましょう。 実際に書いてみよう ここでは、実際にコードに記述していきます。 まずは、PDFファイルを開く方法からコードを記述していきます。 PDFファイルはHTMLファイルと同じフォルダ内に配置してみましょう。 <!DOCTYPE html> <html lang = "ja">   <head>     <meta charset = "utf-8">     <title>JavaScript</title>   </head>   <body>     <script>         document.location.href = "こんにちは.pdf";     </script>   </body> </html>  それでは、次に新規タブでPDFを開きます。 <!DOCTYPE html> <html lang = "ja">   <head>     <meta charset = "utf-8">     <title>JavaScript</title>   </head>   <body>     <script>         window.open( 'こんにちは.pdf' );     </script>   </body> </html>   まとめ JavaScriptでPDFファイルを開く方法を現役エンジニアが解説しました。 PDFは電子書類として最も利用されているファイル形式と言っても過言ではありません。 この機会に扱い方をマスターしましょう。   執筆してくれたメンター メンターTK 大学院でVBAを扱う研究を行い、プログラミングの素晴らしさに目覚める。 その後、建設系企業のシステム担当として従事。JavaScriptやPHP、Processingなどに没頭中。   大石ゆかり JavaScriptでPDFファイルを開く方法が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
JavaScript

JavaScriptでウィンドウサイズを固定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでウィンドウサイズを固定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでウィンドウサイズを固定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 ウィンドウサイズとは ウィンドウサイズを固定する方法 実際に書いてみよう まとめ   ウィンドウサイズとは ブラウザに表示されてあるWebページの幅や高さではありません。ウィンドウサイズは、ブラウザの画面の幅と高さです。これらは、window.innerWidthプロパティと、window.innerHeightプロパティに格納されています。 ブラウザに表示されてあるWebサイトの幅と高さは、document.documentElement.clientWidthプロパティと、document.documentElement.clientHeightプロパティに格納されてあります。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中ウィンドウサイズを固定する方法 かつては、特には制約はありませんでした。ゆえに、ブラウザのウィンドウサイズを固定することが可能でしたが、セキュリティホール（脆弱性）を攻撃されて、悪戯や不正行為に利用されやすくなっていました。 したがって、近年のブラウザでは、ユーザーが、自発的に起動した初回のブラウザの画面については、ウィンドウサイズの固定はできなくなっています。その代わりに、ブラウザが読み込んだWebページなどのJavaScriptから受動的に起動されたカスタムのウィンドウは、クライアントサイドからの制御が可能になっています。 なお、新しいウィンドウをミリセカンドまで、制御することも可能です。 実際に書いてみよう 以下に、サンプルコードも掲載しています。新規に起動されたウィンドウが、画面の幅や高さに変動が加わった際に、幅300px、高さ300pxに戻す処理にかけられます。 JavaScript window.open("javascript:window.addEventListener('resize', function (e) {window.resizeTo(300, 300); }, false);", "Good Luck.", "top=368, left=624, width=300, height=300");   動作結果 See the Pen 2020-07-25-sample02 by YOHEI INAI (@yohei_inai) on CodePen. ※CodePenに掲載している該当のコードは、コメントアウトにしています。 ※ポップアップブロックが表示されたら、許可を選択する必要があります。 ※セキュリティ対策や技術の都合にて、廃止される可能性があります。 確認方法 1. Firefoxにて、CodePenを開きます 2. CodePenのコード作成の「JS」のタブに先程のJavaScriptコードを貼り付けます。 3. 新しいタブが開かれたら、試してみましょう。 まとめ 「javascript:」は、セキュリティ対策や技術の都合に巻き込まれやすくなります。 また、ユーザーの画面全体を制御の対象とする処理は、広域かつ多大なる影響を及ぼす可能性が高いです。 筆者プロフィール 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

TechAcademyから
現役エンジニアの方へ
お知らせ

藤門千明
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのリンクで別ウィンドウを開く方法を現役エンジニアが解説【初心者向け】