datsukan blog
💨

ページ内ジャンプで上部にスペース(マージン)を設定するCSS

この記事は投稿してから1年以上が経過しています。

やりたいこと

ヘッダーなどの要素のidをhttps://hoge/#idの値などのリンクで指定すると、ページ内ジャンプします。
その際、ジャンプ先の要素の上部にスペースが全く無いと少し見づらいため、CSSでスペースを設定しようとするものです。
ググると::before::afterといった疑似要素を使ってスペースを追加するやり方もありますが、それよりもっと簡単な方法を探しました。

結論

scroll-margin-topでスペースを設定できます。
20pxとしている箇所は任意で設定してください。

hoge {
  scroll-margin-top: 20px;
}

ヘッダータグに適用する

h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: 20px;
}

指定したClassに適用する

.section {
  scroll-margin-top: 20px;
}

TailwindCSSで指定する場合

要素のclassに直接適用する

<div class="scroll-mt-5">
  ~~~
</div>

CSSで@applyを用いて適用する

h1, h2, h3, h4, h5, h6 {
  @apply scroll-mt-5;
}

コメント
 
URLをコピーしました
Profile picture
datsukan

24歳。埼玉県在住。東京都のSaaS企業でバックエンドエンジニアとして勤務しています。

© 2022 datsukan