アンカーリンクでジャンプした時の着地がずれる場合の解決法

Programming

今回は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で打ち消すと覚えておいて下さい。


以上が「アンカーリンクでジャンプした時の着地がずれる場合の解決法」でした。

この辺に修正したバージョンのアンカーリンク着地点を設置しておきます。
少しだけ余白が出来ていると思います。

アンカーリンク意図した着地地点

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

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