CSS

2020.11.04

【css】iPhoneX以降の機種のセーフエリア対策

ホームボタンとホームインジケーター

2017年に発売したiPhoneX以降はホームボタンがなくなり、画面内にホームバー(ホームインジケーター)が搭載されています。

今年の10月に発売したiPhone12ももちろん、ホームボタンではなくホームバーがついているのですが、WEBサイト制作ではこのホームバーの対策が必要な場合があります。

LPなどでよく使われますが、画面の下にボタンを固定することがあると思います。

このように画面の下にコンバージョンボタンなどを設置するとホームバーに被ってしまいます。
ホームバー近くにスクロールできない要素を入れないのが一番ではありますが、どうしても画面下に固定したい!という方のために今回はcssの記述だけで済む対策をお伝えします!

セーフエリア

ホームバーが導入されたことで、セーフエリアという対応もされました。

ユーザーにとって読む必要があったり、クリックしたりする必要のあるコンテンツはこのセーフエリア内に収める必要があります。
このセーフエリアをhtmlとcssで制御します。

ステップ1 metaタグでセーフエリアを認識させる

iOS11から対応した”viewport-fit”という画面を挙動をコントロールできるmetaタグを使います。
このタグでユーザーのデバイスがiPhoneX以降の時にはセーフエリアがあるので対応するように指示します。

<meta name="viewport" content="initial-scale=1,viewport-fit-cover">

※viewportをすでに記述しているときは、initial-scale=1,viewport-fit-coverをcontent=””のなかに追加してください。

ステップ2 cssで底上げする

セーフエリアまでの距離を取得するためにenv()という関数を使います。
対応するコンテンツのセレクタにpadding-bottomでセーフエリアまでの距離を指定します。
CSSに下記のように記述を追加するだけでOKです。

#hogehoge{
padding-bottom: env(safe-area-inset-bottom);
}

これで自動的にセーフエリアまでのpadding-bottomが追加されます。
今回でいうと固定ボタンのピンク背景部分が底上げされます。

いかがでしたでしょうか。
細かい部分ではありますが、画面下に固定のコンテンツをいれる場合は必須の記述です。

是非ご活用ください!

0

関連記事

  • 2021.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.07.14

    CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介】

    CSS

  • 2021.07.13

    (簡単)inputをクリックしたときの枠線の色を変える

    CSS

おすすめ記事

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!