target="_blank"とは？
Webサイトを閲覧していると、リンクをクリックしたときに現在のタブとは別の新しいタブでページが開くことがあります。これは、HTMLの<a>アンカータグの属性である「target="_blank"」によって実現されています。
target="_blank"の基本
「target="_blank"」とは、リンク先のページを新しいタブまたはウィンドウで開くようにブラウザに指示する属性です。具体的には、アンカータグ (<a>) の中に記述します。
<a href="https://www.example.com/" target="_blank">リンクテキスト</a>上記コードの場合、「リンクテキスト」をクリックすると、「https://www.example.com/」が新しいタブで開きます。
target属性の値
target属性には"_blank"以外にも、いくつかの値を設定できます。主な値とその動作は以下の通りです。
| 値 | 動作 |
|---|---|
| _blank | 新しいタブまたはウィンドウに表示 |
| _self | 同じフレームに表示（デフォルト） |
| _parent | 親フレームに表示 |
| _top | 最上位のフレームに表示 |
| <フレーム名> | 指定したフレームに表示 |
セキュリティとユーザーエクスペリエンス
「target="_blank"」は便利な属性ですが、セキュリティとユーザーエクスペリエンスの観点から、以下の点に注意する必要があります。
セキュリティ
「target="_blank"」を使用する場合、新しいタブで開かれるページは、元のページからJavaScript経由で操作できてしまうというセキュリティリスクがあります。これを防ぐため、"rel="noopener""属性を併用することを推奨します。
<a href="https://www.example.com/" target="_blank" rel="noopener">リンクテキスト</a>ユーザーエクスペリエンス
「target="_blank"」は、ユーザーが意図せず多くのタブを開いてしまう可能性があります。そのため、本当に新しいタブで開く必要がある場合にのみ使用し、むやみに使用することは避けましょう。例えば、PDFドキュメントや画像など、現在のページのコンテキストを保持したまま参照させたい場合に有効です。
まとめ
「target="_blank"」は、リンク先を新しいタブで開く便利な属性ですが、セキュリティとユーザーエクスペリエンスに配慮して使用することが重要です。"rel="noopener""属性を併用することでセキュリティリスクを軽減し、ユーザーの行動を阻害しないよう、本当に新しいタブで開く必要がある場合にのみ使用しましょう。
参考資料
よくある質問
Q1: "_blank" 以外の target 属性の値は何ですか？
A1: "_self", "_parent", "_top", "<フレーム名>" などがあります。それぞれの値は、リンク先のページをどのフレームに表示するかを指定します。
Q2: なぜ "rel="noopener"" 属性を使用する必要があるのですか？
A2: "rel="noopener"" 属性は、新しいタブで開かれるページが元のページから JavaScript 経由で操作できないようにするためのセキュリティ対策です。これにより、クロスサイトスクリプティングなどの攻撃を防ぐことができます。
Q3: "target="_blank"" はモバイルサイトではどのように動作しますか？
A3: モバイルブラウザでは、"target="_blank"" は新しいタブではなく、新しいウィンドウでページを開くことが一般的です。これは、モバイルデバイスの画面サイズが限られているため、タブよりもウィンドウの方がユーザーエクスペリエンスが向上するためです。
その他の参考記事:jquery target blank