【HTML入門】アンカーリンクでページ内の特定の場所へジャンプさせる方法

HTMLのアンカー（<a>）タグを使えば、別のページや外部サイトへのリンクを簡単に作成できます。では、Webページの「特定の部分」に直接リンクさせるにはどうすればよいのでしょうか？

その答えがジャンプリンク（jump links）です。

ジャンプリンクとは、単にページを読み込むだけでなく、そのページ内の指定した箇所へ自動的にスクロール（ジャンプ）してくれるリンクのことです。自社サイト内の別ページへの誘導はもちろん、SNSやメールなどで外部にURLを共有する際にも活用できます。

このリンクは、ユーザーがどこからアクセスしてきた場合でも正しく機能し、特別な技術は一切不要。基本的なHTMLの知識だけで実装できます。

アンカージャンプリンクの作成方法

HTMLでは、<a>タグの中にテキストを記述することでアンカーリンクを作成できます。以下は最もシンプルな例です。

<a>ここはどこにもジャンプしないリンクです！</a>

リンク先（ターゲット）にはid属性を指定する

ジャンプリンクを作るには、「リンク」と「リンク先（ターゲット）」の2つが必要です。ターゲットとして指定できるのは、ページ上のid属性を持つ任意の要素です。

よく使われるターゲットは、<h1>、<h2>、<h3>などの見出し要素です。見出しにはあらかじめid属性を付けておくと、後からジャンプリンクを設定したいときに便利なので、良い習慣としておすすめします。

例えば、非常に長いWebページがあり、その中の特定のセクションへリンクしたいとしましょう。対象となるHTMLは次のようになっています。

<h2 id="extra_content">リンクさせたくないコンテンツ</h2>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed porta est, nec pretium lectus. Quisque sit amet porta risus, sed faucibus magna. 
</p>

<h2 id="linked_content">リンク先にしたいセクションの見出し</h2>
<p>
    Vivamus orci erat, sagittis vitae aliquam at, pretium sagittis neque. Curabitur vel eros in turpis elementum sollicitudin. 
</p>

URLにidを追加してリンクする

ターゲットとなる要素が用意できたら、ページURLの末尾に#linked_contentを追加するだけで、そのセクションへのジャンプリンクが完成します。#（シャープ記号）の後に、ターゲット要素のid名を記述してください。

同じページ内のセクションへ移動させたい場合は、サイト内部リンクとして作成できます。内部リンクの場合、href属性にhttps://www.WebsiteName.comのようなドメイン部分は不要です。

内部ジャンプリンクの例：

<a href="#linked_content">同じページ内の見出しへジャンプするリンク</a>

では、別のサイトからリンクを張りたい場合や、SNS・メールなどでURLを共有したい場合はどうでしょうか？ この場合も同様に、完全なURLの末尾に#linked_contentを追加するだけです。

<a href="https://www.WebsiteName.com/PageName/#linked_content">別ページの見出しへジャンプするリンク</a>

「name」属性に関する注意点

かつては、空のアンカータグに「name」属性を指定してジャンプ先を定義する手法が一般的でした。しかし、この方法はHTML5で廃止されています（Mozilla Developer Network参照）。現在でも一部のブラウザでは動作する可能性がありますが、互換性と将来性を考慮して、上記で紹介したid属性を使う最新の方法を採用することを強くおすすめします。

ぜひこの記事を参考に、Webページの特定の箇所へジャンプできるリンクを実装してみてください！