A CSS feature that sets safe spacing automatically based on the device.
env()
は、スマートフォンやタブレットなどの環境によって変わる安全な表示領域(セーフエリア)を考慮してレイアウトを調整するためのCSS関数です。
たとえば、iPhoneのように画面上部に切り欠き(ノッチ)がある端末では、通常のレイアウト指定だと一部の内容が隠れてしまうことがあります。そんなとき、env(safe-area-inset-top)
などを使うことで、そのデバイスに応じた余白を自動的に設定できます。
主な用途は次のような場面です:
たとえば、以下のように記述すると、そのデバイスに合わせた安全な余白が自動で挿入されます。
CSS
body {
padding-top: env(safe-area-inset-top);
}
つまりenv()
は、デバイスに合わせて見た目を自動調整するための仕組みです。