iPhone X（Xs）、iPhone XR、iPhone 11 Proなど、スマホで主流となってきている全画面。
固定フッターやボトムメニューを採用しているWEBサイトでそれらが、画面下の黒いバーに隠れてしまったり、角の丸い部分で切り取られてしまっていませんか。
今回は、そんな悩みをCSSで解決する方法をご紹介します。
サイトのユーザビリティ向上にも繋がるので、WEBサイトを運営している方はぜひ実践してみてください。
スクロールするとフッターが隠れてしまう。
今回、問題となっているのはこのフッター部分。
多くのサイトが画面下にはコピーライトか、ボトムメニューを表示させていて、その位置が下ギリギリなため、全画面iPhoneで下スクロールすると、ホームバーとかぶって隠れてしまうんですよね。
数値で余白を指定すると、見た目がよくない…。
「それなら簡単。padding-bottomで何pxか空ければいいんじゃないの？」と思うかもですがそうはいきません。
通常は下にSafariのツールバーがあって、ホームバーとかぶらないし、全画面スマホでないユーザーも多くいます。
そういう時の表示は下にポッカリ余白があり、気持ち悪い…詰めたい…と思ってしまいますよね。ボトムメニューだと高さが増して邪魔にもなるし。
しかし、たった2文のコードを追加するだけで、レイアウトを変えずに、全画面スマホ且つ下スクロールで画面下までページが表示される時だけ、下に余白を作ることができるので、その方法をご紹介します。
2文追記するだけで全画面スマホの時だけ下に余白を作る方法。
まず仕組みを説明すると、iPhone X以降の全画面モデルにはセーフエリアというものが設定されています。
セーフエリアとは、全画面でも表示が隠れたり、操作性を損なわないようにAppleが定めた画面内の余白のことです。
今回、解説するのはこのセーフエリア分の余白をCSSで空ける方法になります。
headタグにコードを追記する。
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>まずは、対象ページのHTML内のheadタグに、上記のコードをペーストします。
これは、全画面のiPhoneはセーフエリアがあるよ！というのを設定しているコードだと思ってください。
下に余白を空けたい要素のCSSにenv(safe-area-inset-bottom)を指定する。
#bottom-menu {
padding-bottom: env(safe-area-inset-bottom);
}ボトムメニュー、フッターなど下に余白を空けたい要素に、上記CSSを適用します。
env(safe-area-inset-bottom)が、下のセーフエリア分にあたります。
ちなみに、上のセーフエリアはenv(safe-area-inset-top)です。
デザイン性を損なわないまま、下に余白ができました。
確認してみると、通常時は適用前と変わらずですが、下スクロールして全画面になると自動でボトムメニューの下に余白が空き、隠れず表示されるようになりました。
ちょっとしたことですが、UIを最新機種に合わせて微調整することでUX向上に繋がるので、やる価値大いにアリです。
まだ未対応で、下の要素がホームバーにかぶる…という方はすぐできるので、ぜひやってみてください。
それでは。
