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

  • Web
リンク

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

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

  1. リンク先にIDを設定
  2. アンカーリンクを設置

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

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

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

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

2. リンク先へジャンプするためのアンカーリンクを設置

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

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

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

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

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

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

レッスン

ダウンロードのデータの中身

  • index.html
  • style.css

今回のレッスンはCSSよりHTMLを編集することの方が多いです。穴埋め問題のようになっています。

完成ページ
https://smartpocke.com/sample/anchor/index.html

レッスンをダウンロード
https://smartpocke.com/sample/anchor/lesson_anchor.zip