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サイトを公開できるオンラインブートキャンプを開催しています。

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