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.04.21

    【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

    CSS

  • 2021.04.09

    コーディング作業に役立つサイト5選

    CSS

    その他

  • 2021.04.07

    【CSS】背景色のみを透過する方法

    CSS

おすすめ記事

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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