今回はHTML/CSSでアンカーリンクを付けたが、ジャンプの着地地点が若干ずれてしまう場合の修正の仕方を紹介します。
以下のリンクはアンカーリンクの着地地点が意図した場所からズレてしまっているバージョンです。
（本来は上部にもう少し余白があって欲しい）
反対に以下のリンクは十分な要白があり意図した場所に綺麗に着地するバージョンです。
この様に意図した着地地点にする調整方法を紹介します。
アンカーリンクの着地地点がズレる時の対象法
アンカーリンクの着地地点を調整するにはスタイルシートを使ってpadding-topで位置を調整して、ズレた分margin-top（マイナス）で元に戻すといった方法を使用します。
実際の書き方は以下のとおりです。
.anchor2{
padding-top: 100px; /*上に余白を付ける*/
margin-top: -100px; /*上の余白を打ち消す*/
}
アンカーリンクぴったりすぎるバージョンの着地場所
説明中に失礼します。。。↑この辺に1個目のアンカー着地地点を設置しときます。
解説
解説します。
以下はアンカーリンクの着地点にしている要素にpaddingを付けた時のイメージです。
今回の様にpadding-top: 100px;を指示すれば、この様に上部に余白が出来ます。
この時に既に着地地点の調整自体は出来ています。
しかしこのままだと上部に余計な余白が出来てしまい見栄えが悪いので次の調整をします。
以下は先ほどのpaddingに加えてmarginをマイナスした時のイメージです。
今回の場合はpaddingで100px動かしたので、同じ値マイナスします。
なのでmargin-top:-100px;となります。
アンカーリンクの着地はdiv要素の中央に来るので、その特性を利用して中央位置をズラしています。
なので今回の様に100px上に要素を拡大させて中央位置をズラしてから、100px位置を戻すと中央位置だけがズレて、アンカー着地地点が調整された様に見えるのです。
「？？？」って方は、理屈は理解出来なくても全然大丈夫です。
paddingで余白を増やして、増やした分marginで打ち消すと覚えておいて下さい。
以上が「アンカーリンクでジャンプした時の着地がずれる場合の解決法」でした。
この辺に修正したバージョンのアンカーリンク着地点を設置しておきます。
少しだけ余白が出来ていると思います。
アンカーリンク意図した着地地点
