おはこんばにちは、ミヤビです。
ページ内リンクの実装方法が分からない人
こんなお悩みを解決します。
本記事では、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でも実装できるのですが、ちょいとむずかしいので別の機会に解説したいと思います。
ページ内にジャンプできると、ユーザービリティの向上にも繋がるので、ぜひ知っておきたいポイントです。
コーディングができるとブログも楽しくなりますね。
というわけで、今回はここまで。
