こんにちは！Webプログラミングを学び始めたばかりの方に向けて、今回はHTMLの「aタグ」を使って、リンクを別タブで開く方法をわかりやすく解説します。
「外部サイトへのリンクをクリックしたら、自分のページが消えてしまった…」
そんな経験はありませんか？
実は、aタグに“ある属性”を追加するだけで、リンク先を新しいタブで開くことができるんです！
aタグとは？
まずは基本から確認しましょう。
HTMLにおける<a>タグは、リンク（ハイパーリンク）を作成するためのタグです。
たとえば、以下のように書くことでリンクを作成できます。
<a href="https://nameko.online/">なめこオンライン</a>このコードでは「なめこオンライン」という文字がリンクになり、それをクリックすると
「https://nameko.online/」へジャンプします。
ただしこのままだと、同じタブでリンクが開いてしまい、元のページに戻るには「戻るボタン」を押す必要があります。
リンクを別タブで開くには？
答えはとてもシンプルです。
aタグに target="_blank" を追加するだけ！
<a href="https://nameko.online/" target="_blank">なめこオンライン</a>このようにすることで、リンク先が新しいタブで開かれます。
現在のページはそのまま残るため、ユーザーの操作性も良くなります。
セキュリティの観点：rel="noopener noreferrer" をつけよう
実は、target="_blank" にはちょっとしたセキュリティリスクがあります。
それは、リンク先のページが window.opener という仕組みを使って、元ページにアクセスできてしまうというものです。
悪意のあるサイトに飛ばした場合、元のページが操作される可能性もゼロではありません。
解決策
以下のように、rel属性を追加しましょう。
<a href="https://nameko.online/" target="_blank" rel="noopener noreferrer">
なめこオンライン
</a>rel="noopener noreferrer" の意味
noopener：新しいタブから元のページ（親ウィンドウ）へのアクセスを遮断します。noreferrer：リンク元の情報（リファラー）を送信しません。
安全性とプライバシーの観点から、この2つはセットで使うのが推奨されています。
（Web制作現場では「脆弱性対応」と言われたりします）
実際に使われているケース
Webサイトでよく見かける、以下のようなシーンでは target="_blank" が活用されています。
ユーザー体験を損なわず、スムーズなナビゲーションを実現できます。
よくある質問（FAQ）
Q1. target=”_blank” をつけるとSEOに悪影響はある？
A. 基本的にSEOへの影響はありません。
ただし、外部リンクが多すぎたり、リンク先が信頼できない場合は全体の評価に影響することもあります。品質の高いリンクを意識しましょう。
Q2. 内部リンクでも _blank を使っていいの？
A. 内部リンク（同じサイト内）では、基本的に同じタブで開く方が自然です。
ただし、「このページを開いたまま、別ページも見てほしい」といった意図がある場合は使ってOKです。
Q3. rel属性は絶対に必要？
A. セキュリティとユーザーの安全を考えると、基本的に必須と考えておくのがベストです。
特に企業サイトや公共性の高いメディアでは重要視されています。
まとめ
今回は、HTMLのaタグを使ってリンクを新しいタブで開く方法について解説しました。
「HTMLの勉強って難しい…」と感じることもあるかもしれませんが、1つ1つ理解を積み重ねていけば、着実にスキルは伸びていきます。
この記事が少しでもあなたのWeb制作に役立てば嬉しいです！
それでは、また次回の記事でお会いしましょう！
コメント