20 Jan 2025
公開日 2025年1月20日 最終更新日 2025年1月24日
URLをクリックした際、新しいタブで開いたり、同じでタブで開いたりと、Webサイトによってリンクの表示方法が異なります。これは、HTMLで指定してるリンクの表示先が異なるからです。HTMLで以下のように、aタグにtarget属性を指定することでリンクの表示先の指定ができます。 出典：DMM WEBCAMP
<a href="リンク先のURL" target="リンクの表示先の指定"></a>「リンクの表示先の指定」には、以下の4種類があります。
- 同じタブで開く：_self
- 新しいタブで開く：_blank
- インラインフレーム内で開く
- 新しいウィンドウで開く：window.open
target属性は、値の前に「_（アンダースコア）」を入れるのを忘れがちなので注意しましょう。では、それぞれの特徴と使い方を解説していきます。
1.同じタブで開く：_self
<a href="リンク先のURL" target="_self">同じタブで開きます</a>
<a href="リンク先のURL">同じタブで開きます</a>同じWebページ上で新しいURLを開きたい場合には、target=”_self”を指定します。
「_self」は、aタグのリンク表示先におけるデフォルト値なので、省略して記述しても同じタブで開くことが可能です。
ページ数が多くない場合や、戻るボタンを押す必要がないWebサイトなどでは「_self」または何も指定していない場合が多いです。
2.新しいタブで開く：_blank
<a href="リンク先のURL" target="_blank">
新規タブで開きます
</a>新しいタブでURLリンクを開きたい場合には、target=”_blank”を指定します。新しいタブでリンクを開くことで、戻るボタンを何度も押さずに複数のページを確認することが可能になります。「さっき見ていたページまで戻るの面倒」と思われることもなくなるのでユーザーの離脱率を下げる効果もあるとされています。
3.インラインフレーム内で開く
<ul>
<li><a href="sample1.html" target="sample">サンプル1を表示</a></li>
<li><a href="sample2.html" target="sample">サンプル2を表示</a></li>
<li><a href="sample3.html" target="sample">サンプル3を表示</a></li>
</ul>
<div><iframe src="sample1.html" width="250" height="80" name="sample">代替内容</iframe></div>インラインフレーム（iframe）とは、Webページの中に独自の領域を作り、その中で別のWebページなどを読み込んで表示するものです。aタグでインラインフレーム内で表示するHTMLを指定し、target属性で独自の名前をつけ、iframeタグを使用して表示します。料金やメニューなど、同じWebページ内で特定の枠内だけ画面が切り替わるようにしたい場合などによく利用されています。
4.新しいウィンドウで開く：window.open
<a href="リンク先のURL" onclick="window.open('リンク先のURL', '任意のウィンドウ名称','width=1300,height=800'); return false;">新規ウィンドウで開きます</a>HTMLのaタグに、JavaScriptの「windouw.open」メソッドを使用することで、新しいウィンドウで開くことができます。新しいタブで開くtarget=”_blank”と同様、ユーザーの離脱率を減少させる効果があるとされています。
target=”_blank”を使用せずに、同じタブで開くデフォルト値の_selfを指定する方法もありますが、他にも以下の対策を取ることで、安全に新しいタブでリンクを開くことができるようになります。
<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">新しいタブで安全に開きます</a>noopenerは、新しいタブで開かれるリンクを参照できなくする指定のこと。リンク元も新しいタブで開かれるリンクも別のものとして扱われるため、パフォーマンスの対策にもなっています。しかし、ブラウザによってはnoopenerがサポートされていない場合があるので、未対応ブラウザ用にnoreferrerも一緒に指定しておきましょう。
新しいウィンドウで開く指定のwindouw.openメソッドも脆弱性があるので、noopenerとnoreferrerを必ず指定する必要があります。
aタグにtarget=” _blank”を使用した際、「あれ？URLリンクをクリックしても開けない」ということがあります。
パソコンでもまれにある現象ですが、特に「一部のAndroid端末 + Google Chrome」という組み合わせでで多く発生します。これは、target=” _blank”の脆弱性からセキュリティ面で問題があるため、開けないようになっているのです。先ほど解説した「noopener」と「noreferrer」を指定していればこの問題を解決できるので、一部のブラウザやデバイスでリンクが開けない時はrel属性の指定を確認しましょう。