固定ヘッダー分コンテンツを下げる

解説

画面上部に固定した position: fixed のヘッダーは、ページの先頭コンテンツに重なって隠してしまいがちです。この CSS は、ヘッダーの高さを --header-h という変数で一元管理し、その同じ値を本文側の padding-top に当てることで、コンテンツが常にヘッダーのちょうど下から始まるようにします。高さを一カ所で持つので、ヘッダーの高さを変えても本文の余白が自動でついてきて、ずれが起きません。

こんなときに必要

• スクロールしても上に残るグローバルナビを置いているサイト全般
• ヘッダーの高さを PC とスマホで変える場合に、余白も連動させたいとき

調整は :root に書いた --header-h の値を変えるだけで、ヘッダー自身の高さと本文の余白の両方に反映されます。注意点として、ページ内リンクで見出しへ飛ぶとき、固定ヘッダーに飛び先が隠れることがあります。その場合は飛び先の要素に scroll-margin-top を同じ変数で指定しておくと、見出しがヘッダーの下にきれいに止まり、読みやすくなります。