全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
position:fixedでヘッダ固定時のページ内外リンクのズレを解消するテクニック
2019.10.23
※この記事は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
※ このデモでは、ページ外リンクを無効にしてあります。
この方法は、ページ内リンクだけでなく、ページ外リンクにも有効です。
まとめ
最近、増えている仕様です。
固定ヘッダーや固定ナビゲーションなどでサイトを制作する場合は、ページ内リンクのズレにご注意してコーディングしましょう。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
