Web blog WEBブログ

position:fixedでヘッダ固定時のページ内外リンクのズレを解消するテクニック

2019.10.23

こんにちは。コーダーの兼山です。

position:fixedを使ってヘッダを固定した場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。
これを解決する方法を紹介します。

ページ内リンクとページ外リンクの両方に対応できるテクニックも紹介します。
ぜひ、覚えておきましょう!

方法1.CSSで調整する方法

padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値を指定する方法です。
margin-topでマイナスの値を指定することをネガティブマージンと言いますが、これを利用する方法です。

例:ヘッダの高さ:50px

この方法は、ページ内リンクだけでなく、ページ外リンクにも有効です。

方法2.JavaScriptで調整する

jQueryを利用する方法です。
jQueryをダウンロードし記述することを忘れないようにしましょう。
URL:http://jquery.com/

例:ヘッダの高さ:50px

この方法は、スムーススクロールの動きもあり、よく使われる方法です。
ただ、ページ外リンクには対応できていません。

方法1、方法2、どちらの方法でも、思い通りの動きをしない場合

方法1、方法2、どちらも思い通りの動きをしないときに、行きついた方法です。
レスポンシブの場合も正常に動きますので、とても便利です。

こちらもjQueryを利用する方法です。
jQueryをダウンロードし記述することを忘れないようにしましょう。

例:ヘッダの高さ:50px

※ このデモでは、ページ外リンクを無効にしてあります。

この方法は、ページ内リンクだけでなく、ページ外リンクにも有効です。

まとめ

最近、増えている仕様です。

固定ヘッダーや固定ナビゲーションなどでサイトを制作する場合は、ページ内リンクのズレにご注意してコーディングしましょう。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口