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