【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でも実装できるのですが、ちょいとむずかしいので別の機会に解説したいと思います。

 

ページ内にジャンプできると、ユーザービリティの向上にも繋がるので、ぜひ知っておきたいポイントです。

 

コーディングができるとブログも楽しくなりますね。

 

というわけで、今回はここまで。