CSS safe-area-insets生成ツールとは
Safe-areaインセットは、CSSの環境変数（env）で、ノッチ、丸みを帯びた画面隅、ホームインジケーター領域、その他のディスプレイの切り欠きからコンテンツを遠ざけるのに役立ちます。モバイルWebアプリ、固定ヘッダー、スティッキーな下部バー、フルブリードレイアウトに便利です。
クイックアンサー
env(safe-area-inset-*)を使用してCSSのpadding、margin、positionオフセットルールをフォールバック値付きで生成します。これにより、最新のモバイルデバイスでノッチ、丸みを帯びた画面隅、ホームインジケーターからコンテンツを遠ざけます。
Last updated: 2026-06-11
制限事項
- Safe-areaインセット変数は、ノッチ付きモバイルデバイスや丸みを帯びた画面隅・ホームインジケーターのあるスマートフォンでのみ意味があります。デスクトップや古いモバイルブラウザはすべてのsafe-area値にゼロを返します。
- フォールバック値は必須です。フォールバックがない場合、env()変数をサポートしないブラウザはデフォルトのゼロを使用するため、コンテンツがページ端と重なる可能性があります。
- viewport-fit=coverのmetaタグがHTMLのheadに存在しないと、iOS Safariでsafe-area変数が意図した効果を発揮しません。これがないと、ページがレターボックス表示になる場合があります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- padding、margin、insetルールのうちどれを生成するか選択します。
- 特別なsafe-areaスペーシングが必要ないブラウザや画面向けにフォールバック値を設定します。
- safe-areaスペーシングを受け取るセレクタを入力します。
- meta viewportタグとCSSをページにコピーし、モバイルデバイスまたはシミュレーターでテストします。
主な用途
- 固定ヘッダーと下部バーを画面の切り欠きから遠ざける。
- モバイルWebアプリに安全なパディングを追加する。
- safe-areaスペーシング用の再利用可能なCSS変数を作成する。