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

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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,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リンクが飛ばない原因と対処法を現役デザイナーが解説【初心者向け】

HTMLリンクが飛ばない原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
HTML

HTMLでspanを使用して右寄せ表示する方法を現役デザイナーが解説【初心者向け】

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

jQueryを使ってHTMLをオーバーレイ表示する方法を現役エンジニアが解説【初心者向け】

jQueryを使ってHTMLをオーバーレイ表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

HTMLの要素に囲み枠（ボックスデザイン）を設定する方法を現役エンジニアが解説【初心者向け】

HTMLの要素に囲み枠（ボックスデザイン）を設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLに1行だけコメントアウトする方法を現役デザイナーが解説【初心者向け】

HTMLに1行だけコメントアウトする方法について解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解...
HTML

HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法を現役デザイナーが解説【初心者向け

HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して...
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

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

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でウィンドウサイズを取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ウィンドウサイズを取得する方法 ブラウザウィンドウ全体（横）の外周を取得する。 window.outerWidth ブラウザウィンドウ全体（縦）の外周を取得する。 window.outerHeight   ウィンドウに関する他の値の取得方法 ウィンドウ全体の幅を取得する以外にもいろいろな幅を取得する方法（関数）があります。 ブラウザ内の表示域を取得する。   window.innerWidth // 横幅 window.innerHeight // 縦幅   ドキュメント全体の幅を取得する。   document.body.clientWidth // 横幅 document.body.clientHeight // 縦幅   ドキュメントの表示領域を取得する。   document.documentElement.clientWidth // 横幅 document.documentElement.clientHeight // 縦幅   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう <p>ウィンドウサイズ外周：<span id="outWinSize"></span></p> <p>ウィンドウサイズ表示域：<span id="innWinSize"></span></p> <script type="text/javascript"> //ウィンドウサイズ(外周)の取得 getOuterWindowSize(); //ウィンドウサイズ(表示域)の取得 getInnerWindowSize(); //ウィンドウサイズ(外周)の取得 function getWindowSize() { var outW var outH var outWindow; outW = window.outerWidth; outH = window.outerHeight; outWindow = "横幅 = " + outW + " / 高さ = " + outH; document.getElementById("outWinSize").innerHTML = outWindow; } //ウィンドウサイズ(表示域)の取得 function getWindowSize() { var innW var innH var innWindow; innW = window.innerWidth; innH = window.innerHeight; innWindow = "横幅
JavaScript

JavaScriptでモーダルウィンドウを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでモーダルウィンドウを実装する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでモーダルウィンドウを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   モーダルウィンドウとは モーダルウィンドウとは、指定したウィンドウ内での操作を完了もしくはキャンセル操作を行わないと他のウィンドウを開くことができないウィンドウのことを指します。 表現方法が類似しているものとして「ポップアップ」がありますが、ポップアップの場合は他のウィンドウを操作することができる点がモーダルウィンドウと異なる点です。 モーダルウィンドウを使用する場面としては、エラーメッセージの表示やロード待機などを行わせる事ができます。 JavaScriptでモーダルウィンドウを実装する方法 モーダルウィンドウの実装方法はメイン画面を表示した段階で、hiddenでモーダル画面を生成しておきます。ボタン等のイベントに応じて表示、非表示を切り替える手法を用います。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう 一般的なモーダル表示の雛形を作ってみます。 HTML <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>モーダルウィンドウ設定</title> <link rel="stylesheet" href="style.css"s> </head> <body> <div id="open"> モーダルウィンドウを表示 </div> <div id="mask" class="hidden"></div> <section id="modal" class="hidden"> <p>モーダルウィンドウを表示しました。内容を確認して「閉じる」ボタンを押してください。</p> <div id="close"> 閉じる </div> </section> <script src="script.js"></script> </body>   CSS body { font-size: 16px; } #open, #close { cursor: pointer; width: 200px; border: 1px solid #ccc; border-radius: 4px; text-align: center; padding: 12px; margin: 20px auto 0; background: gray; color: white; } #mask { background: rgba(0, 0, 0, 0.4); position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 1; } #modal { background: #fff; color: #555; width: 300px; padding: 40px; border-radius: 4px; position: absolute; top: 40px; left: 0; right: 0; margin:
JavaScript

WEEKLY RANKING

【完全初心者向け！】コミュニケーションツールSlack（スラック）の使い方

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

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

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

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

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

文書・メールで頻出の「様」と「殿」それぞれの意味と使い分け方を知ろう

【超便利！】Excel(エクセル)でカレンダーを作成する方法

厚切りジェイソンに「社会人がプログラミングを学ぶ意義」を聞いてみた

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

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