固定フッターやボトムメニューをiPhone Xに対応するCSS。

どうも、takeo(@spread_blog76)です。

iPhone X(Xs)、iPhone XR、iPhone 11 Proなど、スマホで主流となってきている全画面

固定フッターやボトムメニューを採用しているWEBサイトでそれらが、画面下の黒いバーに隠れてしまったり、角の丸い部分で切り取られてしまっていませんか。

今回は、そんな悩みをCSSで解決する方法をご紹介します。

サイトのユーザビリティ向上にも繋がるので、WEBサイトを運営している方はぜひ実践してみてください。

スポンサードリンク

スクロールするとフッターが隠れてしまう。

今回、問題となっているのはこのフッター部分

多くのサイトが画面下にはコピーライトか、ボトムメニューを表示させていて、その位置が下ギリギリなため、全画面iPhoneで下スクロールすると、ホームバーとかぶって隠れてしまうんですよね。

数値で余白を指定すると、見た目がよくない…。

ホームバーともかぶらないし、一見対応したように見えるが…

「それなら簡単。padding-bottomで何pxか空ければいいんじゃないの?」と思うかもですがそうはいきません。

通常は下にSafariのツールバーがあって、ホームバーとかぶらないし、全画面スマホでないユーザーも多くいます。

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向上に繋がるので、やる価値大いにアリです。

まだ未対応で、下の要素がホームバーにかぶる…という方はすぐできるので、ぜひやってみてください。

それでは。

Comments

0件のコメント
記事の感想や、アドバイスなど
コメントしてもらえたら嬉しいです。

コメントする

内容をご確認の上、「送信」ボタンを押してください。