よくある原因
ページ内リンク（`<a href="#about">`など）をクリックすると、ブラウザはリンク先要素の上端をウィンドウ最上部に合わせてスクロールします。しかし固定ヘッダーがある場合、そのヘッダーが画面最上部を占有しているため、見出しがヘッダーの裏に隠れてしまいます。
目次を自動生成するJavaScriptライブラリや、AIが生成した目次コンポーネントでこの問題が顕著に出ます。ライブラリによってはoffsetオプションが提供されているにもかかわらずデフォルト値が0のため、固定ヘッダーの高さを明示的に設定しないと常にずれた状態になります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
ブラウザでHTMLを開き、目次やナビゲーションの各アンカーリンクをすべてクリックして、対応する見出しが隠れずに表示されるか確認します。特にページの先頭に近い見出しは隠れにくいため、ページ後半の見出しへのリンクを重点的に確認してください。
Chromeのアドレスバーに`#見出しのid`を付けて直接アクセスする方法でも確認できます。例えば`localhost:3000/index.html#section3`のようにURLで直接セクションにアクセスし、ページ読み込み完了時に見出しが正しく見えるかチェックしましょう。ページ内リンクのクリックとURLアクセスで挙動が異なることもあります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
相手に確認してもらう際は「目次の各項目をクリックして、クリックした項目の見出しが画面上部に正しく表示されるか見てください」と具体的な操作を伝えます。「ずれている」という感覚は人によって異なるため、「見出しが固定ヘッダーの裏に隠れていないか」という表現に言い換えると伝わりやすいです。
相手がモバイルデバイスで確認する場合、モバイル版のヘッダーはデスクトップと高さが異なることがあります。レスポンシブデザインでヘッダー高さが変わる場合、scroll-margin-topもメディアクエリで調整が必要です。相手にPCとスマホ両方で確認してもらうよう依頼してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
HTMLの共有フローに「アンカーリンク動作確認」を必須チェックとして追加します。具体的には「①固定ヘッダーの有無を確認 ②ある場合はページ内リンクの宛先すべてをクリック ③見出しが隠れていないか確認」という3ステップを手順書やNotionに記載してください。
AIへの依頼テンプレートに「固定ヘッダーを使う場合は必ずscroll-margin-topをヘッダー高さ+10pxで全見出し要素に設定すること」を定型文として追加しましょう。毎回の手動追加より、プロンプトテンプレートに埋め込む方が漏れが少なくなります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
目次リンクをクリックしたときだけずれて、URLで直接アクセスすると正しい場合は何が原因ですか？
JavaScriptのスムーススクロール実装でオフセット計算が不足している可能性があります。scrollIntoViewでなく独自のscrollToを使っている場合、offsetTopからヘッダー高さを引く処理が抜けているかどうかコードを確認してください。
固定ヘッダーの高さがレスポンシブで変わる場合、scroll-margin-topはどう設定すればよいですか？
CSS変数を使い`--header-height: 60px`と定義して`scroll-margin-top: var(--header-height)`と参照する方法が管理しやすいです。メディアクエリで変数値だけを上書きすれば、個別の要素に個別の値を書かずに済みます。
Bootstrapのnavbarを使っている場合、固定ヘッダーのオフセット設定はどこで行いますか？
BootstrapにはScrollSpyプラグインがあり、`data-bs-offset`属性でスクロール位置のオフセットを設定できます。またCSSでbody要素にpadding-topをnavbar高さ分追加する方法もよく使われます。