今回はリンクタグを書くときに設定する【target=”_new”】のお話。
【target=”_blank”】との違いは？
どっちを設定すればいいの？
このような疑問に答えながらtarget=”_new”の使い方を初心者向けにわかりやすく解説します。
この記事を最後まで読めばリンクタグが使いこなせるようになるはずです。
ぜひ最後まで読んでみて下さい。
目次
target=”_new”とは？
target=”_new”の読み方
target=”_new”は【ターゲット・ニュー】と読みます。
targetは標的という意味で、newは新しいという意味です。
リンクを新しいタブ・ウィンドウで開くときに使用するプロパティです。
target=”_new”は新しいタブ・ウィンドウでリンクを開きます
target=”_new”はリンクタグに設定し、新しいタブでリンクを開くように設定します。
target=”_new”で利用できる値
target=”_new”では以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| none | 新しいウィンドウ、タブが開かれますが，リンク先は表示しません。 |
| window | 新しいウィンドウを開いて，そこにリンク先を表示します。初期値ではこの設定になります。 |
| tab | 現在のウィンドウに新しいタブを開いて，そこにリンク先を表示します。 |
どれを使うべき？
noneはリンク先が表示されないのであんまり実用性がありませんね。
使うならwindowかtabになります。
どちらが正解ということはないので、あとは好みになります。
時と場合に合わせて使い分けを行いましょう。
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
target=”_new”の基本的な使い方
target=”_new”の使い方
target=”_new”はこのように指定します。
|
1 |
<a href="http://#" target="_new" rel="noopener">サイト名</a> |
解説
- STEP.1aタグまずはリンクタグを表すaタグを設定します。
- STEP.2URLを指定aタグの中には””で表示したいリンク先のurlを指定します。
- STEP.3リンクの開き方を指定開き方(target=”_new”)を指定します。 rel=”noopener”を指定(後で解説)
- STEP.4リンクを表示する名前を閉じタグで挟むユーザーに見える、表示されるリンク名を指定し、閉じタグ【a】で挟んで終了です。
ちなみに開き方【target=”_new”】の部分を省略すると同じページでリンク先が開くことになります。
target=”_blank”との違いは？
target=”_new”とよく似た設定方法にtarget=”_blank”というものがあります。
target=”_new”と同じように新しいタブやウィンドウでリンクを開くというものなのですが、違いは何なのでしょうか？
実際にみてみましょう。
target=”_blank”の場合
target=”_new”の場合
実は1回開いただけでは変わりはありません。
2回目以降にその違いがあらわれます。
target=”_blank”は押した数だけタブやウィンドウが開くのに対し、target=”_new”は2回目以降は同じタブが読み込まれます。
どちらを使うかは好みになりますが、タブを何個も増やしたくないという人にはtarget=”_new”が向いています。
rel=“noopener”を追加しよう
target=”_new”やtarget=”_blank”のように外枠で開くときは、【rel=“noopener”】を追加することが推奨されています。
このように設定します。
|
1 |
<a href="http://www.google.co.jp/" target="_new" rel="noopener">Googleのサイト</a> |
なぜrel=“noopener”を追加するの？
これはセキュリティー対策です。
このように設定することによって新しいタブを開くときに、元ページが操作されることを防ぎます。
通常のリンクでは必要ありませんが、新しいタブやウィンドウでリンクを表示するときは、「rel=”noopener”」も追加しておくことをおすすめします。
ちなみにワードプレスでは自動で追加されます。
こんな経験ありませんか？
【リンクを踏んで別のURLへ飛んだら、知らないうちに元のページが他のページにすり替わってた】
これはこの仕様を悪用したものです。
安全だと思っていた元サイトがフィッシングサイトにすり替わり、個人情報やクレジットカード番号が盗まれたり・・・なんてことも考えられます。
rel=“noopener”はこのようなことから防ぎます。
【余談】その他のリンクの開き方
このtarget=””にはその他に4つの開き方が設定できます。
parent・親フレームに表示します。
top・フレーム分割を解除してウィンドウ全体に表示します。
任意のフレーム・フレーム名、ウィンドウ名 任意のフレーム（ウィンドウ）に表示します。
このような設定ができますが、基本は何も指定しない【同じページで表示する】かtarget=”new”やtarget=”blank”でOKです。
他の設定方法もあるということを頭の片隅に入れておきましょう。
target-newはどのような時に指定するの？
target=”_new”やtarget=”_blank”のように新しいタブで開くメリットとしては、自分のサイトは別タブに残しておけるのでキープができるという点です。
ですが、すべてのリンクを外窓で開くように設定をすると、リンクをクリックするたびに新しいウィンドウやタブが立ち上がってしまい、閲覧者はタブやウィンドウだらけになってしまい、利便性を損ないます。
そのためにむやみやたらにtarget-newやtarget-blankを使用するのはやめましょう。
リンク先がPDFファイルやダウンロードファイルなら時間がかかるので別タブで開くのがオススメです。
また日ごろからサイトを閲覧するときにリンクがどのように開いているかを意識するのもオススメです。
人によって別タブはいや派か、あり派で分かれますが、こういった場合に別タブで開かれることが多いんだな～というのが見えてきて勉強になります。
まとめ
いかがだったでしょうか。
今回はtarget-newの設定方法や、target-blankとの違いについて解説しました。
リンクタグを書くときに使い分けができるようになってください。
また、セキュリティー対策として【rel=“noopener”】を追加するのも忘れないようにしましょう。
この記事が少しでもお役に立てれば幸いです。
参考文献：https://www.homepage-tukurikata.com/html/a-href.html
