Webサイトを制作した際、Safariで表示確認すると画面上部や下部（ステータスバー付近）が透明になってしまうことがあります。これは、iOSのSafariがステータスバー周辺の領域を透明化して表示する仕様によるものです。この記事では、この透明部分に背景色を設定する方法と対応策を解説します。
透明部分が表示される原因
iOS Safariでは、ビューポートの上部や下部にセーフエリアがあり、ステータスバーやホームバーに干渉しないようにコンテンツを表示するため、一部が透過される仕様になっています。
特にフルスクリーン表示やViewport-fit=coverを使用すると、背景が透明の状態で表示されることがあります。
背景色を設定する基本方法
CSSでbodyやhtmlに背景色を設定するだけで、多くの場合は透明部分の背景色を変更できます。例えば、body { background-color: #ffffff; }のように指定します。
さらに、meta name="theme-color" content="#ffffff"をheadタグ内に設定すると、iOS Safariのステータスバー部分にも指定色が適用され、より統一感のある表示になります。
セーフエリアに対応した設定
iPhone X以降の機種では、env(safe-area-inset-top)やenv(safe-area-inset-bottom)を活用して、paddingやmarginを調整できます。
例として、padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);を指定すると、透明領域を避けつつ背景色を表示できます。
フルスクリーン表示での注意点
PWAやWebアプリでフルスクリーン表示する場合、viewport-fit=coverを使用すると透明部分が拡張されます。その際はbodyの背景色とtheme-colorの設定を併用することで、意図した色が表示されます。
また、要素の背景色を全画面に適用する際は、htmlとbodyの両方に背景色を指定することを推奨します。
まとめ
Safariで上下透明部分が表示される問題は、iOSの仕様によるもので、CSSとmetaタグで背景色を設定することで対応可能です。セーフエリア対応のpaddingやtheme-colorを活用することで、ステータスバー周辺も含めて統一感のある背景色を表示できます。
コメント