スクロール問題を1行で鎮圧するCSS

2025.10.27

こんにちは、WebチームのNです。最近CSSがすごく便利になってますね。
この前スクロール関連の問題に遭遇したのですが、難儀するかと思ったらCSSたった一行で解決できました。
この便利さを共有したいので、スクロール問題を1行で鎮めるCSSを紹介します。

【ページ内リンクにジャンプした時ヘッダーでコンテンツが隠れてしまう】

最近のWebページは下の方にスクロールしてもヘッダーがついてくるようになっているので、
ページ上部はヘッダーの分だけスペースを占領してるわけです。
ページ内リンクをクリックした時ブラウザはリンクが指定された要素をページの一番上に持ってくるので、
見出しにジャンプしたりするとちょうどヘッダーに隠れて見えない...ということが起きます。

▼サンプルページ。ヘッダーのメニューをクリックすると対応するセクションに飛べる。初期表示

そんな悩みを解決してくれるのがこれ
scroll-padding-top
このプロパティに設定した数値分だけページ内スクロールした時の高さがズレるので、
ヘッダーの高さ + 少々の余白をhtmlに指定すれば、
ページ内リンクをクリックした時に見出しが綺麗に表示されます！

▼HTML

▼CSS

▼設定なし：セクションBに飛んだ時、見出しBが見えない

▼設定あり：セクションBに飛んだ時、見出しBが見える

これはスクロールコンテナというスクロール専用領域に対する設定なので、
ページ内リンクをクリックした時しか反映されません。
スクロール用の指定で見出しの上に変な余白ができている...なんてこともないので
安心して使えます！
もしページ全体ではなく特定のコンテンツにだけ適用したい時は
scroll-margin-topというプロパティが使えます。