【CSS】ページ内リンク(アンカーリンク)の位置がズレる、CSSで調整する

【CSS】ページ内リンク(アンカーリンク)の位置がズレる、CSSで調整する
あのー、CSSだけで調整できますかー?
CSSだけでも調整できますよー

固定ヘッダーで隠れる(ズレる)

こんな感じでズレてます。

See the Pen ページ内リンク(アンカーリンク)の位置がズレる(固定ヘッダーで隠れる) by 125naroom (@125naroom) on CodePen.

CSSで調整する

うーん、jQuery(JS)を修正するのは、ちょっと。。
と言う時には、CSSで調整できます。
(レスポンシブには向いてないかなと思いますが。。)

See the Pen ページ内リンク(アンカーリンク)の位置がズレる(固定ヘッダーで隠れる)、CSSで調整する by 125naroom (@125naroom) on CodePen.

CSSはこちら

CSS

#a_1, #a_2, #a_3, #a_4, #a_5, #a_6, #m_01 {
  padding-top: 100px;
  margin-top:-100px;
}

jQueryで調整するほうがベストです

さいごに

ぴったりですー
どうしてもjQuery(JS)を修正できない時にはおすすめですー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)