No.521

ヘッダーなどにアンカーの位置がかかってしまうのを回避したいあなたへ

　HTMLの仕様上しょうがないのだが、アンカーへのページ内リンクを行うと、フォーカスがブラウザの最上部にあってしまう。
　フローティングヘッダなどがあると困ってしまうので、スタイルの調整で上手くやり繰りしよう。

一般的なやり方

　scroll-margin-top を使うと楽。

.クラス名 {
  scroll-margin-top: ずらす大きさ;
}

別法：ネガティブマージン

　なお、margin-top padding-top を両方設定して打ち消すという方法もある。
　ただ、これはずらした方向にある要素のクリック系イベントを阻害するというデメリットがある。

　古いブラウザでどうしようもないときだけ使うほうが良さそうだ。

.クラス名 {
  display: block;
  margin-top: -ずらす大きさ;
  padding-top: ずらす大きさ;
}