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デザイナーから教わること」を実感してみてください。

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