【ＨＴＭＬ】「target=”_blank”」を使用してリンクを新しいタブで開く方法

というわけで今回はリンクを新しいタブで開く方法についてお話しします。

リンク先に飛んだときに、前見てたページが消えてリンク先が表示されたら前のページに戻る気失せますよね。これではユーザー離反率があがってしまい宜しくありません。

「target=”_blank”」を使用して新しいタブで開く

同じタブで開く「target=”_self”」

まずはこちらの紹介から。
実はaタグは指定しなければ初期設定としてこの「target=”_self”」となってます。

新しいタブで開く「target=”_blank”」

今回の本題はこっちですね。
これをaタグ内に指定することでリンク先を新しいタブで開くことができます。
実際にコードを見てみましょう。

<a class="c-btn1" href="https://www.l-uckycode.com/" target="_blank">

こんな感じです。ただ付け加えるだけなので簡単ですね♪

「target=”_blank”」の脆弱性について

ここでは「target=”_blank”」の注意点を説明します。

「target=”_blank”」にはセキュリティにおいて脆弱性が確認されているようです。
新しいタブで開く際に、リンク元であるＷＥＢページを操作できてしまうようで
色々悪さができてしまいます。

対処法

では、セキュリティ性を担保するにはどうすれば良いか？？
それは、「rel=”noopener noreferrer”」を一緒に指定すれば解決できます。

<a class="c-btn1" href="https://www.l-uckycode.com/" target="_blank" rel="noopener noreferrer">

こんな感じですね。これも後ろに付け加えるだけなので簡単！！

noopenerは、新しいタブで開かれるリンクを参照できなくする指定のことです。

noreferrerは、ブラウザによってnoopenerが対応していない場合があるので未対応ブラウザ用に
一緒に指定おくのが良いかと思います。

まとめ

というわけで今回は「target=”_blank”」を使用してリンクを新しいタブで開く方法について説明しました。
セキュリティ面も考えて正しく実装できるようにしていきましょう！！