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

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

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

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

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

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

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

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

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

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

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

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

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

            

                
#contens {
                
  padding-top: 60px;
                
  margin-top: -60px
                
}
            
        

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

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

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

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

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