---
title: "固定ヘッダーでスクロール位置がずれる問題をAI生成HTMLで防ぐプロンプト"
description: "AIで生成したHTMLに固定ヘッダーを使うとアンカースクロールがずれる問題を、プロンプトの書き方で予防したいと考えているエンジニア・ノーコードユーザー向けの解説記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/fixed-scroll-offset-ai-prompt"
markdown: "https://giga-site.com/articles/fixed-scroll-offset-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 固定ヘッダーでスクロール位置がずれる問題をAI生成HTMLで防ぐプロンプト
AIにHTMLを生成させると、固定ヘッダーとアンカーリンクの組み合わせでスクロール位置がずれるバグが無指示では入り込みやすいです。プロンプトに数行追加するだけでAIが適切なオフセット処理を含めたコードを出力するようになります。
> Source HTML: https://giga-site.com/articles/fixed-scroll-offset-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
AIへの指示に「ヘッダーを固定する」とだけ書いた場合、CSSにposition: fixedは設定されますが、それによって生じるアンカースクロールのオフセット問題まで自動で解決してくれません。AIはUX上の問題を自分で発見して先回りする設計になっていないため、指示に含めなければ省略されます。
さらに、AIはコメントやアクセシビリティ対応より視覚的なデザインの再現を優先しがちです。scroll-margin-topのような「見た目には影響しないが動作に影響するCSS」は後回しになりやすく、生成コードをそのまま使うと必ずこの問題に遭遇します。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## 自分側で確認すること
AIが生成したCSSの中にscroll-margin-topが含まれているかテキスト検索で確認します。含まれていない場合、ヘッダー要素のheight値を調べてから、対象の見出し要素全体に`scroll-margin-top: [ヘッダー高さ+10]px`を追記してください。
position: stickyでヘッダーを実装している場合も同様の問題が起きます。stickyとfixedの違いはドキュメントフローから外れるか否かですが、どちらもアンカースクロールのオフセットは自動では補正されません。AIへの指示では「sticky/fixedのどちらを使う場合でもscroll-margin-topを設定すること」と書くと確実です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 相手側で確認すること
AI生成HTMLを受け取った相手が「目次クリックで見出しが隠れる」と報告してきた場合、まずどの見出しで発生しているかを聞きます。ページ先頭近くの見出しでは問題が出にくく、下部の見出しほど顕著な場合はscroll-margin-topの未設定が原因としてほぼ確定します。
相手がスクロール後にページを少し上にスクロールすると見出しが見えると言っているなら、scroll-margin-topで必要なオフセット量がわかります。見えるようになるまでスクロールした距離がヘッダーの高さとほぼ一致するはずです。この数値を確認してからCSSを修正すると一発で解決できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 再発防止の運用
AIへのプロンプトテンプレートに次の文を追加してください：「固定またはstickyのヘッダーを使う場合は、全h2・h3要素にscroll-margin-topをヘッダー高さ＋10px分設定すること。CSS変数で管理すること」。これを定型文としてClipboard拡張や入力補完に登録しておくと、毎回入力する手間が省けます。
チームで共同作業している場合は、HTML共有前のレビューチェックリストに「固定ヘッダーがある場合：アンカーリンクをすべてクリックして見出しの見え方を確認」を追加しましょう。Notionやスプレッドシートのテンプレートに記載しておくことで、担当者が変わっても確認ステップが引き継がれます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## よくある質問
### プロンプトでscroll-margin-topを指示してもAIがCSS変数を使わずハードコードする場合は？
「ヘッダー高さをCSS変数--header-heightで定義し、scroll-margin-topでその変数を参照すること。ハードコードは禁止」と禁止表現を加えると従いやすくなります。また生成後にCSS変数を使っているか検索で確認する習慣をつけてください。
### AIに修正を依頼したら余計な箇所まで変更されてしまった場合は？
「scroll-margin-topの追加だけを行い、他のCSSは一切変更しないこと」と変更範囲を明示した指示が有効です。差分が小さいほどレビューが楽になるため、修正依頼は変更範囲を絞った指示が基本です。
### ヘッダー高さがJavaScriptで動的に変わるサイトでの対処法は？
JavaScriptでheader要素のoffsetHeightを取得し、CSS変数としてdocument.documentElement.style.setPropertyで更新する方法が有効です。スクロールイベントでヘッダーが縮む設定のある場合は、縮んだ後の高さをベースに設定してください。
## 関連記事
- [固定ヘッダーでスクロール位置がずれるときの原因と直し方](https://giga-site.com/articles/fixed-scroll-offset-fix/index.md)
- [固定ヘッダーでスクロール位置がずれるときに共有前に確認するチェックリスト](https://giga-site.com/articles/fixed-scroll-offset-checklist/index.md)
- [固定ヘッダーでスクロール位置がずれるときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/fixed-scroll-offset-request-message/index.md)
- [iPhoneだけ横スクロールする問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/iphone-horizontal-scroll-ai-prompt/index.md)
- [iPhoneだけ横スクロールするときの原因と直し方](https://giga-site.com/articles/iphone-horizontal-scroll-fix/index.md)
- [iPhoneだけ横スクロールするときに共有前に確認するチェックリスト](https://giga-site.com/articles/iphone-horizontal-scroll-checklist/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "固定ヘッダーでスクロール位置がずれる問題をAI生成HTMLで防ぐプロンプト",
"description": "AIで生成したHTMLに固定ヘッダーを使うとアンカースクロールがずれる問題を、プロンプトの書き方で予防したいと考えているエンジニア・ノーコードユーザー向けの解説記事です。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/fixed-scroll-offset-ai-prompt",
"url": "https://giga-site.com/articles/fixed-scroll-offset-ai-prompt",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "プロンプトでscroll-margin-topを指示してもAIがCSS変数を使わずハードコードする場合は？",
"acceptedAnswer": {
"@type": "Answer",
"text": "「ヘッダー高さをCSS変数--header-heightで定義し、scroll-margin-topでその変数を参照すること。ハードコードは禁止」と禁止表現を加えると従いやすくなります。また生成後にCSS変数を使っているか検索で確認する習慣をつけてください。"
}
},
{
"@type": "Question",
"name": "AIに修正を依頼したら余計な箇所まで変更されてしまった場合は？",
"acceptedAnswer": {
"@type": "Answer",
"text": "「scroll-margin-topの追加だけを行い、他のCSSは一切変更しないこと」と変更範囲を明示した指示が有効です。差分が小さいほどレビューが楽になるため、修正依頼は変更範囲を絞った指示が基本です。"
}
},
{
"@type": "Question",
"name": "ヘッダー高さがJavaScriptで動的に変わるサイトでの対処法は？",
"acceptedAnswer": {
"@type": "Answer",
"text": "JavaScriptでheader要素のoffsetHeightを取得し、CSS変数としてdocument.documentElement.style.setPropertyで更新する方法が有効です。スクロールイベントでヘッダーが縮む設定のある場合は、縮んだ後の高さをベースに設定してください。"
}
}
]
}
```