2026年・静的HTMLヒーロー向け CSS 動的ビューポート単位：dvh、svh、lvh、モバイル Safari のクロム、クラウド Mac mini での WebKit QA

静的ランディングは今でも全面ヒーローに min-height:100vh を載せがちだが、iOS の Safari は URL バーが畳まれるときに「1ビューポート」の意味を現実の塗りつぶし領域とズラす。見出しが およそ40〜120px 欠ける、デモ動画がホームインジケータに隠れる、主要CTAが意図せぬスクロールのあとでしか見えない、といった事故が続く。2026年、CSS は 動的ビューポート単位——dvh、svh、lvh——を用意し、今見えている ブラウザUIに追従する。本稿は Chromium エミュレーションだけでなく MPA でも再現可能な WebKit レーンを欲するチーム向けだ。併読として 固定ヘッダとハッシュの scroll-padding、モーダルと overscroll-behavior、レスポンシブ画像と LCP を揃え、スクロール・レイアウト・メディア方針の一貫性を取りにいこう。

単位の意思決定表、段階的な @supports スタック、そしてレビューで数字として残せるガードレール（マーケヒーロー既定は 100dvh、ノッチ機の下インセットはしばしば 34px 前後、ロケールごとの実機QAは 45分 目安）を持ち帰れる。

日本市場では「スマホ最優先のキャンペーンLP」を短納期で切るケースが多く、検証がデスクトップ中心に偏りやすい。動的単位はそのギャップをCSS側で埋めるが、同時に「安全域」「固定ナビ」「画像寸法」など隣接トピックもセットで見ないと、別のCLSやアクセシビリティ問題が表面化する点に注意したい。

モバイル Safari で 100vh が壊れる理由

古典的 vh は ラージビューポート（UIが最大限隠れたときの高さ）基準だ。モバイル Safari はスクロールに合わせて上部URLフィールドと下部ツールバーをアニメーションさせるため、実際に塗れる領域は参照単位より大幅に小さくなる。デスクトップ Chrome のレスポンシブモードは同じUI遷移曲線を再現しないので、エミュのみのチームは「経営陣のiPhone」で初めて出る回帰を量産しがちだ。

失敗の本質は「Safariが悪い」ではなく、vh が2012年のレイアウトビューポート命題に答えていたのに対し、2026年 のプロダクトは「今ユーザーが見えている高さ」に合わせたい、という期待値が変わった、という話だ。動的単位はそれをJSの resize リスナーなしで埋め、合成スクロールと争わず、長いマーケページのバッテリ負荷も抑えられる。

補足として、window.innerHeight を併用すると真実の源泉が二重化し、ツールバー遷移の境目で1フレームだけズレることがある。静的サイトほど「CSSに寄せる」ほど運用が楽になる。

dvh と svh、lvh の判断表

dvh は可視高さがツールバー表示で変わるたびに追従する。svh は最小クロム構成にロックされ、URLバーの下にCTAが潜らない保証が欲しいときに強い。lvh は旧来の vh に近い。横方向は dvw、svw、lvw があり、ノッチ左右にはみ出すカルーセルで効いてくる。

単位	向く用途	誤用リスク
100dvh	全画面ヒーロー、スプラッシュ	スクロール中の微妙な高さ変化で背景動画が動いて見える
100svh	ファーストビュー保証、プロモバー	UIが隠れると余白が増える
100lvh	レガシー互換、デスクトップ帯	iOSでは古典 vh と同種の切り抜けが残る
calc(100dvh - 4rem)	固定ナビ分を引いたヒーロー	env(safe-area-inset-*) を忘れるとノッチで破綻

マーケヒーローは原則 min-height:100dvh。法務バナーのように「URLバー展開時も必ず見える」アートディレクションなら svh を検討する。

背景が写真なら動的変化は許容されやすいが、構図固定の動画なら object-fit:cover と安全マージン、あるいは svh でファーストビューをロックするなど、表現要件に合わせた落とし所が必要になる。

静的HTMLのヒーローパターン

厳密な height より min-height を優先し、翻訳で見出しが伸びてもディセンダーが欠けないようにする。中央寄せはflexでよいが、ヒーロー内にスクロールを閉じ込めるのは overscroll-behavior を検証済みの場合に限る。背景動画はコンテナを dvh で決め、メディアに object-fit:cover を当てて LCP の帰属を歪めない。

左右分割（左コピー、右モック）ではモックを max-height:70dvh に抑え、横向きスマホでCTAが画面外に落ちないようにする。タイポは clamp() で動的ボックス内に収め、JSに頼らない。

ヒーロー内にサブリンク列やロゴ帯を足す場合は折りたたみや優先度設計が必要。小画面では「全画面高」を奪う要素がCTA可視性を直撃する。

セーフエリアと固定フッター

動的単位は箱の寸法であり、env(safe-area-inset-top) / env(safe-area-inset-bottom) の代替ではない。固定購入バーは例えば次のように書く：

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

iPhone 15クラスでは下インセットが 34px 前後に乗りがちで、16px だけではボタンが欠ける。ノッチ裏まで描くなら viewport meta に viewport-fit=cover を付ける。無いと env が 0 に見えてもハードウェア指示域は残る、という齟齬が起きる。

タップ領域とフォーカスリングの視認性も合わせて確認し、VoiceOver で「画面下端に押し出される」体感が出ないかを見る。

@supports による漸進強化

.hero {
  min-height: 100vh;
}
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
}
@supports (height: 100dvh) {
  .hero { min-height: 100dvh; }
}

この順序で古いWebKitへ段階的に落とす。クリティカルCSSをインラインするパイプラインなら、スタック全体が初回 14KB gzip 予算に収まるかも監査対象だ。

デザイントークン生成CSSでは、この段落を「削ってよい任意スタイル」扱いにしないこと。ヒーローは常に折り返し直上にある。

2026年時点の WebKit 注意点

macOS Safari の非フルスクリーンでは動的単位が可視コンテンツ矩形にマップされ、iOS と 8〜12px 級の差が出ることがある。両OSでスクショを残す。100dvh がツールバー遷移で変わるタイミングでは background-attachment:fixed を避ける。パララックス系はメインスレッド再描画を誘発し、ベースMチップ高負荷で 55fps を割りやすい。

dvh サイズのヒーロー内スティッキーは単位変化で「跳ねる」ように見える。スティッキーナビはルート側へ、装飾背景だけ dvh に寄せると安定しやすい。

svh プロモと dvh ヒーローを併用する場合は回転や iPad 分割で組み合わせ破綻が出やすい。スマホ幅だけのデザインカンプでは見逃されるので、実機の幅パターンを増やしたい。

実機チェックリスト

1. URLバー展開状態で読み込み、主要CTAがスクロール無しで見えるか。
2. 120px ほどスクロールし、ツールバー収束で法的文言が隠れないか。
3. 横向きで svh プロモがホームインジケータを避けるか。
4. VoiceOver で固定フッターを巡回し、下パディングがフォーカスを画面外に追いやらないか。
5. 安定版 Safari と STP でフィルムストリップ比較し、ビューポート変更の回帰を拾う。
6. 変更チケットに前後PNGを添付しデザイン承認の証跡を残す。

英語より 30% 長いロケールでは、ヒーロー検証にロケールあたり 45分 を見込む。ドイツ語やブラジル葡語はレイアウト前提を壊しやすい。

FAQ

すべての vh を dvh にすべき？

いいえ。装飾的な中段帯は vh のままでよい。全画面ヒーロー、モーダルシート、モバイルクロムと干渉する固定CTAを優先する。

Lighthouse は dvh を罰する？

ラボはヒーロー内画像に寸法が無いとレイアウトシフトを報告し得る。動的単位は width/height 属性の代替ではない。

JS の innerHeight と混ぜてよい？

避けたい。二重の真実とリスナー起因のジャンクを再導入する。@supports 付きのCSS動的単位を優先する。

MacHTML で Apple Silicon Mac mini を借りると、現場の利害関係者と同じ WebKit を手に入れられる。LinuxコンテナのSafariごっこではない。ノードは自動スクショdiff向けの SSH と、フレーム単位レビュー向けの VNC を用意できる。待機電力はしばしば 6〜12W で、二週間のビューポート監査を回しても、ローンチ直前のヒーロー回帰修正より安く済むことが多い。

公開価格は 1日あたり約16.9ドル。キャンペーン後に遊ぶデスク機を追加購入するより予測可能だ。QAが終わればインスタンスを止めればよく、dvh スタックはGitに残り、金属は 36ヶ月 の調達サイクルで静かに減価しない。