同じページ内でアンカーリンクさせる方法 [レッスン付]

同じページ内の特定の位置まで瞬時にリンクする設定ができます。ページが長い場合などに利用すると便利です。そのアンカーリンクの使い方を説明します。

必要な工程は以下の2つです。

1. リンク先のタグにIDを設定

まずリンク先を設定します。

アンカーリンクでジャンプしたい場所のタグにidを記述します。

<div id="jump">リンク先</div>

1つのIDは1ページに1つだけしか使ってはいけないルールになっています。
ページ内の他の箇所で同じ名前のIDが使われていないかチェックしてから、IDの設定をしましょう。

次にリンク先へジャンプするためのアンカーリンクを設置します。

リンクさせるにはaタグを使います。

a開始タグのhrefの中にリンク先で設定したidと同じ名前を入れます。

idを指す場合は名前の先頭に#を付ける必要があるので、忘れないように気をつけてください。

<a href="#jump">リンク</a>

設置場所ですが、なるべくスクロールしなくてもリンク先へ素早く行き着くための設置なので、リンク先より先にこのアンカーリンクを設置しておかないとあまり意味がありません。基本的に上部の方に設置するのが望ましいです。