【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さんの
おすすめ

11

/

21

2024

Googleさんの
おすすめ

11

/

21

2024

デザインの記事

水色デザイン
映画『アット・ザ・ベンチ』
【jQuery】スライダープラグイン「slick」実装サンプル集