CSS

この記事では、スマートフォンなどの安全な表示領域に合わせて余白を調整するCSS関数env()の基本を説明します。

A CSS feature that sets safe spacing automatically based on the device.

env()

env()は、スマートフォンやタブレットなどの環境によって変わる安全な表示領域（セーフエリア）を考慮してレイアウトを調整するためのCSS関数です。

たとえば、iPhoneのように画面上部に切り欠き（ノッチ）がある端末では、通常のレイアウト指定だと一部の内容が隠れてしまうことがあります。そんなとき、env(safe-area-inset-top)などを使うことで、そのデバイスに応じた余白を自動的に設定できます。

主な用途は次のような場面です：

• iOSや一部Android端末のノッチ・ホームバーに対応
• ステータスバーと重ならないように上部に余白を取る
• 動的に変化する表示領域に適応するWebデザインを実現

たとえば、以下のように記述すると、そのデバイスに合わせた安全な余白が自動で挿入されます。

body {
	padding-top: env(safe-area-inset-top);
}

つまりenv()は、デバイスに合わせて見た目を自動調整するための仕組みです。