この記事で解決できるお悩み
・リンクを別タブで開く意味はある？
はじめに
ウェブサイトを作成する際、リンクをクリックした時に新しいタブで開くように設定することがあります。
どんな違いがあるのか、以下のリンクをクリックするとお分かりいただけると思います。
現在のタブで開く
新しいタブで開く
その設定方法とメリットについてまとめてみました。
この記事では、HTMLの<a>タグを新しいタブで開く設定方法と使用例について解説します。
結論
以下のコードをコピペするだけで完了です。
<a href="//example.com>" target="_blank" rel="noopener">リンク</a>「example.com」「リンク」の部分を開きたいURLと名称に変更してご利用ください。
とても簡単ですね。
もう少し詳しく解説していきます。
<a>タグとは
まず、<a>タグとはHTMLのタグの一つで、他のページへのリンクを作成するための要素です。
aタグにリンク先のURLを設定することで、クリックした際にそのURLを開くようにできます。
しかし、この基本的な設定だけでは、リンクをクリックすると現在のタブでそのURLが開かれます。
新しいタブで開く設定方法
次に設定方法についてですが、最初にも紹介したように以下のように記述するだけで完了です。
<a href="//example.com>" target="_blank" rel="noopener">リンク</a>上記のようにtarget属性を追加し、値を”_blank”にします。
これにより、リンクをクリックすると新しいタブでURLが開かれます。
セキュリティ対策
新しいタブで開く設定をする際には、セキュリティ上の注意が必要です。
target=”_blank”を設定したリンクは、新しいタブのウェブページから元のページを操作することができるため、悪意のあるサイトにリンクしてしまうと問題となります。
その対策として、rel属性値に”noopener”を追加します。これにより、新しいタブから元のページを操作することを防ぐことができます。
具体的な使い方
ファイルへのリンク
PDFなどのファイルを開く際に新しいタブで開く設定にすることが多いです。
ファイルを開いたまま元のページを見たいといった状況も少なくありません。
別のサイトにリンクさせる際
例えば
・サイト内で紹介している別サイトへのリンク
・企業などの場合は、関連会社のホームページへのリンクなど
新しいタブで開かない場合、リンクを開いていろんなページを見ていると、元のサイトに戻るのが大変になり、めんどくさく感じてしまいます。
そのままサイトから離れてしまう可能性が増えてしまいます。
注意点
PCで見る分には便利ですが、スマホだと新しいタブで開いた場合、いちいちタブを変える操作が必要になるというデメリットがあります。
実際にスマホで確認しながら、不要な箇所については調整してみましょう。
むやみやたらに設定するのは避けたほうがよさそうです…
まとめ
ここまで紹介したように、<a>タグを新しいタブで開くための設定はとても簡単に行うことができます。
しかし、スマホだとデメリットもあることを忘れずに使い分けることが大切です。
必ず使う場面があるのでこの設定方法を覚えておきましょう。
コメント