はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
target="_blank"：新しいタブで開く
リンクを新しいタブで開くように指示するのが blank="_blank" 属性です。target は「目標」、_blank は「空白の場所」を意味する単語ですので、「何もない新しい場所（タブ）で開いて」という指示になります。
主に外部サイトへのリンクで使い、自分のサイトからユーザーが離脱してしまうのを防ぐために使われます。
<a href="https://www.google.com" target="_blank">Google</a>
rel="noopener noreferrer"：セキュリティのためのおまじない
target="_blank" を使うときには、セキュリティ上の理由から必ずセットで付けるべきおまじないのようなものがあります。それが rel="noopener noreferrer" です。
これは、2つのパーツに分かれています。
-
noopener- 役割：セキュリティの強化
- 説明：
target="_blank"で開かれた先のページは、元のページを JavaScript で部分的に操作できてしまうという脆弱性があります。悪意のあるサイトにリンクした場合、元のページを偽サイトに書き換えられる危険性もゼロではありません。noopenerは、この関係性を断ち切り、安全性を高めます。
-
noreferrer- 役割：プライバシーの保護
- 説明：リンクをクリックすると、リンク先のサイトに「どのページから来たか」という情報（リファラ）が送られます。
noreferrerは、この情報を送らないようにする設定です。
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0012</title>
</head>
<body>
<main>
<h1>内部サイトへのリンクと外部サイトへのリンク</h1>
<h2>内部サイトへのリンク</h2>
<a href="/about.html">会社概要へ</a>
<h2>外部サイトへのリンク</h2>
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Googleへ</a>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>