【CSS】iPhoneのノッチやセーフエリアに対応するenv()関数の使い方

2024.06.03

URLをコピーしました！

iPhoneのノッチやセーフエリアに対応するデザインは、コーダーにとって大きな悩みの種です。
特に、以下のような問題に直面することが多いでしょう。

ノッチにコンテンツが隠れてしまう
セーフエリアボタンが隠れてしまい、使いにくい

これらの悩みに対し、CSSのenv()関数を用いることで解決する方法があります。

この記事では、env()関数の基本から実際のプロジェクトへの適用方法までを詳しく解説します。

この記事を読むことで、iPhoneのノッチやセーフエリアに対応したデザインの基本を学び、具体的なコーディング方法を理解できます。

Webデザインのスキルを一段と高め、ユーザーにとって快適な閲覧環境を提供するための一歩を踏み出しましょう。

CSSのenv()関数とは

CSSのenv()関数は、特定の環境変数の値をCSS内で使用するための関数です。
この関数を使うことで、特定のデバイスやブラウザ環境に応じたデザインを簡単に適用することができます。
特に、iPhoneのノッチやセーフエリアに対応するためには欠かせないツールです。

例えば、env(safe-area-inset-top)と記述することで、デバイスのセーフエリアの上部に適切なマージンやパディングを設定できます。

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

このように、env()関数を使うことで、特定のデバイス環境に依存したデザインをシンプルに管理できるのが大きな特徴です。

他のCSS関数との違い

env()関数は環境変数を参照するための特別な関数であり、他のCSS関数とは異なる役割を果たします。
例えば、var()関数はCSSカスタムプロパティ（変数）の値を参照するために使用されます。

:root {
    --main-color: #06c;
}

body {
    color: var(--main-color);
}

var()関数は開発者が定義した変数の値を使うのに対し、env()関数はデバイスやブラウザが提供する環境変数の値を使用します。
この違いにより、env()関数はデバイス固有の設定（例えば、セーフエリアインセット）に対応するのに特に有効です。

ブラウザのサポート状況

env()関数は非常に便利ですが、すべてのブラウザが完全にサポートしているわけではありません。

特に、最新のiOSやSafariではほぼ完全にサポートされていますが、Androidや一部のデスクトップブラウザではサポートが限定的です。
以下のようなフォールバックスタイルを用意することで、サポートされていないブラウザに対応できます。

body {
    padding-top: env(safe-area-inset-top, 20px); /* フォールバック値として20pxを指定 */
    padding-right: env(safe-area-inset-right, 20px);
    padding-bottom: env(safe-area-inset-bottom, 20px);
    padding-left: env(safe-area-inset-left, 20px);
}

このように、env()関数にフォールバック値を指定することで、サポートされていないブラウザでもデザインが崩れることを防げます。

MDN Web Docs

env() – CSS: カスケーディングスタイルシート | MDN env() は CSS の関数で、ユーザーエージェントが定義した環境変数の値を、 var() 関数やカスタムプロパティと同じ方法で CSS に挿入するために使用することができます。異…

具体的なコード例

今回は、ハンバーガーメニューを例に解説していきます。

ハンバーガーメニューは、ノッチに干渉しやすい箇所です。
以下のコードでは、ハンバーガーメニューの位置をenv()関数を使って調整し、ノッチに隠れないようにしています。

See the Pen Untitled by すずき (@k-suzuki3533) on CodePen.

このコードは、env()関数を使用して、ハンバーガーメニューがiPhoneのノッチに隠れないように、適切な位置に配置しています。

.drawer-nav {

	top: env(safe-area-inset-top, 0);

	&_inner {

		padding: calc(env(safe-area-inset-top, 0) + 4rem) 2rem calc(env(safe-area-inset-bottom, 0) + 4rem);

	}
…
}

適用する際の注意点

env()関数をプロジェクトに適用する際の注意点をいくつか紹介します。

ブラウザ互換性の確認

まず、env()関数を使用する前に、ターゲットとするブラウザがこの関数をサポートしているか確認することが重要です。
サポートが限定的な場合は、フォールバックスタイルを用意する必要があります。

テストの徹底

env()関数を使用したデザインを実装した後、必ず様々なデバイスでテストを行いましょう。
特に、iPhoneの異なるモデルやブラウザでの表示確認が重要です。

フォールバックの設定

サポートされていないブラウザ向けにフォールバックスタイルを設定することは必須です。
以下のコード例のように、env()関数にフォールバック値を指定することで、サポートされていないブラウザでも適切なスタイルを維持できます。

.drawer-nav_menu {
    top: calc(env(safe-area-inset-top, 10px) + 10px); /* フォールバック値として10pxを指定 */
}

まとめ

CSSのenv()関数を活用することで、iPhoneのノッチやセーフエリアに対応したデザインが簡単に実現できます。
これにより、ユーザーが快適にウェブサイトを利用でき、ユーザー体験を向上させることが可能です。

この記事では、env()関数の基本的な使い方や、ハンバーガーメニューの具体例、フォールバックスタイルの設定方法について詳しく解説しました。

env()関数を使うことで、デバイスの環境変数に基づいた動的なスタイル設定が可能になり、重要なコンテンツが隠れずに表示されます。
これにより、ユーザーにとって使いやすいデザインを提供できます。
さらに、フォールバックスタイルを設定することで、サポートされていないブラウザにも対応できます。

この知識を活用して、iPhoneのノッチやセーフエリアに対応したデザインを実現し、ウェブデザインのスキルを高めていきましょう。