【CSS2行で解決】ページ内リンクで位置がズレる・ヘッダーとカブる【HTML】

コーディング
スポンサーリンク

ページ内リンクのやり方(idをつける)

例えば、こんな感じでヘッダーにidでページ内を付けて、「ヘッダーのリンクを押すと下のコンテンツに移動する」というページがあったとします。

 

下のコンテンツのHTML

リンクを飛ばしたい先にidを付けます。
h2に飛ばしたいので今回はh2に「id=”link1″」。

 

ヘッダーのHTML

リンクを飛ばす先をaタグで記載します。

 

タイトルがヘッダーとカブる・・・

これでリンクを押せばページ内移動ができるのですが、このままだと・・・

このようにヘッダーとh2のタイトルがカブってしまいます。

 

CSSだけで解決する方法

なぜこのようなことが起こってしまうのかというと、h2の上の余白がないからです。
しかし、ただpadding-topなどとつけると、ページ内リンクした時には良いですが、普通にみるとh2タイトルの上の余白がありすぎな変なレイアウトになってしまいます。

しかしそれにネガティブマージンをつけることで解消できます。

 

上の本文とカブってしまってて見にくいですが、照準を合わせたいh2のタイトル部分にはちょうどいい具合に余白が入っていますね。

 
少しでも参考になれば幸いです。

コメント

タイトルとURLをコピーしました