長文の静的ページにはだいたい高さ56pxから72pxの固定トップナビがあり、上に細い告知帯が重なることも珍しくありません。読者が#pricingや自動生成の目次リンクを踏むと、ブラウザは見出しをスクロールポートの上端へぴったり合わせます。固定配置のクロムは通常フローから外れるためその領域を縮めないので、最初の一行がバーに隠れて読めなくなります。2026年現在、スクロールコンテナ側のscroll-padding-*とターゲット側のscroll-margin-*の組が、仮想キーボードやスナップスクロール、文書間ビュー遷移の下でも壊れにくい解法です。本稿は実用的な数値、scroll-behavior: smoothとの関係、Safari/WebKitの現場メモ、CSSアンカー位置指定で層が重なるケース、View Transitions API併用の静的MPAでの退行テストまでまとめます。
料金の話を添えると、Safari Technology Preview・安定版Safari・iOS WebViewの挙動差をまとめて確かめるには、シミュレータ農場よりMacHTMLで借りたMac mini（およそ一日16.9米ドル）の方が速いことが多いです。ネイティブWebKitとApple Siliconの余裕が同じ筐体に乗るので、ピクセル差分やアクセシビリティインスペクタの往復が軽くなります。
固定ヘッダーが食う理由
ネイティブのハッシュ遷移は、ターゲットのボーダーボックスがスクロールポートの最適視野原点に来る位置へスクロールを計算します。不透明な64pxバーが乗っていると、<h2 id="faq">のタイトル文字がその真下に潜ります。マーケチームが最初に騒ぐのはヒーローや料金表へメールキャンペーンからアンカーCTAを飛ばすパターンです。
昔は不可視スペーサを差し込んだり、scrollIntoView({block:'start'})の直後にwindow.scrollBy(0, -64)を叩きました。仮想キーボード、スナップ、文書間ビュー遷移の組では壊れやすく、CSS優先の方が長持ちします。
html・body・内側スクローラへのscroll-padding
scroll-padding-topはスクロールポート内でスナップやスクロールターゲット操作の揃え位置へオフセットを与えます。文書レベルなら次のように置きます。
html {
scroll-behavior: smooth;
scroll-padding-top: 4.5rem; /* ナビ3.5rem + 視覚的な息継ぎ */
}モバイルでクッキーバナーが下に張り付くならscroll-padding-bottomも。値の目安はenv(safe-area-inset-bottom) + 56px前後で、ホームインジケータ端末の脚注アンカーが下バーに隠れにくくなります。
ドキュメントサイトが<main class="docs">のoverflow: autoだけをスクロールさせるなら、htmlではなくその要素へscroll-padding-topを移します。断片URLの最寄りスクロールコンテナが内側にあるのにpaddingを忘れると、「MDNの例では動くのに自前レイアウトでは動かない」典型原因になります。
見出しとカードへのscroll-margin
行き先idのscroll-margin-topは、スクロール揃えに使う論理マージンボックスを広げ、通常レイアウトはほぼ変えません。リンクされうるh2、h3、FAQ行すべてへ当てます。
.article-content h2[id],
.article-content h3[id] {
scroll-margin-top: 5rem;
}見出しがパディング付きカードの内側にあるならidは外側ラッパへ寄せ、ネストしたスティッキーサイドバーがあっても余白が足りるよう分配します。実務の慣例は、グローバルクロムはscroll-padding、アコーディオンが一時的に高さを増やすような局所部品はscroll-margin、の分担です。
積み上がるスティッキーとsafe-area env()
物理長とmax()を組み合わせ、回転端末でも安全域を踏みはずしません。
html {
scroll-padding-top: max(4.5rem, env(safe-area-inset-top));
}top: 4remに張り付く章リールがあるなら、その下の節idへさらに2.5rem前後を足さないと、ナビ後にスティッキーが被さって小見出しが読めなくなります。
スムーススクロールとprefers-reduced-motion
全体scroll-behavior: smoothは気持ちよさと引き換えに前庭過敏の利用者を苦しめます。メディアクエリで包みます。
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}スムースを切ってもpaddingは効きます。Safariのアクセシビリティインスペクタで縮小モーション設定の実効を確認してください。WebKitは2025〜2026のポイントリリースでユーザー設定尊重の挙動を更新してきました。
2026年Safari/WebKitメモ
WebKitは断片スクロールでscroll-paddingを概ね尊重しますが、ネストしたposition: stickyの山は実機確認が要ります。スクロールパネル内のスティッキーテーブルヘッダがあると、パネル内アンカーへ追加のscroll-margin-topが要ることがあります。プライベートブラウズでは拡張が擬似ツールバーを足し、有効ビューポート高が最大48px変わる構成もあります。
@supports (scroll-padding-top: 1px)はJavaScript退避をゲートする用途だけに。2026年気にすべきEvergreen Safariはこれらをサポートするので、polyfillより視覚回帰テストへ工数を寄せた方が得です。
padding対marginの判断表
| 状況 | 推奨 | 理由 |
|---|---|---|
| 単一の固定グローバルナビ | htmlへscroll-padding-top | ページ内リンクを一つのノブで調整 |
| 複数サイトで再利用する見出しコンポーネント | 見出しクラスへscroll-margin-top | ブランド毎にナビ高が違っても持ち運びやすい |
| 内側ドキュメントスクローラ | スクローラ要素へscroll-padding | overflowコンテナが断片の最寄りになる |
| id近傍のアンカー配置ポップオーバー | 両方を併用 | 重なりが動いても文字の可読域を残す |
静的HTML出荷前チェックリスト
- DevToolsのデバイスモードで幅320px、768px、1280pxの固定ヘッダ高を実測する。
scroll-padding-topを実測値に光学ギャップ12pxを足した値にする。- 公開アンカーidすべて—法務節を含む—へ
scroll-margin-topを付ける。 - 目次の最初と最後の節を踏む。末尾は下バーと衝突しやすい。
- MPAでビュー遷移を有効化したら再計測する。
磨かれた静的サイトは明快さが命です。見出しをクロムの陰に隠してはいけません。MacHTMLのMac mini（およそ一日16.9米ドル）はネイティブSafariとApple Silicon性能を同時に持ち、CSSのスクロール揃えを反復し、ピクセル差分を撮り、マーケオーバーレイやスティッキーレールがあっても脆いJavaScript無しで出荷できるかを確かめるのに向きます。
クラウドMac miniでSafariのスクロール揃えをサインオフ
scroll-padding、スティッキー積層、縮小モーション設定を長文静的ページを公開する前にmacOS実機で固めます。