Webデザインの教科書
iPhone対応
Scroll
  1. ホーム
  2. レシピ
  3. iPhone対応

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

iPhoneは特殊な画面をしています。

Webサイトもその特殊な画面に合わせたデザインだと好印象です。

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

iPhone対応ってなに？

Glacier

iPhoneの画面は、上部にあるノッチと呼ばれるカメラなどを内蔵した特殊な形のフレームがあります。

また、下部にはホームバーと呼ばれるiPhoneを操作するためのエリアも存在します。

Webサイトもそれに合うように、デザインを調節する必要があります。

iPhoneに対応していないWebサイト

iPhoneに対応していないWebサイトの場合は、iPhoneの画面のノッチに重ならないように画面内に余白が作られます。

iPhoneの向きによって、画面内の余白が自動的に作られて次のような見た目になります。

縦向きの場合 (portrait)
Glacier

iPhoneを縦向きにしてWebサイトを表示した例です。

この場合、画面上部のノッチにデザインが重なることはないので、通常通りに表示されます。

ですが、画面下にあるホームバーとWebサイトのナビゲーションメニューが重なってしまいます。

ナビゲーションメニューをタッチして操作を行う際に、iPhoneのホームバーが反応してしまうため誤操作を誘発してしまいます。

横向きの場合 (landscape)
Glacier

iPhoneを横向きにしてWebサイトを表示した例です。

この場合、画面上部になったノッチは左右にくるので、Webサイト全体が重ならないように左右に余白が自動で作られます。

記事などの掲載が主なサイトであればこの余白は気にならないかもしれません。

ですが、もしデザイン重視のサイトであれば、この左右の余白はせっかくデザインを邪魔をしてしまうことになるかもしれません。

iPhone対応はこれから必須になるかもしれません。

と言っても、iPhoneの対応はCSSで少し調整するだけです。

難しい事はしないので安心してください。

iPhoneに対応する

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

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

実は結構簡単に出来ちゃいます。

画面にフィットさせる

<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
...
</head>
<body>
...
</body>
画面にフィットさせて表示する
Glacier

iPhoneの画面に合わせるため、HTMLのビューポート(viewport)の設定を変更します。

これまでのビューポートの設定では、iPhoneのノッチに部分は自動的に余白を作成します。

このビューポートの設定を、iPhoneのノッチ部分まで広げるように設定を変更します。

HTMLのビューポート

HTMLの「meta」タグで設定しているビューポートは、Webページの見え方を設定しています。

既存のビューポートの設定に、1つ追加してビューポートの範囲を広げます。

width=device-width

HTMLの表示範囲を端末の画面サイズに合わせます。

initial-scale=1.0

HTMLを表示する際に、表示倍率を「1倍」にします。

viewport-fit=cover

HTMLの表示範囲を画面にフィットするようにします。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
</head>
viewport-fitがあるとどうなる？

HTMLのビューポートの設定に「viewport-fit=cover」を追加すると、iPhoneでWebサイトを表示する際に大きな変化があります。

viewport-fitがない時
Glacier

通常の時はカメラの部分でページの一部が隠れてしまわないように左右に余白が入ります。

自動で左右に余白は入るので誤操作の心配はありませんが見た目がよくありません。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
viewport-fitがある時
Glacier

HTMLのビューポートの設定に「viewport-fit=cover」がある場合、左右の余白がなくなり画面全体に表示されます。

左右の余白が埋まって見た目も綺麗に表示されます。

しかし、画面上部にある「Glacier」という文字が、スクロールした時に隠れてしまう可能性があります。

なので、この後にiPhoneの特殊な画面の時だけ「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>
<div class="top">
<h1>Glacier</h1>
</div>
<div class="menu-bottom">
<div class="icon map"></div>
<div class="icon menu"></div>
<div class="icon user"></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);
}
iPhoneのセーフエリア
Glacier
Glacier

iPhoneの特殊な画面には「セーフエリア」というものが存在します。

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

CSSでこの「セーフエリア」の大きさを取得することが可能で、特定の要素をセーフエリアを考慮した位置に移動をします。

縦向き(Portraitモード)
Glacier

iPhoneを縦向き(Portraitモード)でWebページを表示した例です。

この場合、Webページの下にメニューアイコンを設置しているので、iPhoneのホームバーとメニューアイコンが重なってしまいます。

なので、iPhoneのホームバーと重ならないように、メニューアイコンの下に「padding-bottom」でセーフエリアの大きさ分の余白が入るようにします。

そうすることで、メニューアイコンが少し上に来るように調節されて、誤操作を防止できるようになります。

ちなみに、iPhoneで「セーフエリア」が無い機種の時は「0px」になるので、この場合は空白が作られません。

.menu-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
横向き(Landscapeモード)
Glacier

iPhoneを縦向き(Landscapeモード)でWebページを表示した例です。

この場合、Webページの「Glacier」のテキストがiPhoneのカメラ部分と重なってしまうため、テキストの左側に「padding-left」で余白を作りましょう。

今回は、CSSのCalc関数を使って、セーフエリアの大きさと「.2em」を足した値を、CSSの「padding-left」で余白が入るようにします。

ちなみに、iPhoneで「セーフエリア」が無い機種の時は、セーフエリアの大きさは「0px」になるので、その場合はpadding-leftの値が「.2em」になります。

iPhoneの向きを左右反対向き(カメラが右側)にしても同じようにセーフエリアの余白が入ります。

h1 {
padding-left: calc(env(safe-area-inset-left) + .2em);
}
env()ってなに？

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

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

env関数でセーフエリアの値を取得する方法と、よく使われるCSSプロパティを紹介します。

上部のセーフエリア
Glacier

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

CSSプロパティの「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

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

CSSプロパティの「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

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

CSSプロパティの「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

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

CSSプロパティの「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だけで簡単にiPhone対応が出来ます。

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

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

実際に確認する方法

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

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

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

Xcodeで確認する

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

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

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

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

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

iPhoneX以降の機種を持っている方は次のステップ「実機で確認する」に進んでください。

Xcodeのダウンロード方法

App Storeから「Xcode」と検索してダウンロードします。

アプリ本体の要領が8GB以上あるので、パソコンの要領に注意してください。

ダウンロード時間がおよそ30分かかります。

バッテリーに気を付けながら、完了までお待ちください。

Xcodeのシミュレーターの起動

シミュレーターの起動までの手順は、下記のように進めてください。

  1. FinderからXcodeを起動する

    FinderからインストールしたXcodeを起動します。

    すると、初回起動の場合はXcodeの利用の同意が求められるので、右下の「Agree」のボタンを押します。

  2. プラットフォームを選択する

    Xcodeを起動をすると、必要なプラットフォームが求められます。

    今回はiOSのシュミレーターを使いたいので、「iOS 17.2」にチェックを入れて中央の「Download & Install」を押します。

    iOSのバージョンはその都度変わるので、表示されているバージョンを選択しましょう。

  3. プラットフォームのインストール

    選択されたプラットフォームをインストールをします。

    インストールはとても時間がかかるので、完全に終了するまでしばらく待ちます。

    インストール完了後は、画面中央の「Continue」のボタンを押します。

  4. Xcodeのスタート画面

    上記のステップで、Xcodeの初期設定が全て完了すると、Xcodeのスタート画面が表示されます。

    この画面が用事されていればXcodeの初期設定は完了しているので、シュミレーターが使えるようになります。

    この画面では操作しないので、左上の「×」ボタンで閉じましょう。

  5. Xcodeの中を開く

    Xcodeの中にあるシュミレーターのみを起動したいので、Xcodeの内のファイルを探索します。

    FinderからXcodeのアイコンが表示されている状態で、右クリックでメニューを開きます。

    メニュー項目に「パッケージの内容を表示」を選択して、Xcodeの中を探索します。

  6. Simulatorを探す

    Xcodeの中を表示すると、いくつかのフォルダが表示されます。

    SimulatorがあるファイルまではContents>Developer>Applicationsの順でフォルダを開いてくと辿り着きます。

  7. Simulatorを起動する

    Simulatorのアイコンが見つかったら、アイコンをクリックしてシミュレーターを起動しましょう。

    シュミレーターの起動は時間がかかるので、完全に読み込みが終了するまでしばらく待ちます。

  8. Simulatorでブラウザを開く

    シュミレーターの中で「Safari」のブラウザを起動します。

    そして、確認したいWebサイトのURLを入力してWebページを表示します。

    ここでiPhone対応が全て完了しているか確認してみましょう。

  9. デバイスを変更する

    検証したいデバイスを変更したい場合は、画面左上にある「File」のメニューを開いて、メニュー項目の「Open Simulator」から選択が可能です。

  10. Simulatorを終了する

    シュミレーターでの確認が完了したら、シュミレーターを終了します。

    画面の右上にある「Simulator」のメニューを開いて、メニュー項目の「Quit Simulator」を選択して終了させましょう。

このように、Xcodeを使うことで簡単に確認が出来ます。

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

実機で確認する

実機で確認する方法

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

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

XAMPP ( ザンプ )

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

Webページを見るためにはWebサーバーが必要で、利用者はブラウザからWebサーバーに接続してWebページを見ています。

本来のXAMPPの使い方は、Web系のプログラミング言語の「PHP」などでWebシステムを開発する際の環境作りによく使うツールです。

今回はその環境を作って、スマホやタブレットで作成中のWebページを確認するために使います。

Webサイトが見れる仕組み

パソコンの中で「XAMPP」を起動すると、パソコンの中に「Webサーバー」が作られます。

この「Webサーバー」があればWebサイトを配信することが出来ます。

Webサイトの配信可能な範囲は同じネットワークの中のみで、限定範囲でWebページが公開された状態になります。

つまり、同じネットワークに繋がったすべての端末が、作成中のWebページを見ることが出来ます。

同じネットワークとは？
Wi-Fi 同じネットワーク

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

Webサイトの全データがあるパソコンと、そのWebサイトを見るiPhoneを同じWi-Fiに接続します。

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

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

こんな感じで、Wi-Fi経由で作成中のWebページの共有が出来ちゃいます。

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

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

XAMPPを入れる

XAMPPをダウンロードする

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

XAMPPのダウンロード方法

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

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

XAMPP公式サイト
Windowsの場合
  1. リンクからダウンロード

    上記のリンクをクリックするとダウンロードのページが表示されます。

    Windowsの場合は「XAMPP for Windows」と書かれた項目からダウンロードします。

    赤い枠で囲まれた「Download (64bit)」をクリックすることで、Windows版のXAMPPをダウンロードすることが出来ます。

  2. インストール

    ダウンロードしたファイルをクリックして、インストール画面を開きます。

    特に設定を変えずに「Next」のボタンをクリックします。

    すべてのインストールが完了したら「Finish」のボタンをクリックします。

Macの場合
  1. リンクからダウンロード

    上記のリンクをクリックするとダウンロードのページが表示されます。

    Macの場合は「XAMPP for Mac」と書かれた項目からダウンロードします。

    赤い枠で囲まれた「Download (64bit)」をクリックすることで、Mac版のXAMPPをダウンロードすることが出来ます。

  2. インストール

    上記の動画を参考にしながらインストールします。

    特に設定を変えずに「Next」のボタンをクリックします。

    すべてのインストールが完了したら「Finish」のボタンをクリックします。

Mac OSはパスワードが必要
ユーザー名とパスワード

Mac OSでXAMPPをインストールする場合は、「ユーザー名」と「パスワード」を要求されます。

この場合の「ユーザー名」と「パスワード」は、Macのパソコンを起動してパソコンにログインする時と同じものを入力します。

XAMPPを起動していいか、Mac OS(使ってるパソコン)に許可を求めている状態です。

「変更を加える」とは？

「XAMPPが変更を加えようとしています。」と表示されていると思います。

これはXAMPPを起動する時に、一時的にXAMPPが使えるように権限を変更するという意味です。

つまり、「XAMPPを起動してもいいですか？」と聞かれているだけなので、安心してください。

この操作は今後も、XAMPPを起動するにも毎回聞かれます。

その都度入力してください。

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

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

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

XAMPPの使い方

XAMMPの使い方

まずは、XAMPPの起動方法とWebサーバーの使い方について説明します。

WindowとMacに分けて解説していきます。

Windows版:XAMPPの使い方

Windows版のXAMPPの起動方法と基本的な使い方について解説します。

  1. XAMPPの起動

    Windowsの場合は、「スタートメニュー」の中にXAMPPのアイコンが表示されます。

    もし見つからない場合は、画面左下の検索バーから「XAMPP」と検索すると表示されます。

  2. XAMPPのコントロールパネル

    Windowsの場合は、上の画像のような画面が表示されます。

    「Module」の列は「機能の名前」、「Actions」は操作ボタンになります。

    今回使う機能は「Module」の列の「Apache」を使います。

  3. Apacheの起動

    「Apache」の行の「Start」ボタンをクリックすることで、上の画像のように「Apache」の色が変わります。

    この状態が「Webサーバー」が作られた状態になるので、他の端末でも作成中のWebページが見れる状態になります。

    上の画像はApacheをスタートした状態です。

  4. Apacheの停止

    「Apache」の行の「Stop」ボタンをクリックすることで、Apacheを停止します。

    この状態は「Webサーバー」が停止した状態なので、作成中のWebページは見れなくなります。

Mac版:XAMPPの使い方

Mac版のXAMPPの起動方法と基本的な使い方について解説します。

  1. XAMPPの起動

    Macの場合は、「Launchpad」の中に自動でアイコンが設置されています。

    ギアのようなアイコンをクリックするとXAMPPが起動します。

  2. ユーザ名とパスワードを入力

    XAMPPを起動すると「ユーザー名」と「パスワード」が求められます。

    Mac本体を起動する時と同じユーザー名とパスワードを入力しましょう。

  3. XAMPPの管理画面

    Macの場合は、起動直後は「Welcome」画面が表示されます。

    画面中央の「Manage Servers」の項目をクリックすると、上の画像のような画面が表示されます。

    画面内の「Server」の列は機能の名前が表示されていて、その隣の「Status」の列は実行状態を表しています。

  4. Apacheの起動

    画面の「Apache Web Server」をクリックして青く選択された状態にします。

    その状態で、画面右側の「Start」ボタンをクリックして、「Status」を「Running」の状態にします。

    この状態が「Webサーバー」が作られた状態になるので、他の端末でも作成中のWebページが見れる状態になります。

    上の画像はApacheをスタートした状態です。

  5. Apacheの停止

    画面の「Apache Web Server」をクリックして色が変わっている状態にします

    その状態で、右側の「Stop」ボタンをクリックして、「Status」が「Stopped」の状態にします。

    この状態は「Webサーバー」が停止した状態なので、作成中のWebページは見れなくなります。

XAMPPに公開するファイル
Webページを公開する方法

作成中のWebページを公開するには、XAMPPの中に用意されてある「htdocs」というフォルダを見つける必要があります。

htdocsとは？

htdocsとは、作成したWebページを公開するためのフォルダです。

XAMPPを起動してWebサーバーを立ち上げた際に、この「htdocs」の中にあるすべてのファイルが閲覧可能な状態になります。

つまり、作成したHTMLファイルやCSSファイルを全て「htdocs」フォルダの中にコピーすることで、作成したWebページを公開することが出来ます。

htdocsはどこにある？

htdocsフォルダは、XAMPPをダウンロードした時にすでに用意されています。

WindowsやMacによって「htdocs」の場所が少し違います。

次のステップでWindowsとMacの「htdocs」の場所を解説します。

Windows版:サイト公開の方法

Windowsの場合の「htdocs」のフォルダを探し方とサイト公開の方法を解説します。

  1. XAMPPのコントロールパネル

    まずはXAMPPのコントロールパネルを開きます。

    コントロールパネルの右側にある「Explorer」をクリックすると、XAMPPに関するいくつかのフォルダが表示されます。

    その中に「htdocs」というフォルダがあるので、検索機能など使いながら見つけてフォルダを見つけましょう。

  2. 「htdocs」の中を確認
    XAMPP/
    └htdocs/
    ├dashboad/
    ├webalizer/
    ├img/
    ├applications.html
    ├bitnami.css
    ├favicon.ico
    └index.php

    XAMPPの中から「htdocs」のフォルダを見つけたら、その中も確認してみましょう。

    初期の状態では、上のようなフォルダやファイルが格納されています。

    このフォルダの中に、公開したいファイルを全てコピーして貼り付けをしていきます。

  3. 新しく「iphone」フォルダを作る
    XAMPP/
    └htdocs/
    └iphone/

    htdocsフォルダの中は、既にいくつかのフォルダやファイルがあると思います。

    今回がわかりやすく整理するために「htdocs」フォルダの中に新しく「iphone」というフォルダを作成します。

  4. 作成中のファイルをコピー
    XAMPP/
    └htdocs/
    └iphone/
    ├index.html
    └css/
    └main.css
    └js/
    └main.js

    先ほど作成した「iphone」フォルダの中に、作成中のファイルをすべてコピーして移動します。

    作成中のWebページに必要なHTMLやCSS、Javascriptといったファイルをすべて「iphone」フォルダにコピーして移動しましょう。

    これで、XAMPPに作成中のWebサイトの公開が完了です。

Mac版:サイト公開の方法

Macの場合の「htdocs」のフォルダを探し方とサイト公開の方法を解説します。

  1. XAMPPの管理画面

    まずはXAMPPの管理画面を開きます。

    XAMPPを起動して最初に表示される「Welcome」画面から「htdocs」をフォルダを開くことが出来ます。

    管理画面の右下にある「Open Application Folder」をクリックすると、XAMPPに関するいくつかのフォルダが表示されます。

    その中に「htdocs」というフォルダがあるので、検索機能など使いながら見つけてフォルダを見つけましょう。

  2. 「htdocs」の中を確認
    XAMPP/
    └htdocs/
    ├dashboad/
    ├webalizer/
    ├img/
    ├applications.html
    ├bitnami.css
    ├favicon.ico
    └index.php

    XAMPPの中から「htdocs」のフォルダを見つけたら、その中も確認してみましょう。

    初期の状態では、上のようなフォルダやファイルが格納されています。

    このフォルダの中に、公開したいファイルを全てコピーして貼り付けをしていきます。

  3. 新しく「iphone」フォルダを作る
    XAMPP/
    └htdocs/
    └iphone/

    htdocsフォルダの中は、既にいくつかのフォルダやファイルがあると思います。

    今回がわかりやすく整理するために「htdocs」フォルダの中に新しく「iphone」というフォルダを作成します。

  4. 作成中のファイルをコピー
    XAMPP/
    └htdocs/
    └iphone/
    ├index.html
    └css/
    └main.css
    └js/
    └main.js

    先ほど作成した「iphone」フォルダの中に、作成中のファイルをすべてコピーして移動します。

    作成中のWebページに必要なHTMLやCSS、Javascriptといったファイルをすべて「iphone」フォルダにコピーして移動しましょう。

    これで、XAMPPに作成中のWebサイトの公開が完了です。

お待たせいたしました。

これで無事サイトの公開が完了して、iPhoneで見れる準備が整いました。

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

iPhoneで確認する

iPhoneでWebサイトを確認
Glacier

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

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

Apacheを起動

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

WindowsとMacの場合は、下記のようなコントロールパネルで操作します。

windowsでApacheを起動

「Apache」の行の「Start」ボタンをクリックして「Webサーバー」を作ります。

「Apache」の文字の背景が変わり、その右に数字が出ている状態にします。

MacでApacheを起動

「Apache Web Server」をクリックして色が変わっている状態にします

その状態で、右側の「Start」ボタンをクリックして「Webサーバー」を作ります。

「Apache Web Server」が「Running」になっている状態にします。

IPアドレスの確認

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

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

その番号を確認の仕方を、WindowsとMacごとに解説していきます。

WindowdでIPアドレスを確認
  1. 接続中のWi-Fiの確認

    画面右下にある「Wi-Fi」のマークをクリックして、接続中のWi-Fiを表示します。

    接続しているW-Fiの名前の下にある「プロパティ」をクリックして、Wi-Fiの詳細を開きます。

  2. IPv4アドレスの確認

    Wi-Fiの詳細を開いて下までスクロールすると、「IPv4アドレス」という項目があります。

    その項目に書かれてる数字をどこかにメモをしてください。

    上の画像では「192.168.10.16」が、IPアドレスになります。

    この数字は人それぞれ違うので。今回はこのIPアドレスで説明していきます。

MacでIPアドレスを確認
  1. 接続中のWi-Fiの確認

    画面の右上にあるメニューアイコンから、現在接続している「Wi-Fi」を表示します。

    この状態でキーボードのoptionキーを押しながら「Wi-Fi」のマークをクリックします。

  2. IPv4アドレスの確認

    上の画像のように「IPアドレス」が表示されるので、この数字をどこかにメモをしてください。

    上の画像では「192.168.10.10」が、IPアドレスになります。

    この数字は人それぞれ違うので。今回はこのIPアドレスで説明していきます。

iPhoneでURLを入力
XAMPP/
└htdocs/
└iphone/
└index.html

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

やり方は、iPhoneブラウザでパソコンにアクセスするURLを入力するだけです。

  1. iPhoneでブラウザを開く

    iPhoneで「Safari」や「Chrome」といったブラウザを開きます。

    どのブラウザでも同じように動作するので、お好きなブラウザでやってみてください。

  2. URLを入力する
    IPアドレスファイル名

    開いたブラウザで、パソコンにアクセスするURLを入力します。

    指定するURLは「IPアドレス」と「ファイル名」を組み合わせたものを使います。

    先ほど調べたIPアドレスの「192.168.10.10」と、見たいファイル「iphone」フォルダの「index.html」を組み合わせて指定します。

    IPアドレスの部分は人それぞれ違うので、先ほどメモしたIPアドレスを入力してください。

    「iphone」フォルダの「index.html」が、iPhoneのブラウザで表示出来ていれば成功です。

index.htmlは省略が出来る

「index」というワードはトップページという意味があります。

「index.html」の場合は「index.html」の部分を省略して書くことも可能です。

ただし「index2.html」や「index-1.html」のようなファイル名は省略出来ません。

どうでしたか？iPhoneで確認が出来ましたか？

XAMPPを使えば、どの端末からでも見れるようになります。

Android端末や他のパソコンでも確認が出来るので、とても便利です！！

ぜひ活用してみてください。

デザインレシピ