ページ内リンクの位置を微調整するためには、Negative margin を使用する

問題発生

ページ内リンクで位置調整がうまくいかない
・そこではない
・id位置丁度ではなく、もう少し上を表示して欲しい

方法は2種類

方法A.CSSで調整
・飛び先の要素に、ネガティブマージンを利用
・ちょっと思いつかなかったわ

div#hoge{

 margin-top: -30px; /* リンク位置上昇分 */

 padding-top: 30px; /* 上昇分を戻す分 */

}

・トップ以外の指定ももちろん可能

#a01 {

	padding:100px 0 0;

	margin:-100px 0 0;

}

※いついかなるときでも利用できるかは、未検証

方法B.JavaScriptで調整
・ヘッダやサイドを固定し、ページ内リンクがずれるのを回避したい

CSS対応時の注意点

予め「margin」「padding」が指定されていた場合
「レイアウトが崩れる」などの影響を受ける可能性がある

例
・「AutoAnchors jQuery Plugin」で目次自動作成
・「ページ内リンク位置」調整のためネガティブマージンを適用するも、予めpadding指定している部分を上書きしてしまい、目次レイアウトが崩れてしまっている

<style>

/*既存CSS競合対策*/

div.demo h3{

 margin-top: -50px; /* リンク位置上昇分 */

 padding-top: 50px; /* 上昇分を戻す分 */

}

</style>

「アンカーリンクごとにネガティブマージン指定」するのが若干面倒

#a01,

#a02,

#a03,

#a04 {

	padding:100px;

	margin:-100px;

}

コメント入れとかないと
・初見の人は意味不明だと思われ
・意図を忘れがち。書いた後、何のためにこうしたんだっけ？ ということに陥る率高し
・自分が書いたCSSですらそうなのに、ましてや他の人が書いたネガティブマージンなんて……
・特に、「ネガティブマージンはレイアウト崩れの元」だと思うので、注意が必要(個人的に、ネガティブマージンは、極力使わないようにしている)

廃止されたHTML要素の属性を使用している

<a> 要素 の name 属性
→ id属性へ変更

遷移先で、インライン要素を使用している

対応案a.CSSでブロック要素へ変更する

<style>

  #a1{

    margin-top: -1rem; /* リンク位置上昇分 */

    padding-top: 1rem; /* 上昇分を戻す分 */

    display:block;

  }

</style>

対応案b.HTMLをブロック要素へ変更する