【HTML5】ページ内リンクの実装方法を解説【ヘッダー固定時のズレも解決】

ジャンプしている男性

ページ内リンクの実装方法が分からない人

ページ内リンクってどうやって作るの?

ページ内リンクってどうやって作るの?
リンクをクリックすると、一瞬で「ビュン」って移動する方法が知りたいです。

こんなお悩みを解決します。

本記事では
HTML5でページ内をリンクでジャンプする方法を解説します。

ページ内リンクを実装すると
目次やジャンプボタンを作るのに役立ちます。

✔︎本記事の内容

  • ページ内リンクの実装方法
  • ヘッダー固定時のズレの解決方法

ページ内リンクの実装方法を解説【簡単です】

簡単なので
すぐに実装できます。

ザックリとしたイメージ

実際に
下記をクリックしてみましょう。

ここをクリック!

ここにジャンプします!

問題なくジャンプできましたね。

こんな感じで
リンクをクリックすると好きなところにページ内ジャンプできます。

手順1:ジャンプ先にid名を指定する

先の例を使って、解説します。

<p id="example">ここにジャンプします!</p>

飛びたい位置にid名を指定しましょう。
ポイントは、#をつけないことです。

これはpタグですが
divタグでも見出しタグでもオッケーです。

WordPressなら、編集画面右上の「ビジュアル」と「テキスト」の箇所を「テキスト」に合わせると、コードを入力できるようになります。

手順2:リンクでジャンプボタンを作る

aタグでリンクを作ります。

<a href="#example">ここをクリック!</a>

このように、URLの代わりに
href=”#ジャンプ先のid名”というふうにします。

ポイントは、#をつけることです。

id名をつける際の注意点

注意点をあげておきます。

  • 同じid名はページに1回まで
  • 半角英数字、ハイフン( – )、アンダーバー( _ )、ピリオド( . )、コロン( : )のみ
  • アルファベットで始める(数字や記号で始めない)

ヘッダー固定時のズレを解決する方法【CSSで簡単に解決】

よくありがちなのが
position: fixedでヘッダーを固定している時。

ページ内リンクを作ると
ジャンプ先にズレが生じてしまいます。

固定されたヘッダーの裏側のジャンプ先に飛ぶからです。

解決法は下記のとおり。

#id名 {

 padding-top: headerのpx;

 margin-top: -headerのpx;

}

id名に対し、padding-topとmargin-topでheaderの高さ分を相殺します。

javascriptでも実装できるのですが
ちょいとむずかしいので別の機会にします。

ページ内にジャンプできると
ユーザービリティの向上にも繋がるので

ぜひ知っておきたいポイントです。

コーディングができるとブログも楽しくなりますね。
というわけで、今回はここまで。