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

初心者向けにHTMLをリンクして新しいウィンドウで開く方法について解説しています。基本のリンクの書き方と別ウィンドウで開くときのそれぞれの書き方、新規ウィンドウを使う場合に適切な場面について見ていきましょう。

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

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

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