ウェブサイト作成

【ホームページ作成:CSS】ヘッダーを固定すると、ページアンカーがずれる問題を簡単に解決するCSS(スタイルシート)!

CSS(スタイルシート)のお話。

【ホームページ作成:CSS】CSSでヘッダーを固定するのが流行り?

おっさん、こんばんは。
パソコン向けのサイトを作成しているんだけど、ヘッダーメニューは固定にしてさ、下にスクロールをしても常にヘッダーメニューが表示されている方が今風だよね?w

ヘッダーをCSS(fixed)で固定しているサイト多いね!

そうだよね。
ヘッダーメニューをCSSで(fixed)固定し、そのページ内にいくつかアンカーをつけたのよ。
ヘッダーメニューをクリックすると、ページ内のアンカーの位置に移行することは出来るんだけど、ヘッダーを固定した分だけ表示される位置がズレるんだよねー。

【ホームページ作成:CSS】CSS「scroll-padding」を使えば、ページ内アンカーのズレを即解決!

CSSに

html {
  scroll-padding-top: 70px; /* ←固定ヘッダの高さ分の数値にする */
}

を記述するだけで、ヘッダー固定によるページ内アンカーのズレを解決できるよw

たったこれだけでw

インターネットブラウザで動作確認を行ったけど、Edgeは対応していなかった。google chrome、Firefoxは対応していたよ。

ヘッダー固定でページアンカーがずれるのを調整する方法は、jQueryを使ったりいろいろあるけどこれが一番簡単だねw

そうだね。それではおやすみなさい。

おやすみw

-ウェブサイト作成
-, , , , ,

Copyright© メモとるドットコム , 2021 All Rights Reserved Powered by AFFINGER5.