HTML
CSS

固定トップメニューでアンカー位置を揃える

More than 1 year has passed since last update.

position: fixed で固定ヘッダを置くデザインは未だによく使われるけれど、これをやるとハッシュアンカーでページのスクロールトップが固定ヘッダの裏側に行ってしまい、位置がズレる。

これをあまり難しくならずに解決するのに、 a タグへスタイルを当てると楽だった。

/* 固定ヘッダの高さが3remの場合 */

a[name] {
display: block;
padding-top: 3rem;
margin-top: -3rem;
}

bulma などCSSフレームワークで a にカーソル設定してあることがあり、そうなるとこの高さの出来たアンカーでもカーソルが pointer になってしまったりするので、一応打ち消しておくと安心。

a[name] {

cursor: auto;
}

ブラウザ次第で上手く動かなくなる可能性もあるかもだけど、今のところそういう話は聞いてません。