固定ヘッダーのある場合のアンカー位置ズレ問題

CSS NO IMAGE

ヘッダーを上部に固定して表示しているときに、アンカーリンクを使うと、固定ヘッダーの高さ分、記事の頭が隠れてしまうため、アンカー位置がズレているように見えます。この問題、単純なようで結構厄介なのです。

有名な方法のひとつは、CSSでターゲットになるボックスにネガティブマージンを設定し、それと同じ数値のパディングを設定する。でもこの方法、ターゲット要素が重なった場合に、リンククリックが出来ない場面があり、あまり良い方法とは言えません。

もうひとつは、JSでアンカーリンクの際にヘッダー高さ分の位置をずらすのですが、同ページ内のリンクではうまく動いても、他のページのアンカーに対しては効かないことがあったり、wordpressでは効かないことが多く、最終的な解決とは言えない感じでした。

そこで探してみたところ、CSSのtarget属性を使った方法がありました。

:target {padding-top:80px;}

この方法なら、ターゲットになったときだけ位置をずらすので、他に影響を与えることもなく、簡単です。スマホとPCで高さは異なると思いますので、それぞれメディアクエリで指定するだけ!