チュートリアル
Claude Opus 5.5で固定ヘッダーに隠れるページ内リンクを直す
ページ内リンクにずれを加える前に、ヘッダーの占有空間と実際のスクロールコンテナーをClaude Opus 5.5に確認させます。正しいフラグメントの見出しでもナビゲーションに隠れることがあります。メニューの折り返し、告知帯、キーボードフォーカスにも対応する修正が必要です。
ページ内リンクにずれを加える前に、ヘッダーの占有空間と実際のスクロールコンテナーをClaude Opus 5.5に確認させます。正しいフラグメントの見出しでもナビゲーションに隠れることがあります。メニューの折り返し、告知帯、キーボードフォーカスにも対応する修正が必要です。
固定ヘッダーの質問は同じ症状を報告しています。コミュニティの背景情報で、あなたのページの診断ではありません。以下は計算例を含む提案で、Opusで実行した試験ではありません。
空間をどこに追加するか調べる
| 状況 | 調べるもの | 修正候補 |
|---|---|---|
| 全見出しが隠れる | スクロール容器と被覆高さ | 容器のscroll padding |
| 1つだけ余白が必要 | その対象の整列 | 対象のscroll margin |
| モバイルメニューが2行 | 実際のヘッダー占有高さ | 応答的または実測した値 |
| フォーカスした操作が隠れる | キーボード経路と全被覆 | フラグメント以外の焦点可視性 |
MDNのscroll-margin-top資料は対象のスクロール領域のオフセットを説明しています。通常の見えるマージンと混同しません。W3CのC43は被覆に対するscroll paddingを示しています。1回のジャンプ成功だけではアクセシビリティ評価の完了にはなりません。
1つの値を計算してから確認する
架空ページに高さ64 CSSピクセルの固定ナビゲーションと、その直上に32ピクセルの告知帯があるとします。占有高さ96に希望する16の間隔を加えて112ピクセルです。ナビゲーションが折り返して88なら合計136です。仮定した寸法の計算で、Panellyの測定ではありません。
横書きで文書がスクロール容器、被覆が96ピクセルと確認できた場合の出発例です。
html { scroll-padding-top: 112px; }値には間隔が含まれます。対象にも習慣的に112ピクセルのscroll marginを追加すると過剰になる場合があります。1つだけ余白が必要なら意図した追加量を選びます。パネル内の内容なら実際のスクロール要素を確認します。`html`の設定は別の容器には適用されません。
告知帯やメニューの折り返しで固定値は古くなります。重ならないレイアウト、適切な応答値、慎重に測定した共通高さを検討します。フォント読込後も試します。狭い画面を大きなヘッダーが占めるなら、値を増やし続けるより固定を解除する方がよい場合があります。
コピーできる修正依頼
公式Opusガイドと併用します。
ページ構造、計算済みスタイル、ヘッダーと告知帯の寸法、失敗するフラグメントURLを調べてください。実際のスクロール容器と対象に影響する固定・粘着要素を特定してください。
通常フローの間隔、容器のscroll padding、対象のscroll marginを分けてください。占有高さと希望の間隔を計算し、合計効果を説明せずに重複追加しないでください。メニュー折り返し、フォント読込、告知帯を閉じた状態を考慮してください。
既存IDとリンクを保つ最小の修正を提案し、可能ならネイティブナビゲーションを保持してください。画像の見栄えだけのために見出しへ強制フォーカスせず、変更する場合は目的を説明してください。
ページ内クリック、フラグメントURLの直接読込、戻る操作、TabとShift+Tab、320/390/1440 CSSピクセルでの試験を返してください。ズームと2行ヘッダーも含めてください。対象の可視性と焦点操作の可視性を別々に記録し、未観測の結果は保留にしてください。2つの利用経路を試す
まず章リンクをクリックし、同じフラグメントURLを直接開きます。フォントと画像が落ち着いてから見出し上端を調べ、戻る操作をします。既存IDを保持し保存リンクを有効にします。独自クリック処理の後だけ動く修正は直接リンク試験に合格していません。
次にTabとShift+Tabでリンクや操作を移動し、上下の被覆に焦点対象が隠れないか確認します。マウス画像からキーボード動作を推測しません。告知帯の開閉とズーム後も繰り返します。幅と状態ごとに失敗を記録し、次の修正を再現可能にします。
よくある判断
**通常のpaddingで全て直りますか。** レイアウトとスクロール整列は別に確認します。
**全ジャンプにJavaScriptが必要ですか。** 条件を満たすならネイティブリンクとCSSから始めます。
**デスクトップ1回で十分ですか。** 折り返しとズームで占有空間が変わります。
章への移動が整ったら、Panelly Studioで広告画像を作ります。移動中の動きは別の設定依存動作なので、動きを減らす表示の確認を参照できます。
