アンカーリンクのジャンプ先の余白をCSSで調整する。見出し（Hタグ）上部にもう少し余白が欲しい！

アンカーリンクのジャンプ先の余白を調整する

当サイトではWordpressプラグインの「Easy Table of Contents」を使って目次を自動生成し、記事の上部に設置しています。

この目次は記事の見出し（Hタグ）からアンカーリンク（ページ内リンク）を生成するので、クリックすれば見出しまでジャンプすることが出来ます。

画面上部の余白が少し狭い…

ただこのジャンプ後の画面で、見出し上部の余白。つまり画面上部の余白が少し狭いと感じることがありました。

ということでCSSの「scroll-padding」というプロパティをhtml全体に当ててみたところ、想定通りこの余白を広くすることが出来ました。

CSSのscroll-padding:topで余白を調整する

「scroll-padding」というプロパティは、要素の周りにスクロール時のパディング（余白）を設定するものです。

初期値はautoとなっており、ブラウザに任されるようですが、これを使えばアンカーリンクのジャンプ先の余白を調整することが出来ます。

アンカーリンク用として使うのはとても簡単。
htmlかbody全体にこの「scroll-padding」を指定してあげればOKです。

今回は見出しの上部だけなのでtopの値のみを指定します。
この場合は「scroll-padding-top」というプロパティが使えます。

 style.css
//アンカーリンクの余白調整
html{
scroll-padding-top: 20px;
}

基本的にはhtml全体にスタイルを当てる形でOKだと思います。
以下のようにbodyに当てても効くはずですが…

 style.css
//px以外にemなどを使うことも可能
body{
scroll-padding-top: 1.5em;
}

scroll-paddingの設定値には、px以外にもemなどが使えます。
なので自サイトの段落幅（pタグ）に合わるとよりピッタリで綺麗に動くと思います。

動作確認

スタイルシートにコードを追記したら、キャッシュを削除して動作確認します。
念のためスーパーリロードで読み込んだ方が良いかもしれません。

scroll-padding-top: 1.5em;を設定した後、目次から見出しにジャンプしてみます。

scroll-padding-topが1.5em

すると冒頭の画像よりも画面上部に余白が出来ているのが分かります。

パソコンでも同様に余白ができる

少しわかりにくいですが、パソコンでも同様に余白ができます。

個人的にはパソコンでもスマホでも同様の余白で、綺麗に対応するためにpxではなくemなどを使って相対的に余白を指定するのが良いと思います。
とりあえず段落と同じパディングにしておけば綺麗になります・ｗ・

まとめ

アンカーリンクのジャンプ先（見出し）周辺にもう少し余白が欲しいと感じたらCSSのscroll-paddingプロパティを使えば調整することが出来ます。

今回は上部でしたが、下右左も同様に変更できます。

正直どうでも良いところかもしれませんが、"神は細部に宿る"ということで、細かい改良を重ねていってサイトを少しでも見やすいものにしたいものですね・ｗ・