ヘッダー固定時のページ内リンクのズレを解消するCSSサンプル
このページは、固定ヘッダー設置時のページ内リンクのズレをCSSで調整するサンプルです。
固定ヘッダー( 50px )
ちなみにページ内リンクとは、この文章の最後にあるようなページ内を移動するリンクのことです。*1
paddingを使った方法
このリンクはpaddingプロパティを使って調整しています。ボックス要素に指定するときはネガティブマージンが必要です。*2
疑似要素を使った方法
使い勝手が良い方法です。テキストの折り返しなど注意しなくてはいけない所もあります。*3
:targetとanimationを使った方法
すべてのブラウザで機能します。*4