ヘッダー固定時のページ内リンクのズレを解消するCSSサンプル

このページは、固定ヘッダー設置時のページ内リンクのズレをCSSで調整するサンプルです。

固定ヘッダー（ 50px ）

ちなみにページ内リンクとは、この文章の最後にあるようなページ内を移動するリンクのことです。*1

paddingを使った方法

このリンクはpaddingプロパティを使って調整しています。ボックス要素に指定するときはネガティブマージンが必要です。*2

使い勝手が良い方法です。テキストの折り返しなど注意しなくてはいけない所もあります。*3

すべてのブラウザで機能します。*4

*1:このリンクは機能しません。

*2:ただし、要素の範囲が上に被ります。

*3:ただし、Firefoxでは機能しません。

*4:あらゆるデザインや要素に設定できるため、幅広く使えます。ただし、targetや animation に対応していない古いブラウザでは機能しません。