★今回はブログやサイトのiPhone X 画面の対応に関して★
実は遅まきながら…つい先日iPhone6sから→iPhone XSに機種変したんです。
それで自分のサイトを見てみたら、
がーん！！！
被ってんじゃん！！！
せっかく気に入って設置していた、自作のスマホ用のボトムメニューに画面下のバーが被ってしまい見えなくなっちゃっています...
ちなみに自作のスマホ用ボトムメニューのCSSはこちらで公開しています↓↓
【レスポンシブ】スマホ固定フッターメニュー★ボトムメニュー
それに、角も丸まっているので、そこに何か表示している場合は見えなくなっちゃう可能性もあると言うわけです！
↓↓この両端の丸っこいところね。
「iPhone X」が発売されてからもう既に１年も経っていて、お仕事でWEBサイトを作っている方から言わせれば「え？今更？」感は否めないものの、検索してもアプリ用の「Xcode」や「javascript」を使ったすっごい難しいやり方しか出てこなくて、困っていましたが（検索能力が無いだけかも知れないけど）
javascriptとか面倒な計算とかもさせずに、
コードを２つ加えるだけ
で解決できる方法を見付けちゃったので共有します！
参考にしたサイトは↓↓こちら（英語サイト）
Designing Websites for iPhone X | WebKit
ちなみに、私が作った、はてなブログテーマ「Palette（パレット）」を使用している方は、予めCSSにコードを組み込んでいるので、
コードを一つ追加するだけでOKです♪♪
こちらでやり方を説明しています♡
↓↓
テーマ「Palette」を使っている人はMETAコード１つだけ！
では、順を追って説明していきます。
説明は分からなくても大丈夫です！
要はコード２つを追加するだけ♪♪
CSSで画面の被りを解消する方法
「iPhone X」の画面の構造
難しいことは抜きにして（というか、実は私も良くわかっていないので...）まずは「iPhone X、Xs」の画面の構造について、簡単に説明します。
「iPhone X」から全画面表示になりましたね。
左側がiPhone Xsで、右側がiPhone8です。
（Appleのサイトから）
iPhone XS - Display - Apple
iPhone8では、画面の周りに「枠」があるのに対し、iPhone Xs（X）では、ホームボタンもなくなって画面がめいっぱいに広げられて端っこまで画像が見ています。
これ自体は大きくて見やすくて良いですよね(^-^)
だけど、ホームボタンがなくなった代わりに、このホームバー？が出てきて、固定で表示しているフッターやメニューに被ってしまうという現象が起きてしまいました。
セーフエリアの考え方
そんな現象に対応するために、Appleでは、重要な内容が見えなくなったり、アプリ内のボタンなどとホームバーが被らないように「セーフエリア」という考え方を導入しました。
Designing Websites for iPhone X | WebKit
ページを全てこの「セーフエリア」に収めてしまうと、せっかくの大画面の意味がないので、背景色や背景画像などは全画面で表示しつつも、ユーザーにとって大切なものやクリックするボタンなどは「セーフエリア」に納めてくださいね！と言う考え方です。
では、固定フッターやボトムメニューを「セーフエリア」内に納める簡単な方法とは？
①METAタグで「セーフエリアあるよ」と教える！
まずは、iOS11から対応した"viewport-fit"という画面の挙動をコントロールするMETAタグを使います。
なんのこっちゃ？だけど...
「iPhone X以降の場合は、セーフエリアあるから対応よろしくね！」と言う呪文だと思ってください。
その呪文がこちら↓↓
以下のMETAタグ（呪文）を<head>~</head>内に挿入してください。
※はてなブログをお使いの方は↓↓ここにコピペする
設定→詳細設定→headに要素を追加
（※テーマ「Palette」をお使いの場合は↑↑こちらのタグのコピペだけでOKです♪）
②次も簡単！CSSでセーフエリアまで底上げすれば良い
次に、セーフエリアまでの距離を取得するには env( )という関数を使います。
関数と言うと難しく聞こえますが、（私だけ？汗…）
CSSに追加するだけで勝手にやってくれるので、何も考えなくて大丈夫！
こちらもまた違うもう一つの別の呪文だと思ってください（笑）
セーフエリアから画面ボトムまで（下の端）までの距離は、この呪文↓
※これがそのまま値になるので、あとは対応するセレクタにpadding-bottomでセーフエリアまでの距離を指定するだけ。
つまり、この分だけ底上げすると言う意味です。
↓↓
セレクタ名はそれぞれなので、ご自身の設定しているボトムメニューや固定フッターのセレクタで設定してください。
例えば「#bottom-menu」だったら下記のようになります。
※2019/05/20 - 追記
id:mlc510さまご質問の件
読者の方から質問がありました。
【レスポンシブ】スマホ固定フッターメニュー★ボトムナビゲーションでアクセスUP！
当ブログで紹介している↑↑スマホ用のボトムメニューを使っている人はこちらのCSSを追加してください。
コードを指定する場所は、はてなブログの人は、↓に書いてあります！
はてなブログの人は...
はてなブログの人は、デザイン→カスタマイズ（スパナマーク）→{}デザインCSSで指定できます。
※ここは「#bottom-menu」などのセレクターが人それぞれ違うので、自分のボトムメニューで使っているセレクターを調べて変える必要があります。
私が作成した「はてなブログ」のテーマ「Palette（パレット）」をお使いの場合は、予めテーマのCSSに上記の呪文を組み込んだので、上記のCSSを追加する必要はありません！！
テーマ「Palette」をお使いの場合は、METAタグの挿入だけで大丈夫です♪♪
宣伝♡
ちなみに、当ブログで使用しているオリジナルテーマはテーマストアからダウンロード出来ます！
シンプルですが、色々なカスタマイズがコピペだけで簡単にできます！
詳細はぜひこちら確認してみてください↓↓♪(^0^)
おすすめ書籍
以上、本日は
iPhone X で固定フッターやボトムメニューが被る時の対処法
をお伝えしました(^-^)
◆素人がブログを始めて10ヶ月で月10万円の収益を得た経験から、ブログ運営やアフィリエイトについて書いています♪
ぜひブログ運営のご参考になさってください♪♪
はてなブログ【アフィリエイト】で素人が月間10万円の収益を得た5つの方法
戦略的アフィリエイトのすすめ！雑記ブログを収益化して月々5万円稼ぐ方法
こんなブログは読みたくない！ブログを書く時に気をつけるべきことは？
【ずぼらブロガー必見！】SEO対策にもなって、読者も増えて、ブログのアクセスもアップ↑↑更にネタ切れにもならない★魔法のような技！
グーグル検索トップでアクセスも多く、めちゃ役に立つのに儲からないブログとは？ -
