HTMLのtarget="_blank"とtarget="_new"の違い
Webページを閲覧中に、リンクをクリックすると、新しいタブやウィンドウに遷移することがあります。この動作は、HTMLのa要素のtarget属性で制御することができます。
target属性には、"_blank"、"_self"、"_parent"、"_top"、"_new"など、いくつかの値を設定できますが、中でも"_blank"と"_new"の違いについて詳しく解説していきます。
target="_blank"とは
target="_blank"は、リンクをクリックした際に、常に新しいタブまたはウィンドウでリンク先を開きます。 例えば、リンクを10回クリックすると、10個の新しいタブが開きます。
<a href="https://www.google.com/" target="_blank">Google</a>
target="_new"とは
target="_new"は、"_blank"とは異なり、リンクを何度クリックしても、新しいタブは1つだけ開きます。 既に"_new"という名前のタブまたはウィンドウが存在する場合は、そこに新しいページが読み込まれます。 つまり、"_new"は、常に特定の名前のタブまたはウィンドウでリンク先を開きます。
<a href="https://www.yahoo.co.jp/" target="_new">Yahoo!</a>
target="_blank"とtarget="_new"の違い
以下の表に、"_blank"と"_new"の違いをまとめます。
| 属性値 | 動作 |
|---|---|
| _blank | 常に新しいタブまたはウィンドウでリンク先を開く |
| _new | 新しいタブまたはウィンドウが1つだけ開き、リンクをクリックするたびに、そのタブまたはウィンドウに新しいページが読み込まれる |
セキュリティ上の注意
target="_blank"を使用する場合、セキュリティ上のリスクが存在します。 悪意のあるウェブサイトが、target="_blank"を使って、ユーザーの情報を盗み取ったり、マルウェアをインストールしたりすることがあります。 このリスクを軽減するために、target="_blank"を使用する際は、rel="noopener"属性を一緒に使用することをお勧めします。 rel="noopener"属性は、新しいタブまたはウィンドウが、元のタブまたはウィンドウの情報にアクセスすることを防ぎます。
<a href="https://www.example.com/" target="_blank" rel="noopener">安全なリンク</a>
まとめ
target="_blank"とtarget="_new"は、どちらも新しいタブまたはウィンドウでリンク先を開くことができますが、その動作には違いがあります。 "_blank"は常に新しいタブまたはウィンドウを開きますが、"_new"は特定の名前のタブまたはウィンドウにのみリンク先を開きます。 セキュリティ上のリスクを考慮し、適切な属性値を使用することが重要です。
参考資料
よくある質問
Q1. target="_blank"とtarget="_new"のどちらを使うべきですか？
A1. 基本的に、新しいタブまたはウィンドウでリンク先を開きたい場合は、target="_blank"で十分です。 特定の名前のタブまたはウィンドウでリンク先を開きたい場合は、target="_new"を使用します。 ただし、target="_blank"を使用する際は、セキュリティ上のリスクに注意し、rel="noopener"属性を一緒に使用してください。
Q2. target="_new"で開いたタブを閉じたい場合はどうすればいいですか？
A2. JavaScriptを使用して、"_new"という名前のタブまたはウィンドウを閉じることができます。 ただし、ユーザーが明示的にタブを閉じた場合にのみ、タブを閉じるようにしてください。 ユーザーが意図せずにタブを閉じてしまうと、ユーザーエクスペリエンスを損なう可能性があります。
Q3. target属性を使用せずに、新しいタブまたはウィンドウでリンク先を開くことはできますか？
A3. はい、JavaScriptを使用して、新しいタブまたはウィンドウでリンク先を開くことができます。 ただし、JavaScriptが無効になっている環境では、リンクが正しく動作しない可能性があります。 target属性を使用する方が、より確実で、アクセシブルな方法です。
```その他の参考記事:jquery target blank