target="_blank"とは？
Webサイトを閲覧していると、リンクをクリックしたら新しいウィンドウやタブでページが開いたという経験はありませんか？ これは、HTMLのリンクタグ（<a>タグ）のtarget属性に"_blank"を指定することで実現できます。
target="_blank"の役割
target="_blank"は、リンク先のページを現在のウィンドウではなく、新しいウィンドウまたはタブで開くようにブラウザに指示する役割を担っています。具体的には、以下のような場面で使用されます。
- 外部サイトへのリンク
- PDFファイルや画像ファイルなど、別ウィンドウで表示したほうが良いコンテンツへのリンク
- ユーザーに新しいウィンドウで操作を継続させたい場合
記述方法
target="_blank"は、タグの属性として以下のように記述します。
<a href="https://www.example.com" target="_blank">新しいウィンドウで開く</a>
このコードをクリックすると、"https://www.example.com"が新しいウィンドウで開きます。
メリットと注意点
メリット
- ユーザーが現在のページの内容を保持したまま、新しい情報にアクセスできる
- Webサイトの回遊性を高めることができる
注意点
- 使いすぎるとユーザーがウィンドウをたくさん開くことになり、混乱を招く可能性がある
- セキュリティ上の懸念があるため、近年では"rel="noopener""属性と合わせて使用することが推奨されている
rel="noopener"属性について
"rel="noopener""属性は、target="_blank"と併用することで、セキュリティリスクを軽減するための属性です。 noopener属性を付けることで、新しいウィンドウが開かれた際に、元のウィンドウの情報にアクセスすることを防ぎます。
<a href="https://www.example.com" target="_blank" rel="noopener">新しいウィンドウで開く</a>
target属性の値一覧
target属性には、"_blank"以外にもいくつかの値を指定することができます。主なものを以下の表にまとめました。
| 値 | 説明 |
|---|---|
| _blank | 新しいウィンドウまたはタブで開く |
| _self | 現在のフレーム内に開く（デフォルト） |
| _parent | 親フレームに開く |
| _top | 最上位のフレームに開く |
| <frame_name> | 指定した名前のフレームに開く |
参考資料
よくある質問
Q1. target="_blank"はスマートフォンでも有効ですか？
A1. はい、スマートフォンでも有効です。ただし、スマートフォンのブラウザによっては、新しいタブではなく、アプリ内のブラウザで開いたり、外部ブラウザで開くことをユーザーが選択できたりする場合があります。
Q2. target="_blank"をすべてのリンクに設定しても良いですか？
A2. 推奨しません。target="_blank"は、ユーザーの意図しないウィンドウの開き方を強制することになるため、使いすぎるとユーザー体験を損なう可能性があります。本当に必要な場合にのみ使用しましょう。
Q3. rel="noopener"は必ず指定する必要がありますか？
A3. セキュリティ上のリスクを考慮すると、target="_blank"を使用する場合は、rel="noopener"も併せて指定することが強く推奨されます。特に、外部サイトへのリンクにtarget="_blank"を使用する場合は、必ずrel="noopener"を指定しましょう。
その他の参考記事:jquery target blank