• 最終更新日
  • CSS

ヘッダー固定時にページ内リンクがズレる!解消の方法とズレる原因をご紹介

最近では僕もヘッダーを上部に固定する事が多いので、この設定も良くおこないます。ただ、記述方法をすぐに忘れちゃうんですよね~、「どっちやったっけ?」って(笑)。

今回はヘッダーを「position:fixed;」で上部に固定した時、ページ内リンクで飛んだリンク先の表示がズレてしまう問題を解消します。

調整自体は簡単なんですぐに覚えられると思います。僕みたいにすぐ忘れる方は設定する度に確認してもらえればと思います。

ヘッダー固定時のページ内リンクを調整する

そもそも「ページ内リンクがズレる」と言っていますが、症状としてはリンク先がヘッダーに隠れてしまうという事です。

じゃあ、なぜヘッダーが邪魔になってリンク先が隠れてしまうかというと、「position:fixed;」を付けた事によってヘッダーは高さを失ってしまうからです。

ホームページを制作したことがある方なら感覚的にわかると思いますが、はじめての方は「高さを失う」と言われてもピンとこないですよね?「いやいや、ヘッダーの高さあるやん!」ってなります。

確かに見た目はちゃんと高さの指定がされているからヘッダーの中身が見れるんですが、ここで言う「高さ」というのは次の要素に対するヘッダーの高さです。

文字だけじゃわかりにくいので下に表示する要素をご覧ください。

header
contents

まずこの状態が「position:fixed;」を付けていないノーマルな状態です。各要素の説明をすると高さ60pxの「header」の下に高さ200pxの「contents」があります。

さらに「contents」は上部に余白を20pxとっています。通常であればこのように「header」要素の次に「contents」要素が下に並んで表示されます。

では次に「position:fixed;」を付けたらどうなるかをご確認ください。

header
contents

するとこうなります。「header」の高さを無視して「contens」要素が上に詰まってしまいました。これが「高さを失う」という事です。

この状態になると「contents」の一部が「header」に隠れてしまいます。なのでこの症状を直すのが今回のテーマですね。

と言っても、ページ内リンクのズレを解消するための記述はめちゃめちゃ簡単です。

            
  1. #contens {
  2.   padding-top: 60px;
  3.   margin-top: -60px
  4. }

ページ内リンクさせる要素に「padding-top」と「margin-top」の2点を指定するんですが、「margin-top」の値には「-(マイナス)」を付けます。

上記の数値は、チェピレアのヘッダーが「60px」なのでこうしているだけです。使用される際にはご自身のヘッダーの高さに変更してお使いください。

表示を確認して頂くためにこちらのボタンをクリックしてみてください。「ヘッダー固定時のページ内リンクを調整する」のタイトル部分へ移動します。

飛んでもらうとちゃんと「ヘッダー固定時のページ内リンクを調整する」という文字が見れますね。この設定がないとタイトルの文字はヘッダーに隠れて見えなくなってしまいます。

設定は簡単なんですけど「-」ってどっちに付けるんやったっけ~?ってなるので、忘れた頃にまた見てください(笑)。

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ!
Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。