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

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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

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

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします！

 

別ウィンドウとは

リンクは <a> タグで生成しますが、特に何も指定のない場合は「リンクにアクセスしたのと同じウィンドウ」でページを開きます。
以下のコードを書き、リンクをクリックすると、そのウィンドウで TechAcademyマガジンのトップページに移動します。
<a href="https://techacademy.jp/magazine/">同じウィンドウで開くリンク</a>

 

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

別ウィンドウでリンクを開きたい場合には、<a> タグに target=”_blank” 属性を追加します。
以下のコードを書き、リンクをクリックすると、別ウィンドウで TechAcademyのトップページに移動します。

 

ただし、target=”blank” だけでは、Tabnabbing(タブナビング) と呼ばれる脆弱性を突かれる可能性があります。Tabnabbing とは、target=”_blank” で開かれたウィンドウから、もとのウィンドウの操作ができてしまう脆弱性です。
Tabnabbing は、target=”_blank” とあわせて rel=”noopener” 属性を追加すると防ぐことができます。
rel=”noopener” は IE11, Edge が非対応(2019/08/10 現在)のため、リファラ不要であれば rel=”noopener noreferrer” のように noreferrer も指定することで、IE11 や Edge でも Tabnabbing を防ぐことができます。

 

Tabnabbing についてより詳しく知りたい方は、ぜひ検索してみてくたさい。

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

実際に書いてみよう

これまでの話をまとめると、別のリンクで開くためのリンクは次のように書けば OK です。リファラ不要であれば noreferrer も指定しましょう。
<a href="https://techacademy.jp" target="_blank" rel="noopener noreferrer">TechAcademy</a>
リファラが必要な場合は、セキュリティ的に問題ないかを確認の上で、noreferrer 無しのリンクにすれば良いでしょう。
<a href="https://techacademy.jp" target="_blank" rel="noopener">TechAcademy</a>

 

執筆してくれたメンター

メンター稲員さん

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているのでぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLとCSSで横並びレイアウトの表示方法を現役エンジニアが解説【初心者向け】

今回はHTMLとCSSを使用して横並びレイアウトの表示をする方法を、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
CSS

HTMLをブラウザで表示するXAMPPの使い方を現役エンジニアが解説【初心者向け】

HTMLをブラウザで表示するXAMPPの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、inputタグとtextareaタグを使ってテキスト入力...
HTML

HTMLの特殊文字で表示できる星を現役デザイナーが解説【初心者向け】

HTMLの特殊文字で表示できる星について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、H...
HTML

HTMLによるファビコンの設定方法を現役デザイナーが解説【初心者向け】

HTMLによるファビコンの設定方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、...
HTML

HTMLファイルの解析方法を現役デザイナーが解説【初心者向け】

HTMLファイルの解析方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、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では初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

CSSでリンクの下線を消す方法を現役エンジニアが解説【初心者向け】

CSSでリンクの下線を消す方法について解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSでリンクの下線を消す方法について詳しく説明していくね！ 大石ゆかり お願いします！   リンクの下線を消すコード リンクの下線は、aタグのtext-decorationプロパティがunderlineに設定されている場合に表示されます。 これは多くのブラウザで標準設定されていますが、以下のようにtext-decorationプロパティをnoneに設定することで削除が可能です。 [Google検索ページ]など、一部のページでも下線非表示になっていますね。   text-decoration: none;   実際に書いてみよう まずはデフォルトの動作を見てみましょう。リンクに下線が表示されています。   HTML <!-- text-decoration: underline; がデフォルトで設定されている --> <a href="https://techacademy.jp/magazine/category/programming/css" target="_blank" rel="noopener noreferrer"> <p>下線ありリンク</p> </a>   See the Pen justify-content: center; by 17num (@17num) on CodePen.   次に、リンクの下線を消す方法です。aタグにtext-decoration: none;を設定することで、下線を消すことができます。   HTML <a href="https://techacademy.jp/magazine/category/programming/css" target="_blank" rel="noopener noreferrer"> <p>下線なしリンク</p> </a>   CSS a { text-decoration: none; }   See the Pen justify-content: center; by 17num(@17num) on CodePen.   [PR] HTML/CSSで挫折しない学習方法を動画で公開中カーソルが当たった際のみ下線を出す方法 リンク下線を消していると、リンクかどうか判別がつきにくいので、マウスカーソルが当たった時のみ、下線を出すようにしてみます。カーソルが当たっている状態は:hover疑似クラスで指定できます。 以下のように設定すればカーソルが当たっている際にリンク下線を表示することができます。   a:hover { text-decoration: underline; }   CSS a { text-decoration: none; } a:hover { text-decoration: underline; }   See the Pen justify-content: center; by
CSS

CSSのリンクの色を変えない方法を現役エンジニアが解説【初心者向け】

CSSのリンクの色を変えない方法を現役エンジニアが解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSのリンクの色を変えない方法について詳しく説明していくね！ 大石ゆかり お願いします！   リンクの色が変わってしまう原因 未訪問のサイトと訪問済のサイトでリンクの色が異なっていることや、マウスカーソルを当てた際、マウスクリックした際にリンクの色が変わることがあります。これらはaタグの:link, :visited, :hover, :active疑似クラスの設定が原因です。 :linkは未訪問のリンク、:visitedは訪問済のリンク、:hoverはマウスカーソルが当たっているリンク、:activeはマウスクリック中のリンクを指します。   リンクの色が変わらないためにすること 「aタグの色を指定して、各疑似クラスの設定は行わない」という方法と、「全ての擬似クラスで同じ色を指定する」という方法があります。 「aタグの色を指定して、各疑似クラスの設定は行わない」場合には、以下のようにaタグで色指定するだけで良いです。 a { color: blue; }   「全ての擬似クラスで同じ色を指定する」場合には、:link, :visited, :hover, :active疑似クラスで同じ色を指定すれば良いです。 a:link, a:visited, a:hover, a:active { color: blue; }   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう まずはデフォルト動作を見てみましょう。リンクの訪問や、マウスホバー、クリックでリンクの色が変わるのが分かるかと思います。 ※CodePenでは、標準でマウスホバーやクリックで色が変わらないため、:hoverと:activeの設定をしています。 HTML <a href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>標準リンク(リンク訪問や、マウスホバー、クリックで色が変わる)</p> </a>   CSS a:hover { color: red; } a:active { color: green; }   See the Pen justify-content: center; by honyankobushi (@17num) on CodePen.   次に「aタグの色を指定して、各疑似クラスの設定は行わない」方法です。no-color-changeクラスで色を一括指定しています。リンクの色が変わらないのが分かるかと思います。   HTML <a href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>色の変わるリンク(リンク訪問や、マウスホバー、クリックで色が変わる)</p> </a> <a class="no-color-change" href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>色の変わらないリンク(リンク訪問や、マウスホバー、クリックで色が変わらない)</p> </a>   CSS a:hover {
CSS

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

JavaScriptで新規ウィンドウを開く方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   なお本記事は、オンラインブートキャンプ フロントエンドコース（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を使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。 プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。 また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
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を使って機械学習の基礎を学ぶPythonオンライン講座を開催しています。 初心者向けの書籍を使って人工知能（AI）や機械学習について学ぶことができます。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。 また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
Python

JavaScriptでポップアップウィンドウを表示させる方法【初心者向け】

初心者でも簡単に使えるJavaScriptのコードを紹介する記事です。ポップアップウィンドウは、一般的なサイトでもよく見ると思いますので、覚えておきましょう。 JavaScriptでボタンを設置したあとで、ポップアップを表示される方法を解説します。メッセージを表示することもできます。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！警告みたいな感じで、小さいウィンドウが表示されるサイトって、たまにありますよね？あれってどうやってるんですか？ 田島悠介 JavaScriptのアラートって関数で出来るよ！ 大石ゆかり あれってJavaScriptだったんですね。 田島悠介 簡単に書いて実行できるんだよ。では、さっそく書き方を見てみよう！   ポップアップウィンドウの表示方法 まずはボタンを表示させます。 <img src="images/ducks.jpg" alt="あひる"> <p>あひる5個セット</p> <p>800円</p> <input type="submit" value="購入する" > こここから「購入する」ボタンをクリックすしたらポップアップウィンドウが表示されるようにします。   ポップアップウィンドウを表示させるには、 <input type="submit" value="購入する" onClick="alert('購入しました！');"> と入れるだけです。 ここで入力した「購入しました！」という文言がアラートとしてポップアップウィンドウで表示されますので、文字を変えてもOKです。   適用するとこうなります。 <img src="images/ducks.jpg" alt="あひる"> <p>あひる5個セット</p> <p>800円</p> <input type="submit" value="購入する" onClick="alert('購入しました！');"> ボタンをクリックすると、このように表示されるようになりました。   今回はただクリックすると表示されるだけですので、もう少し応用した内容にもチャレンジしてみてください。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   大石ゆかり タグの中にonClickって要素があって、その中にalertって関数がありますね。 田島悠介 タグの中にJavaScriptのイベントを書いたり出来るんだよね。 大石ゆかり イベントって何でしょうか？ 田島悠介 何かが起こった時に実行される関数なんだ。今回はクリックするとalert関数が実行されるんだ。クリックイベントじゃなくても、普通にalert関数を書いても実行されるよ。 JavaScriptのwindow.openメソッドの使い方についても説明しているので、合わせてご覧ください。 [お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。
JavaScript

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

WEEKLY RANKING

言葉の意味をおさらいしてみよう！「各位」の正しい使い方と用例

厚切りジェイソンが語る「プログラミングを学習する意義」とは

社会人として恥ずかしくない！「当社・弊社・貴社・御社」の使い方

今さら聞けない！コマンドプロンプトの使い方【初心者向け】

今さら聞けない！GitHubの使い方【超初心者向け】

【困った！】いつの間にかローマ字入力が大文字になっていたときの対処法

【例文あり】敬語で言いたいときはどうする？「気を付けて」の場合

メンタリストDaiGoが語るプログラミングを学ぶメリットとは

意外と簡単？Photoshopで画像を切り抜く方法

メールの書き方に困ったら！「了解」「承知」「了承」の違いと使い方

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