ある案件でトップページからアンカーリンクで別ページに飛ばした時に気づいた。
あれ？ヘッダーに隠れていると。
このサイトはヘッダーを固定させているので、アンカーで飛ばすとコンテンツはヘッダーの下に隠れてしまう。その対処法。
ネガティブマージンを使う。
ヘッダーの高さが100pxだった場合にアンカーリンク先のタイトルなどをpadding-topを100pxに設定すればいいけども、なかなかデザイン上そうもいかない。そういう場合はネガティブマージンでmargin-topを-100pxすると大丈夫っぽい。
a.anchor{
padding-top:100px;
margin-top:-100px
}
ただしこの方法はなぜ上記のように設定すると調整できるのか謎です。おそらくアンカーでリンク先に飛ぶ場合はパッディングの影響は受けるがマージンは受けないようなのでアンカーの飛ぶ位置はパッディングで調整してタイトルなどのデザイン上の位置はマージンで調整してマージンで調整してるのかな。
