ＰＣとスマホでは、同じウェブサイトでも見え方が変わります。
ＰＣからアクセスするとＰＣ用の画面を表示し、スマホからアクセスするとスマホ用の画面が表示されのは、レスポンシブデザインされているからです。
※レスポンシブデザイン：端末のサイズに合わせて表示する機能
スマホ用の画面が用意されていて、それを確認したいときに、ＰＣに表示させるのは簡単です。
ここでは、ＰＣでウェブサイトをスマホやタブレットのような画面表示にする方法を紹介します。
ウィンドウの幅を狭めてみる
ウィンドウの幅を狭めるだけで、大まかですが見え方が変わります。
ブラウザの画面の左右の端にマウスポインタを合わせます。
左右矢印マークになったら、画面の横幅を縮めていきます。
すると表示が切り替わります。
最小値まで縮めると、スマホの表示に近い見え方になります。
Microsoft Edge と Google Chrome のどちらでも同じように表示が切り替わります。
これだけでスマホ画面をイメージできるでしょう。
「デベロッパーツール」を使う
スマホ画面の確認は、ブラウザ標準機能の「デベロッパーツール」が便利です。
Microsoft Edge の「デバイスエミュレーション」の使い方
「F12」キーを押します。
「Microsoft Edge 開発者ツールを開きますか？」画面が表示されたら「DevToolsを開く」をクリックします。
※始めて使うときに表示される
「開発者ツール」が開きます。
※開発者ツールとはデベロッパーツールのこと
ツールバーに「Toggle device emulation」ボタンがあります。
ボタンにマウスポインタを合わせると「Toggle device emulation」とポップアップが出ます。
そのままクリックします。
ＰＣ用の画面がスマホ用の画面に切り替わります。
※このとき「Toggle device emulation」ボタンが青色になる
スマホ用の画面にはツールバーが現れます。
「Dimensions:Responsive」ボタンをクリックすると、プルダウンリストにスマホやタブレットの端末名が現れます。
ここで「iPhone SE」を選んでみます。
画面が「iPhone SE」の見え方になります。
スマホ用の画面上ではマウスポインタがタップ表示に変わります。
スマホらしさが伝わる粋な計らいですね。
Microsoft Edge の開発者ツールを開く方法
「F12」キーを使わない開き方もあります。
「…」から開く
右上の「…」をクリックします。
※「…」は「設定など」のメニューアイコン
展開したメニューの「その他のツール」にマウスポインタを合わせ、さらに展開したメニューの「開発者ツール」をクリックします。
マウスの右クリックから開く
画面上で右クリックします。
展開したメニューの「開発者ツールで調査する」をクリックします。
Google Chrome の「デバイスツールバー」の使い方
「F12」キーを押します。
「デベロッパーツール」が開きます。
ツールバーに「Toggle device toolbar」ボタンがあります。
ボタンにマウスポインタを合わせると「Toggle device toolbar」とポップアップが出ます。
そのままクリックします。
ＰＣ用の画面がスマホ用の画面に切り替わります。
※このとき「Toggle device toolbar」ボタンが青色になる
スマホ用の画面にはツールバーが現れます。
「Dimensions:Responsive」ボタンをクリックすると、プルダウンリストにスマホやタブレットの端末名が現れます。
ここで「iPhone SE」を選んでみます。
画面が「iPhone SE」の見え方になります。
スマホ用の画面上ではマウスポインタがタップ表示に変わります。
スマホらしさが伝わる粋な計らいですね。
Google Chrome のデベロッパーツールを開く方法
「F12」キーを使わない開き方もあります。
「…」から開く
右上の「…」をクリックします。
※「…」は 「Google Chromeの設定」のメニューアイコン
展開したメニューの「その他のツール」にマウスポインタを合わせ、さらに展開したメニューの「デベロッパーツール」をクリックします。
マウスの右クリックから開く
画面上で右クリックします。
展開したメニューの「検証」をクリックします。
おわりに
スマホ用の画面を確認したいとき、実機での確認がベストです。
とはいえ、そうそう用意できるものではありません。
そんなとき、「デベロッパーツール」を使えばスマホ用の画面が確認できます。
このデベロッパーツールは、実機での画面とは完全に一致するわけではありません。
ただ、各端末でのイメージを確認できるのは便利です。
例えば、スマホの機種変更に迷ったときの参考になるかもしれません。
また、スマホ操作を教えたり、プレゼンするときにも使えそうです。
今回は、ＰＣでサイトのスマホ表示が確認できる「レスポンシブ機能」を紹介しました。
知っておくといいでしょう。
参考になれば幸いです。
