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

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

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

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

✔︎本記事の内容

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

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

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

ザックリとしたイメージ

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

ここをクリック！

ここにジャンプします！

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

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

手順１：ジャンプ先にid名を指定する

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

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

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

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

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

手順２：リンクでジャンプボタンを作る

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

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

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

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

id名をつける際の注意点

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

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

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

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

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

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

解決法は下記のとおり。

#id名 {

　padding-top: headerのpx;

　margin-top: -headerのpx;

}

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

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

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

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

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