メインコンテンツへスキップ

レスポンシブ

Safariでヘッダーがノッチに被る?セーフエリア問題の決定版ガイド

··1274 文字·3 分
iPhoneのノッチやホームバーにコンテンツが被ってしまう「セーフエリア問題」。viewport-fit=coverの設定からenv(safe-area-inset)の使いこなし、横向き表示でのレイアウト崩れ対策まで、モダンなモバイルWeb開発に必須のCSSテクニックを実例付きで解説します。