iPhoneのノッチ・ホームバーに要素が隠れるときの対処（safe-area）

なぜノッチやホームバーに隠れるのか

ノッチやパンチホール、画面下のホームバーを持つiPhoneでは、画面の表示領域が長方形ではなく一部が欠けています。Webページはこの欠けを考慮せず端まで広がるため、固定配置した要素が重なって見えなくなります。

特に position: fixed のヘッダーやフッター、画面下に貼り付けたボタンで起きやすい現象です。横向き(ランドスケープ)ではノッチが左右に来るため、左右の見切れも発生します。

全画面に近いレイアウトやviewport-fitの設定で表示領域を端まで広げているときに、この問題が顕著になります。

viewport-fitとenv()で対処する

まずHTMLのviewportメタタグに viewport-fit=cover を指定して、安全領域の情報をCSSから取得できるようにします。これがないと env() の値が常に0になり対処できません。

次にCSSの env(safe-area-inset-top) / right / bottom / left を使って、安全領域分の余白を確保します。固定ヘッダーなら padding-top に、下部ボタンなら padding-bottom に safe-area-inset を足すのが基本形です。

既存のpaddingと両立させたいときは、max() や calc() を使って「通常の余白」と「safe-area分」の大きい方を採用すると、ノッチのない端末でも見栄えを保てます。

症状別チェック表

iPhoneのノッチ・ホームバーに要素が隠れるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

対処の手順

順を追って設定すると漏れがありません。次の流れで進めてください。

1. metaタグに viewport-fit=cover を追加する
2. 固定ヘッダーに padding-top: env(safe-area-inset-top) を足す
3. 下部の固定ボタンやナビに padding-bottom: env(safe-area-inset-bottom) を足す
4. 横向き対策として left/right の safe-area-inset も必要に応じて指定する
5. max(16px, env(safe-area-inset-bottom)) のように通常余白と安全領域を両立させる

未対応・誤設定でよくあるミス

最も多いのは viewport-fit=cover を入れ忘れているケースです。これがないと env() が効かず、いくらCSSを書いても余白が入りません。

env() のフォールバック値を指定していないのも落とし穴です。env(safe-area-inset-bottom, 0px) のように第2引数で既定値を渡すと、未対応環境でも崩れません。

また、safe-areaの余白を背景色のある要素に直接paddingで足すと、ノッチ周りに想定外の色帯が出ることがあります。背景と余白の関係を実機で確認しながら調整してください。

実機での見切れ確認を依頼する

safe-areaの問題は、ノッチやホームバーを持つ実機でしか正確に再現できません。シミュレータでもある程度確認できますが、最終チェックは実機が確実です。

ギガサイト便なら修正版をドロップして共有URLを発行し、iPhoneを持つ担当者に実機で確認してもらえます。メール認証(ワンタイムコード)を付ければ、特定の確認者だけに開いてもらう運用もできます。

同じURLのまま差し替えられるので、env()の値を調整するたびにリンクを送り直さずに最新版を見てもらえます。確認依頼はQRコードを渡すとスマホですぐ開けて便利です。