💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
HTMLでリンクを新しいタブで開く方法｜target blank
📌
結論
外部リンクには target="_blank" と rel="noopener noreferrer" を付けよう
target="_blank" を使います。ただし、セキュリティ対策が必須です。
📝 実際のコードはこちら
<a href="https://example.com" target="_blank" rel="noopener noreferrer">例</a>なぜrelが必要？
target="_blank" だけで開くと、新しいタブから元のページにアクセスできてしまう脆弱性があります（window.opener という仕組み）。
rel="noopener noreferrer" を付けることで、これを防ぎます。
| 属性 | 効果 |
|---|---|
noopener | 新しいタブから元のページへのアクセスを遮断 |
noreferrer | リファラー情報を送らない |
いつ使う？
| パターン | target属性 |
|---|---|
| 外部サイトへのリンク | _blank + rel を付ける |
| 同じサイト内のリンク | target なし（同じタブで遷移） |
まとめ
・外部リンクはtarget="_blank" + rel="noopener noreferrer"
・セキュリティ対策としてrelは必ず付ける
・同じサイト内のリンクにはtarget不要
演習で試してみよう
新しいタブで開くリンクを作ってみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
リンクをtarget="_blank"で新しいタブで開くようにしてください。
詰まったらヒント
aタグにtarget属性を追加。セキュリティのためrelも付けると良い。