---
title: "iPhoneのノッチ・ホームバーに要素が隠れるときの対処（safe-area）"
description: "iPhoneのノッチやホームバーに固定ヘッダーやボタンが重なって隠れてしまうと困っている制作者向け。safe-area-insetを使って安全な余白を確保する方法と確認手順を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/iphone-notch-safe-area"
markdown: "https://giga-site.com/articles/iphone-notch-safe-area/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# iPhoneのノッチ・ホームバーに要素が隠れるときの対処（safe-area）

iPhoneで固定ヘッダーや画面下のボタンが、ノッチやホームバー(ホームインジケーター)に重なって隠れてしまう。これはコンテンツが画面の物理的な端ぎりぎりまで広がるためです。safe-area-insetを使えば、隠れない安全な余白を確保できます。

> Source HTML: https://giga-site.com/articles/iphone-notch-safe-area
> Article index: https://giga-site.com/articles/index.md

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

ノッチやパンチホール、画面下のホームバーを持つ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コードを渡すとスマホですぐ開けて便利です。

## よくある質問

### env(safe-area-inset)が効きません

viewportメタタグに viewport-fit=cover を指定していないと、env()の値が常に0になり効きません。まずこの指定があるかを確認してください。

### ノッチのない端末でも余白が入ってしまいます

ノッチのない端末ではsafe-area-insetが0になるので余分な余白は入りません。逆に通常の余白も確保したい場合は max(16px, env(safe-area-inset-bottom)) のように書くと両立できます。

### 横向きで左右が見切れます

横向きではノッチが左右に来るため、env(safe-area-inset-left) と env(safe-area-inset-right) を使って左右にも余白を確保してください。

### Androidでも同じ対処が必要ですか

パンチホールやジェスチャーナビを持つAndroid端末でも、safe-area-insetは有効に働く場合があります。env()はマルチプラットフォームで使える指定なので、両方を実機で確認するのが確実です。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [外部CDNのCSS・JSが読み込めないときの対処](https://giga-site.com/articles/external-cdn-not-loading/index.md)
- [スマホだけ表示が崩れるときの原因と直し方](https://giga-site.com/articles/broken-only-on-mobile/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "iPhoneのノッチ・ホームバーに要素が隠れるときの対処（safe-area）",
  "description": "iPhoneのノッチやホームバーに固定ヘッダーやボタンが重なって隠れてしまうと困っている制作者向け。safe-area-insetを使って安全な余白を確保する方法と確認手順を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/iphone-notch-safe-area",
  "url": "https://giga-site.com/articles/iphone-notch-safe-area",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "env(safe-area-inset)が効きません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "viewportメタタグに viewport-fit=cover を指定していないと、env()の値が常に0になり効きません。まずこの指定があるかを確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "ノッチのない端末でも余白が入ってしまいます",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ノッチのない端末ではsafe-area-insetが0になるので余分な余白は入りません。逆に通常の余白も確保したい場合は max(16px, env(safe-area-inset-bottom)) のように書くと両立できます。"
      }
    },
    {
      "@type": "Question",
      "name": "横向きで左右が見切れます",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "横向きではノッチが左右に来るため、env(safe-area-inset-left) と env(safe-area-inset-right) を使って左右にも余白を確保してください。"
      }
    },
    {
      "@type": "Question",
      "name": "Androidでも同じ対処が必要ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "パンチホールやジェスチャーナビを持つAndroid端末でも、safe-area-insetは有効に働く場合があります。env()はマルチプラットフォームで使える指定なので、両方を実機で確認するのが確実です。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```