早速結論。【別のウィンドウでリンクを開くことができる】これだけです。
本記事は【target=”_blank”】の使い方と注意点、そして【target=”_new”】についても解説しています。
ぜひ読んでいってください。
はじめに
Webページを閲覧するとき、多くの場合リンクが含まれています。
リンクをクリックすると、別のWebページに移動することができますよね？
このとき、リンク先を同じウィンドウで開く方法もあれば、新しいウィンドウで開く方法もあります。
どうやって制御しているのでしょうか？
target属性とは？
HTMLにおいて、リンクがクリックされた時の開き方を指定するための属性が【target属性】です。
リンク先を現在のウィンドウや新しいウィンドウで開くなど、様々な指定方法があります。
target属性の種類は以下の通りです。
- 【”_blank”】：新しいウィンドウで開く
- 【”_self”】：同じウィンドウで開く
- 【”_parent”】：親フレーム内で開く
- 【”_top”】：全体のウィンドウで開く
“_blank”はよく使われます。
“_self”はデフォルトの挙動です。同じウィンドウで表示させるためにはtarget値を指定しないことが多いです。
それ以外は必要なときに調べれば問題はないですね:)
target=”_blank”とは？
それでは少し詳しく説明していきます。
target=”_blank”は、リンク先のWebページを新しいウィンドウで開く方法です。
現在表示しているWebページとリンク先のWebページを同時に開くことができます。
良く使われているtarget値です。
使い方：リンクをクリックして体験してみましょう
実際に試してみてください。
コードは次の通りです。
<a href="https://www.yahoo.co.jp/" target="_blank">Yahoo</a> <a href="https://www.bing.com/" target="_blank">Bing</a>target=”_new”とは？
早速ですがtarget=”_new”という、標準的なtarget値はありません。
好きな言葉を使うことができます。
This typically creates a top-level traversable with an auxiliary browsing context (assuming there is no existing navigable whose target name is “
example“):<a href=help.html target=example>Help!</a>This creates a top-level traversable with a non-auxiliary browsing context (assuming the same thing):
出典: HTML Living Standard, https://html.spec.whatwg.org/multipage/links.html#link-type-noopener, 引用日: 2023年4月16日<a href=help.html target=example rel=noopener>Help!</a>
『HTML Living Standard』というHTMLの仕様書にはtarget=”example”になっていますね。
“example”には好きな言葉を指定することができます。
In the following example the
出典: HTML Living Standard, https://html.spec.whatwg.org/multipage/links.html#link-type-opener, 引用日: 2023年4月16日openeris used to allow the help page popup to navigate its opener, e.g., in case what the user is looking for can be found elsewhere. An alternative might be to use a named target, rather than_blank, but this has the potential to clash with existing names.
上記の最後の一文に書いてある通り、既存の名前と衝突する可能性があることを知っておかなければなりません。
target=”_new”(target=”example”)の挙動
最初は新しいウィンドウが開き、２回目以降は同じウィンドウでリンク先が表示されます。
何回か試してみてください。
コードは次の通りです。
<a href="https://www.yahoo.co.jp/" target="_new">Yahoo</a><a href="https://www.bing.com/" target="_new">Bing</a>次に”example”に好きな言葉を指定します。target値はブログ名の「urufunote」でやってみます。
同じ挙動を示したのではないでしょうか？
“_new”は好きな言葉としてtarget値に指定していたに過ぎません。
コードは次の通りです。
<a href="https://www.yahoo.co.jp/" target="urufunote">Yahoo</a><a href="https://www.bing.com/" target="urufunote">Bing</a>このように同じターゲット値を持つリンクは、以前に生成されたウィンドウで開かれます。
targetを指定するときの注意点と解決法
正しい知識を身につけて以下のようにしっかりとした対策を施しましょう。
セキュリティ上のリスクを軽減し、悪意のある Web ページからの攻撃を防ぐことができます。
ユーザビリティへの影響
target=”_blank”(example)などを指定する場合、ユーザーが現在閲覧しているページを維持したまま、別のページを開くことができるため、ユーザーにとって使いやすい機能と言えます。
しかし、新しいウィンドウが次々と開かれると、ユーザーがどのタブに何のページが表示されているのか把握しきれなくなり、ストレスを感じることもあります。
そのため、適切なタイミングで新しいウィンドウを開くかどうか、ユーザーが混乱しないように注意する必要があります。
セキュリティ上の問題
ユーザーがクリックしたリンク先が信頼できるものであることを確認する必要があります。
なぜなら、リンク先のWebページに不正なスクリプトが埋め込まれていた場合、不正なリンクを踏ませるなどの攻撃に利用され、ユーザーのコンピューターに悪影響を及ぼす可能性があるからです。
解決策：rel=”noopener noreferrer”
noopener と noreferrer は、リンクをクリックして新しいウィンドウでページを開くときに使われる特別な属性です。
noopenernoopenerは、新しいウィンドウで開いたページが、元のページとJavaScriptのコードを共有しないようにする役割があります。これにより、悪意のあるページがあなたのデータを盗むことを防ぐことができます。
noreferrernoreferrer は、新しいウィンドウで開いたページが、リンク元の情報を知ることができないようにする役割があります。これにより、リンク先のサイトがあなたのプライバシーを侵害することを防ぐことができます。
<a href="https://" target="_blank" rel="noopener noreferrer"></a>rel=”noopener noreferrer”はこのように追加してください。
これらの属性は、セキュリティを守るために重要であり、常に使用することが推奨されています。
まとめ
この記事では、HTMLで使用されるtarget属性について解説しました。
- リンク先が信頼できるものであることを確認する
- ユーザーにとって便利であることを確認する
- セキュリティ対策を施す
ユーザーが新しいウィンドウでリンク先のページを開く際には、セキュリティ上の問題やユーザビリティへの影響に注意しましょう。
HTMLの仕様書で定められた使い方に沿って適切に使用することが重要です。
コメント