# Sticky Navでアンカーリンクが隠れる問題をインラインCSS数行でスッキリ解決する方法ドキュメント（ブログ／ウィキ／ガイド）で脚注リンクやTOC（目次）をクリックすると、`#some-id` に移動し、該当する `id` を持つ要素が**ビューポートの最上部**に揃えられます。しかし、ページ上部に `position: sticky`（または fixed）で固定されたナビゲーションバーがあると、スクロールは最上部に合わせられるものの、実際のコンテンツはナビの後ろに隠れてしまうという問題が発生します。フロントエンドではよくある課題ですが、バックエンド／フルスタックの立場からは「リンクは正しく遷移したのに内容が見えない」など、困惑する場面が多いです。ここでは、私が最も頻繁に使う **「問題が起きるページにインラインCSSを数行追加」** という手法（最もシンプルで即効）を中心に整理します。 --- ## なぜこうなるのか？ {#sec-3d359517ce38} ブラウザのデフォルト動作は次のとおりです。 * URL が `.../page#target` のように変わると * ブラウザは `id="target"` 要素を探し * その要素の開始点が **スクロールコンテナの開始（通常はビューポート上部）** に来るようにスクロールします。しかし sticky nav はビューポート上に **重なって** 描画されるため、結果として要素が nav の下に隠れてしまいます。 ![リンクの target が sticky nav によって隠れるケース画像](/media/editor_temp/6/40ce1f6f-0037-4ea2-b7e9-bf133d97b4a3.png) --- ## 最も簡単な解決策：`scroll-margin-top`（要素側に余白を与える） {#sec-1be8dffe3841} アンカーでスクロールされる「表示される」要素に `scroll-margin-top` を付与すると、ブラウザはその要素を最上部ではなく **「余白分だけ下」** に位置させようとします。 ### インラインCSSで最小限に適用（推奨） {#sec-a6247ae187d6} 問題のあるページの `` や該当ページのテンプレートに、以下のようにだけ入れても解決するケースが多いです。 ```html ``` * `--sticky-nav-h`：sticky nav の高さ * `+ 12px`：少し隠れないように余裕を持たせる（好み） > `[id]` 全体に適用すると「このページでアンカーで移動されるすべての対象」が自動で補正されます。 > ページ全体に広く適用するのが負担に感じる場合は、以下のように対象範囲を絞るとよいです。 ### 範囲を絞ってより安全に {#sec-a361296aa6ac} 例：本文領域のみに適用 ```html ``` 例：TOC が主に `h2/h3` へ移動する場合 ```html ``` --- ## さらに便利なオプション：`scroll-padding-top`（コンテナ側のデフォルトパディング） {#sec-649a0cca0b38} `scroll-padding-top` は「スクロールスナップ／フラグメント移動」などで、スクロールコンテナが **上部の安全領域** を持つようにヒントを与えます。実務では `scroll-margin-top` の方が直感的ですが、組み合わせておくとレイアウトに応じて安定性が向上するケースがあります。 ```html ``` * ページ単位で「全アンカー移動補正」を素早く行いたいときに便利です。 * ただし「特定の要素だけ」を細かく制御したい場合は `scroll-margin-top` の方が扱いやすいです。 --- ## レガシー／互換性用の古典的トリック：`::before` で擬似オフセットを作る {#sec-70f2c4a21286} 昔から使われている手法です。アンカーターゲット要素の前に見えないブロックを作り、実際の位置を nav の下に下げます。 ```html ``` 使用例： ```html

설치

``` * 長所：古い方式なので「原理上」確実に動く * 短所：クラス付与が必要で、要素選択／構造を少し気にする必要がある最近はまず `scroll-margin-top` を試し、特定環境でうまくいかない場合に `::before` トリックを検討する流れがスッキリします。 --- ## JS でも解決可能だが、**「ページ単位のインライン CSS」** が勝るケース {#sec-7bd39bacd041} もちろん JavaScript で `scrollIntoView()` 後に `window.scrollBy(0, -navHeight)` などで補正することもできます。しかしこの場合は CSS の方が優れています。 * 文書／静的コンテンツページ（脚注／TOC が多いページ） * フレームワーク／ルーティングレベルを変更せずに「そのページだけ」を素早く解決したいとき * メンテナが FE 専門ではない可能性が高いときインライン ` ``` これで TOC／脚注／ディープリンクまで一括で解決できるケースがほとんどです。リンクが nav の後ろに隠れる問題を解決したい開発者の方に、ぜひ参考にしていただければと思います。 --- **関連記事** - [画像タグに width と height を明示する理由と効果](/ko/whitedec/2025/12/24/why-specified-width-height-in-img-tag/) - [バックエンドエンジニアでも最低この程度は知っておくべき - フロントエンド JS メソッド、モジュール Best 5](/ko/whitedec/2025/11/23/backend-engineer-minimum-frontend-js-methods-modules-best-5/)