CSSだけでiphone11対応特殊な画面に合わせたデザインと確認方法

iphoneXやiphone11って特殊な画面をしています。

特殊な画面に合わせたWebサイトはかなり好印象です。

今回はiphone11の対応とその確認の方法について紹介します。

iphone11対応とは？

特殊な画面に対応する

Glacier

iphoneX以降の機種の画面は、長方形ではなく特殊な形をしています。

iphoneの上部にあるカメラから下部にあるホームバーまで、Webページを表示することが出来ます。

もし、iphoneX以降の機種に対応していないWebページの場合は、このように表示されます。
- 縦向き(portrait)
  
  Glacier
  
  iphone11を縦向きでWebサイトを表示した例です。
  
  iphone11の下部あるホームバーとメニューバーが近いので、誤操作をしてしまう可能性があります。
  
  iphone11の時だけ、メニューバーを少し上に調整する対応が必要があります。
- 横向き(landscape)
  
  Glacier
  
  iphone11を横向きでWebサイトを表示した例です。
  
  iphone11の対応をしていない場合は、カメラ部分と被らないように左右に余白が入ります。
  
  対応しなくともWebサイトの利用は問題ないですが、デザインがよくありません。
  
  綺麗な画像を使ってるのに、画面全体に表示しないともったいないです。

iphone11対応とは、実はそんなに難しいことはしません。

簡単に言えば、iphone11の時だけCSSで調整するだけです。

画面全体に表示するように設定したり、ボタンの位置を調整します。

Index

それではさっそくiphone11の対応の仕方を紹介していきます。

やることはHTMLに1つ加えて、CSSで微調整します。

実はそんなに作業しなくとも、簡単に出来ちゃいます。

画面にフィットさせる

<head>

...
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
...

</head>

<body>

...

</body>

画面にフィットさせて表示する

Glacier

iphone11の特殊な画面に合わせて表示するように、HTMLの「viewport」を変更します。

metaタグで表示範囲を、画面最大まで広げるように設定します。

viewport-fit

metaタグの「viewport」の設定に「viewport-fit=cover」を追記します。

「viewport-fit=cover」を指定する前と後で、見た目の変化を比較してみましょう。
- 通常の時
  
  Glacier
  
  通常の時は、カメラの部分でページの一部が隠れてしまわないように左右に余白が入ります。
  
  自動で左右に余白は入るので誤操作の心配はありませんが、見た目がよくありません。
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
- 「viewport-fit=cover」あり
  
  Glacier
  
  「viewport-fit=cover」を設定すると、左右の余白がなくなり画面全体に表示されます。
  
  左右の余白が埋まって、見た目も綺麗に表示されます。
  
  しかし、画面上部にある「Glacier」という文字が、スクロールした時に隠れてしまう可能性があります。
  
  なので、iphone11の時だけ「Glacier」の位置を少し右にずらすようにCSSで調整します。
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  </head>

まずは最初のステップ、全体表示するように設定しました。

しかし、全体表示にしたことで部分的に隠れてしまう箇所が出てきます。

次は、隠れてしまう部分をCSSで修正します。

位置を調節する

<head>

...
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
...

</head>

<body>

<h1>Glacier</h1>

</div>

</div>

</body>

.top {

position: relative;
width: 100%;
height: 100vh;
background: url('image/glacier.jpg') center / cover no-repeat;

}

h1 {

position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 3rem;
background: rgba(255,255,255, .6);
padding-left: calc(env(safe-area-inset-left) + .2em);

}

.menu-bottom {

position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
background: rgba(255, 255, 255, .8);
padding-bottom: env(safe-area-inset-bottom);

}

iphone11のセーフエリア

Glacier

iphoneXや11の特殊な画面には、「セーフエリア」というものがあります。

ピンク色で染まったカメラの部分と、下部にあるホームバーの部分が「セーフエリア」になります。

この「セーフエリア」を使って、位置を調節していきます。

縦向き(Portraitモード)

Glacier

今回は画面下のメニューアイコンの位置を少し上に調節します。

メニューアイコンの下に「padding」でセーフエリアの大きさ分の余白を作ります

メニューアイコンが少し上に来るように調節されて、誤操作をしないようにしています。

もし「セーフエリア」が無い機種の時は「0px」になるので、空白は作られません。
.menu-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
横向き(Landscapeモード)

Glacier

横向きの時にタイトルの「Glacier」の位置を少し右に調節します。

タイトルの左側を「padding」でセーフエリアと「.2em」を足した大きさの余白を作ります。

「calc()」と組み合わせることで、セーフエリアと「.2em」の合計が計算出来ます。

もしセーフエリアが無い機種の時は、セーフエリアの大きさは「0px」になります。

その時は「.2em」の大きさの余白が左側に作られます。

iphoneを反対向き(カメラが右側)にしても同じようにセーフエリアの余白が入ります。
h1 {
padding-left: calc(env(safe-area-inset-left) + .2em);
}

env()ってなに？

「env()」は、セーフエリアの大きさを取得するための関数です。

env関数の中に取得したいセーフエリアを指定して、上下左右のセーフエリアの大きさを取得することが出来ます。

セーフエリアの指定の仕方と、よく使うCSSプロパティは下記のようになります。

上部のセーフエリア

Glacier

縦向きした時に、上にあるのが「safe-area-inset-top」というセーフエリアです。

「top」「margin-top」「padding-top」と組み合わせて使います。

さらに、calc関数と一緒に使うと、セーフエリアがない機種でも「20px」の余白を作ってくれます。
.safe {

top: env(safe-area-inset-top);

margin-top: env(safe-area-inset-top);

padding-top: calc(env(safe-area-inset-top) + 20px);

}
下部のセーフエリア

Glacier

縦向きした時に、下にあるのが「safe-area-inset-bottom」というセーフエリアです。

「bottom」「margin-bottom」「padding-bottom」と組み合わせて使います。

さらに、calc関数と一緒に使うと、セーフエリアがない機種でも「40px」の余白を作ってくれます。
.safe {

bottom: env(safe-area-inset-bottom);

margin-bottom: env(safe-area-inset-bottom);

padding-bottom: calc(env(safe-area-inset-bottom) + 40px);

}
左側のセーフエリア

Glacier

横向きした時に、左側にあるのが「safe-area-inset-left」というセーフエリアです。

「left」「margin-left」「padding-left」と組み合わせて使います。

さらに、calc関数と一緒に使うと、セーフエリアがない機種でも「1em」の位置から要素を配置することが出来ます。
.safe {

left: calc(env(safe-area-inset-left) + 1em);

margin-left: env(safe-area-inset-left);

padding-left: env(safe-area-inset-left);

}
右側のセーフエリア

Glacier

横向きした時に、右側にあるのが「safe-area-inset-right」というセーフエリアです。

「right」「margin-right」「padding-right」と組み合わせて使います。

さらに、calc関数と一緒に使うと、セーフエリアがない機種でも「1em」の余白を作ってくれます。
.safe {

right: env(safe-area-inset-right);

margin-right: calc(env(safe-area-inset-right) + 1em);

padding-right: env(safe-area-inset-right);

}

このように、CSSだけで簡単にiphone11の対応が出来ます。

しかし、対応してみたけど確認はどうするのか疑問ですよね。

今度は、対応したWebページを実際に確認してみましょう。

実際に対応が出来ているか確認する方法を紹介します。

今回はパソコンで確認する方法と、実機で確認する方法の2つを紹介します。

どちらか好きな方で構いません。

Xcodeで確認する

Xcodeのシミュレーターを使う

Xcode

XcodeはApple社が提供する、Macやiphone向けのアプリ開発をするためのツールです。

Web制作では、ほとんど関係ないツールですが、Xcodeの「シミュレーター」を利用します。

ただし、「Macbook」や「iMac」といったApple製品だけが使えるツールなので、WindowsなどのOSは利用が出来ません。

また、もしiphoneX以降の機種を実際に持っている方は「Xcode」は必要ありません。

iphoneX以降の機種を持っている方は次のステップ「実機で確認する」に進んでください。
- ダウンロード方法
  
  App Storeから「Xcode」と検索してダウンロードします。
  
  アプリ本体の要領が8GB以上あるので、パソコンの要領に注意してください。
  
  ダウンロード時間がおよそ30分かかります。
  
  バッテリーに気を付けながら、完了までお待ちください。
- シミュレーターの起動
  
  シミュレーターの起動までの手順は、下記のように進めてください。
  1. Finderのアプリケーション
    
    Finderを開いて「アプリケーション」を選択します。
    
    その中に「Xcode」のアイコンが表示されていればOKです。
  2. Xcodeの中を開く
    
    「Xcode」のアイコンを選択してメニューを開きます。
    
    メニューの「パッケージの内容を表示」を選択して、ファイルを開きます。
    
    Contents>Developer>Applicationsの順でファイルを開いていきます。
    
    その中にある「simulator」を選択すると、シミュレーターが起動します。
  3. デバイスの選択
    
    もしiphone11が自動で起動しなかったり、機種を変えたい場合は手動で選択します。
    
    画面の上部ある「File」を選択してメニューを開きます。
    
    Open DeviceiOS 13.5iphone11の順で選択することで、機種を起動・変更が可能です。
  4. Safariで開く
    
    シミュレーターのiphoneの起動が完了したら、「Safari」を開きます。
    
    パソコンのブラウザで確認していたURLをコピーして、シミュレーターの「Safari」に貼り付けます。
    
    すると、制作中のWebページが、シミュレーターの中で確認することが出来ます。

MacbookやiMacのパソコンで簡単に確認が出来ます。

ただし、シミュレーターの処理が重いので、パソコンの発熱にご注意ください。

次はiphoneで確認する方法も見てみましょう。

実機で確認する

実機で確認する方法

実際にiphoneXやiphone11を持っている方は、実機で作成中のWebページを確認することが出来ます。

「 XAMPP ( ザンプ ) 」という無料のツールを使うことで、Wi-Fi経由でパソコンからiPhoneにWebページを送信します。

XAMPP ( ザンプ )

XAMPPは仮想的に「Webサーバー」を作るためのツールです。

本来はWeb系のプログラミング言語の「PHP」でよく使うツールです。

ですが、今回はスマホやタブレットで作成中のWebページを確認するために使います。
- iphoneで見れる仕組み
  
  パソコンの中で「XAMPP」を起動すると、仮想的に「Webサーバー」がパソコンの中で作られます。
  
  「Webサーバー」を作ると、同じネットワークの中で作成中のWebページが公開された状態になります。
  
  つまり、同じネットワークで繋がったすべての端末が、作成中のWebページを見ることが出来ます。
同じネットワークとは？

同じネットワークとは、今回の場合は「Wi-Fi」が同じネットワークです。

Webページのデータがあるパソコンと、そのWebページを見たいiphoneを同じWi-Fiに接続します。

家にWi-Fiがある場合は、家のWi-Fiに繋がっているすべての端末が、作成中のWebページを見ることが出来る状態になります。

それ以外の端末は、違うネットワークなので、見ることが出来ません。

実はWi-Fi経由で作成中のWebページが共有が出来ちゃいます。

XAMPPというツールを使って実際にやってましょう。

少し準備が必要ですが、しっかり解説しますね。

XAMPPを入れる

XAMPPをダウンロードする

Mac OSでXAMMPを導入する場合の動画です。

ダウンロード方法

XAMPPのダウンロードは下記のリンクからダウンロードしてください。

「Windows」と「Mac」のダウンロードページが表示されます。

XAMPP公式サイト
- Windowsの場合
  1. リンクからダウンロード
    
    上記のリンクをクリックするとダウンロードのページが表示されます。
    
    Windowsの場合は、「XAMPP for Windows」と書かれた項目からダウンロードします。
    
    赤い枠で囲まれた「Download (64bit)」をクリックすることで、Windows版のXAMPPをダウンロードすることが出来ます。
  2. インストール
    
    ダウンロードしたファイルをクリックして、インストール画面を開きます。
    
    特に設定を変えずに「Next」のボタンをクリックします。
    
    すべてのインストールが完了したら「Finish」のボタンをクリックします。
- Macの場合
  1. リンクからダウンロード
    
    Macの場合は、「XAMPP for Mac」と書かれた項目からダウンロードします。
    
    この時、XAMPPのサイズが「163Mb」前後の大きさのバージョンを選択します。
    
    赤い枠で囲まれた「Download (64bit)」をクリックすることで、Mac版のXAMPPをダウンロードすることが出来ます。
    
    灰色の破線で囲まれた「357Mb」前後のサイズのバージョンは、設定が難しいのでおすすめしません。
  2. インストール
    
    上記の動画を参考にしながらインストールします。
    
    特に設定を変えずに「Next」のボタンをクリックします。
    
    すべてのインストールが完了したら「Finish」のボタンをクリックします。
  Mac OSはパスワードが必要
  - ユーザー名とパスワード
    
    Mac OSでXAMPPをインストールする場合は、「ユーザー名」と「パスワード」を要求されます。
    
    この場合の「ユーザー名」と「パスワード」は、Macのパソコンを起動してパソコンにログインする時と同じものを入力します。
    
    XAMPPを起動していいか、Mac OS(使ってるパソコン)に許可を求めている状態です。
  - 「変更を加える」とは？
    
    「XAMPPが変更を加えようとしています。」と表示されていると思います。
    
    これはXAMPPを起動する時に、一時的にXAMPPが使えるように権限を変更するという意味です。
    
    つまり、「XAMPPを起動してもいいですか？」と聞かれているだけなので、安心してください。
    
    この操作は今後も、XAMPPを起動するにも毎回聞かれます。
    
    その都度入力してください。

これでXAMPのダウンロードは完了です。

どうですか？うまくダウンロード出来ましたか？

それでは、実際にXAMPPを使ってみましょう。

XAMPPの使い方

XAMMPの使い方

XAMPPの起動

まずは、XAMPPの起動の仕方について説明します。

インストール直後は、自動で起動するようになっていますが、今後はこのように起動してください。
- Windowsの場合
  
  Windowsの場合は、「スタートメニュー」の中にXAMPPのアイコンが表示されます。
  
  もし見つからない場合は、画面左下の検索バーから「XAMPP」と検索すると表示されます。
- Maxの場合
  
  Macの場合は、「Launchpad」の中に自動でアイコンが設置されています。
  
  ギアのようなアイコンをクリックすると、XAMPPが起動します。
  
  その際に「ユーザー名」と「パスワード」が聞かれるので、入力して起動します。
XAMPPの使い方

XAMPPの起動が出来たら、簡単な使い方を説明します。

ごく一部の機能しか使わないので、そんなに難しくないので安心してください。

XAMPPの表示画面は「Windows」と「Mac」で少し違いますが、操作はほとんど変わりません。
- Windowsの場合
  
  Windowsの場合は、上の画像のような画面が表示されます。
  
  「Module」の列は「機能の名前」、「Actions」は操作ボタンになります。
  
  今回使う機能は「Module」の列の「Apache」を使います。
  1. Apacheの起動
    
    「Apache」の行の「Start」ボタンをクリックすることで、上の画像のように「Apache」の色が変わります。
    
    この状態が「Webサーバー」が作られた状態になるので、他の端末でも作成中のWebページが見れる状態になります。
    
    上の画像はApacheをスタートした状態です。
  2. Apacheの停止
    
    「Apache」の行の「Stop」ボタンをクリックすることで、Apacheを停止します。
    
    この状態は「Webサーバー」が停止した状態なので、作成中のWebページは見れなくなります。
- Macの場合
  
  Macの場合は、最初は「Welcome」画面が表示されます。
  
  「Manage Servers」の項目をクリックすると、上の画像のような画面が表示されます。
  
  「Server」の列は「機能の名前」、「Status」の列は「実行状態」を表していて、右側にある4つのボタンで操作します。
  
  今回使う機能は「Server」の列の「Apache Web Server」を使います。
  1. Apacheの起動
    
    「Apache Web Server」をクリックして色が変わっている状態にします
    
    その状態で、右側の「Start」ボタンをクリックして、「Status」を「running」の状態にします。
    
    この状態が「Webサーバー」が作られた状態になるので、他の端末でも作成中のWebページが見れる状態になります。
    
    上の画像はApacheをスタートした状態です。
  2. Apacheの停止
    
    「Apache Web Server」をクリックして色が変わっている状態にします
    
    その状態で、右側の「Stop」ボタンをクリックして、「Status」が「stopped」の状態にします。
    
    この状態は「Webサーバー」が停止した状態なので、作成中のWebページは見れなくなります。

公開するファイル

Webページを公開する方法

作成中のWebページを公開するには、XAMPPの中に用意されてある「htdocs」というフォルダを見つける必要があります。
- htdocsとは？
  
  「htdocs」とは、作成中のWebページを公開するためのフォルダです。
  
  XAMPPを起動してWebサーバーを作った時に、「htdocs」の中にあるすべてのファイルが見れるようになります。
  
  つまり、作成中のファイルを「htdocs」フォルダの中にコピーすることで、作成中のWebページを公開することが出来ます。
- htdocsはどこにある？
  
  「htdocs」フォルダは、XAMPPをダウンロードした時にすでに用意されています。
  
  WindowsやMacによって、「htdocs」の場所が少し違います。
  
  次のステップでWindowsとMacの「htdocs」の場所を解説します。
公開するファイルを選ぶ

「htdocs」フォルダの中に、作成中のWebページをコピーして移動します。

WindowsとMacで「htdocs」フォルダの場所が違うので、そちらも解説していきます。
- Windowsの場合
  
  「htdocs」フォルダは、XAMPPのコントロールパネルから開くことが出来ます。
  1. 「Explorer」をクリック
    
    コントロールパネルの右側にある「Explorer」をクリックすると、XAMPPに関するいくつかのフォルダが表示されます。
    
    その中に「htdocs」というフォルダを見つけて開きます。
  2. htdocsの中にフォルダを作る
    
    XAMPP/
    └htdocs/
    └iphone/
    
    「htdocs」フォルダの中は、すでにいくつかのフォルダやファイルがあると思います。
    
    今回がわかりやすく整理するために、「htdocs」フォルダの中に新しく「iphone」というフォルダを作成します。
  3. 作成中のファイルをコピー
    
    XAMPP/
    └htdocs/
    └iphone/
    ├index.html
    └css/
    └main.css
    └js/
    └main.js
    
    先ほど作成した「iphone」フォルダの中に、作成中のファイルをすべてコピーして移動します。
    
    作成中のWebページに必要なHTMLやCSS、Javascriptといったファイルをすべて「iphone」フォルダにコピーして移動してください。
- Macの場合
  
  「htdocs」フォルダは、XAMPPのコントロールパネルから開くことが出来ます。
  1. Open Application Folder
    
    XAMPPを起動して最初に表示される「Welcome」画面から「htdocs」をフォルダを開くことが出来ます。
    
    コントロールパネルの右下にある「Open Application Folder」をクリックすると、XAMPPに関するいくつかのフォルダが表示されます。
    
    その中に「htdocs」というフォルダを見つけて開きます。
  2. htdocsの中にフォルダを作る
    
    XAMPP/
    └htdocs/
    └iphone/
    
    「htdocs」フォルダの中は、すでにいくつかのフォルダやファイルがあると思います。
    
    今回がわかりやすく整理するために、「htdocs」フォルダの中に新しく「iphone」というフォルダを作成します。
  3. 作成中のファイルをコピー
    
    XAMPP/
    └htdocs/
    └iphone/
    ├index.html
    └css/
    └main.css
    └js/
    └main.js
    
    先ほど作成した「iphone」フォルダの中に、作成中のファイルをすべてコピーして移動します。
    
    作成中のWebページに必要なHTMLやCSS、Javascriptといったファイルをすべて「iphone」フォルダにコピーして移動してください。

お待たせいたしました。

これでiphoneで見れる準備が完了しました。

さっそくiPhoneで確認してみましょう。

iphoneで見る

iphoneでWebページを確認

Glacier

XAMPPを使って、実際にiphoneXや11で確認してみます。

確認する方法は下記の順番で操作します。

Apacheを起動

まずは、XAMPPのApacheを起動して「Webサーバー」を作ります。

WindowsとMacの場合は、下記のようなコントロールパネルで操作します。
- windowsの場合
  
  「Apache」の行の「Start」ボタンをクリックして、「Webサーバー」を作ります。
  
  「Apache」の文字の背景が変わり、その右に数字が出ている状態にします。
- Macの場合
  
  「Apache Web Server」をクリックして色が変わっている状態にします
  
  その状態で、右側の「Start」ボタンをクリックして、「Webサーバー」を作ります。
  
  「Apache Web Server」が「running」になっている状態にします。
IPアドレスの確認

作成中のパソコンにアクセスするために「IPアドレス」を確認します。

「IPアドレス」とは、簡単に言えば通信するために割り振られた番号のことを言います。

その番号を確認の仕方を、WindowsとMacごとに解説していきます。
- windowsの場合
  1. 接続中のWi-Fiの確認
    
    画面右下にある「Wi-Fi」のマークをクリックして、接続中のWi-Fiを表示します。
    
    接続しているW-Fiの名前の下にある「プロパティ」をクリックして、Wi-Fiの詳細を開きます。
  2. IPv4アドレスの確認
    
    Wi-Fiの詳細を開いて下までスクロールすると、「IPv4アドレス」という項目があります。
    
    その項目に書かれてる数字をどこかにメモをしてください。
    
    上の画像では「192.168.10.16」が、IPアドレスになります。
    
    この数字は人それぞれ違うので。今回はこのIPアドレスで説明していきます。
- Macの場合
  
  画面右上にある「Wi-Fi」のマークから「IPアドレス」を確認します。
  
  キーボードのoptionキーを押しながら「Wi-Fi」のマークをクリックします。
  
  すると、上の画像のように「IPアドレス」が表示されるので、この数字をどこかにメモをしてください。
  
  上の画像では「192.168.10.9」が、IPアドレスになります。
  
  この数字は人それぞれ違うので。今回はこのIPアドレスで説明していきます。
iphoneでURLを入力

XAMPP/
└htdocs/

└iphone/
└index.html

実際にiphoneXや11で作成中のWebページを表示してみます。

やり方は、iphoneXや11のブラウザでパソコンにアクセスするURLを入力するだけです。
1. iphoneでブラウザを開く
  
  iphoneで「Safari」や「Chrome」といったブラウザを開きます。
  
  どのブラウザでも同じように動作するので、お好きなブラウザでやってみてくだ際。
2. URLを入力する
  
  IPアドレスファイル名
  
  開いたブラウザで、パソコンにアクセスするURLを入力します。
  
  指定するURLは「IPアドレス」と「ファイル名」を組み合わせたものを使います。
  
  先ほど調べたIPアドレスの「192.168.10.9」と、見たいファイル「iphone」フォルダの「index.html」を組み合わせて指定します。
  
  IPアドレスの部分は人それぞれ違うので、先ほどメモしたIPアドレスを入力してください。
  
  「iphone」フォルダの「index.html」が、iphoneのブラウザで表示出来ていれば成功です。
  
  index.htmlは省略が出来る
  
  「index」というワードは、トップページという意味があります。
  
  「index.html」の場合は、「index.html」の部分を省略して書くことも可能です。
  
  ただし「index2.html」や「index-1.html」のようなファイル名は省略出来ません。