こんな人にオススメの記事です
- Chromeを使ってサイトをスマホ表示に切り替えたい人
- Microsoft Edgeを使ってサイトをスマホ表示に切り替えたい人
- Firefoxを使ってサイトをスマホ表示に切り替えたい人
この記事ではPCのブラウザーでスマホページを開く方法を詳しく解説していきます。
Webサイトを運営している人は是非覚えておいてほしい機能です。
Chromeを使ってサイトをスマホ表示に切り替える方法
利用者が最も多いとされているGoogle Chromeを使ってPCで見ているサイトをスマホ表示に切り替える方法から詳しく解説していきます。
Google Chromeをアクティブウィンドウにした状態で、キーボードのF12キーを押してください。

キーボードのF12キーを押すと、Google Chromeの右側に以下の画像のようなデベロッパーツールが開きます。
赤枠で囲った部分がデベロッパーツールです。

デベロッパーツールが開いたら、デベロッパーツールの左上にあるスマホとタブレットの図が描かれたアイコンをクリックしてください。
クリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。
その上の青枠内には現在の解像度が表示されており、以下の画像では460✕1213での見え方になっています。

もう一度スマホとタブレットの図が描かれたアイコンをクリックとPC表示に戻ります。
デバイスを選択して表示する大きさを変更する
デベロッパーツールには、デバイス(機種)に応じた大きさ(point)が予め用意されており、「iPhone12Proではどのように表示されるか?」なども確認できます。
デベロッパーツールでスマホ表示に切り替えた後、左上にある[Dimensions: Responsive]をクリックしてください。
[Dimensions: Responsive]をクリックすると下に向かってプルダウンメニューが展開されます。
展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを(機種)を選択してください。
選択したデバイス(機種)の画面サイズに調整されます。

このプルダウンメニューの中に見たいデバイス(機種)がない場合、プルダウンメニューの一番下にある[Edit]をクリックしてください。

[Edit]をクリックすると、画面の左側に「Emulated Devices」が表示されます。
その中には先程まで表示されていないデバイス(機種)も多数表示されています。

「Emulated Devices」内に表示されているデバイス名(機種名)にチェックを入れると、左側のDimensionsにその機種が追加されます。
以下の画像ではiPhone Xにチェックを入れて追加しました。

これでiPhone Xの画面表示を確認することができます。
Emulated Devicesにも選択したい機種がない場合は、Add custom deviceをクリックして登録することができます。
赤枠内に必要項目を入力してAddをクリックすると追加されます。

iPhoneの画面サイズ(CSSピクセル)については以下のサイトを御覧ください。

Microsoft Edgeを使ってサイトをスマホ表示に切り替える方法
次はMicrosoft Edgeを使ってPCで見ているサイトをスマホ表示に切り替える方法を詳しく解説していきます。
Microsoft Edgeをアクティブウィンドウにした状態で、キーボードのF12キーを押してください。

キーボードのF12キーを押すと、Microsoft Edgeの右側に「Microsoft Edge開発者ツールを開きますか?」と書かれた画面が表示されます。
下の方にある[DevToolsを開く]をクリックしてください。

[DevToolsを開く]をクリックすると、Microsoft Edgeの右側に「Microsoft Edge DevToolsへようこそ」と書かれた画面がひょうじされます。
その上にあるスマホとタブレットのアイコンをクリックしてください。
クリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。
その上の青枠内には現在の解像度が表示されており、以下の画像では599✕458での見え方になっています。

デバイスを選択して表示する大きさを変更する
Microsoft EdgeのDevToolsには、デバイス(機種)に応じた大きさ(point)が予め用意されており、「iPhone12Proではどのように表示されるか?」なども確認できます。
デベロッパーツールでスマホ表示に切り替えた後、左上にある[ディメンション: レシポンシブ]をクリックしてください。
[ディメンション: レシポンシブ]をクリックすると下に向かってプルダウンメニューが展開されます。
展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを(機種)を選択してください。選択したデバイス(機種)の画面サイズに調整されます。

このプルダウンメニューの中に見たいデバイス(機種)がない場合、プルダウンメニューの一番下にある[編集]をクリックしてください。

[編集]をクリックするとMicrosoft Edgeの右側に以下の画像で赤枠で囲った「エミュレート済みデバイス」の一覧が表示されます。
その中には先程まで表示されていないデバイス(機種)も多数表示されています。

「エミュレート済みデバイス」内に表示されているデバイス名(機種名)にチェックを入れると、左側の[ディメンション: レシポンシブ]にその機種が追加されます。
以下の画像ではiPhone Xにチェックを入れて追加しました。

これでiPhone Xの画面サイズでの表示を確認することができます。
エミュレート済みデバイスにも選択したい機種がない場合は、[カスタムデバイスの追加]をクリックして登録することができます。
赤枠内に必要項目を入力して追加をクリックすると追加されます。

iPhoneの画面サイズ(CSSピクセル)については以下のサイトを御覧ください。

Firefoxを使ってサイトをスマホ表示に切り替える方法
次はFirefoxを使ってサイトをスマホ表示に切り替える方法を詳しく解説していきます。
Firefoxをアクティブウィンドウにした状態で、キーボードのF12キーを押してください。

キーボードのF12キーを押すとFirefoxの画面下半分くらいに開発ツールが表示されます。
開発ツールの右側にあるスマホとタブレットのアイコンをクリックしてください。

クリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。
その上の青枠内には現在の解像度が表示されており、以下の画像では320✕480での見え方になっています。

Firefoxの開発ツール画面は上に画面表示があり、下に開発ツールが表示されています。
スマホ表示にした場合、どうしても縦長になることが多いためこのままの状態では見づらいかもしれません。
その場合は開発ツール右下の[三点リーダ]をクリックして、表示を変更することができます。

デバイスを選択して表示する大きさを変更する
Firefoxの開発ツールには、デバイス(機種)に応じた大きさ(point)が予め用意されており、「iPhone12Proではどのように表示されるか?」なども確認できます。
開発ツールでスマホ表示に切り替えた後、左上にある[レシポンシブ]をクリックしてください。
[レシポンシブ]をクリックすると下に向かってプルダウンメニューが展開されます。
展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを(機種)を選択してください。選択したデバイス(機種)の画面サイズに調整されます。

このプルダウンメニューの中に見たいデバイス(機種)がない場合、プルダウンメニューの一番下にある[リストを編集]をクリックしてください。

[リストを編集]をクリックするとFirefoxに登録されているデバイス(機種)の一覧が表示されます。
その中には先程まで表示されていないデバイス(機種)も多数表示されています。

表示されているデバイス名(機種名)にチェックを入れてください。

チェックを入れるとプルダウンメニューにその機種が追加されます。

これでチェックを入れたデバイス(機種)の画面サイズでの表示を確認することができます。
その他Google ChromeやMicrosoft Edge、Firefoxに関する記事
その他Google ChromeやMicrosoft Edge、Firefoxに関する記事はこちらです。ぜひご覧ください。
-
Firefoxのキャッシュをクリアする方法
Firefoxのキャッシュをクリアする一番簡単な方法は以下の手順です。 Firefoxを起動し、キーボードの[Ctrl]+ [Shift]+ [Delete]キーを押すキャッシュにチェックを入れ... -
Google Chromeの動きが遅い時の対処法14選
こんな人にオススメの記事です Google Chromeが頻繁にフリーズして困っている人 Google Chromeの動作が重くて困っている人 Google Chromeを快適に使いたい人 日々Chrome... -
Chromeで拡張機能のアイコンが消えてしまった場合の対処法
Chromeのアドレスバーの右にある拡張機能のアイコン(ショートカット)が突然消えてしまった場合、以下の要因が挙げられます。 誤って非表示にしてしまった、またはChro... -
Firefoxのプライバシーモードを使う方法
Firefoxの閲覧履歴を見られたくなく、閲覧履歴の削除し忘れが不安な場合はFirefoxの標準機能の一つであるプライバシーモードを活用してみましょう。 閲覧履歴、入力した... -
Microsoft Edgeのアドレスバーを非表示にする方法3選
こんな人にオススメの記事です Microsoft Edgeのアドレスバーを非表示にする方法を知りたい人Microsoft Edgeを全画面で広く使いたい人 Microsoft Edgeのアドレスバーを... -
Microsoft EdgeでIEモードを使う方法-Windows11
こんな人にオススメの記事です Microsoft EdgeでIEモードを使いたい人IEでしか表示できないページを使っている人IEモードの使い方がわからない人 Microsoft EdgeをIEモ... -
Microsoft EdgeとGoogle Chrome、Firefoxでダウンロードしたファイルの保存先の確認と変更方法を徹底解説
この記事では、Microsoft EdgeとGoogle Chrome、Firefoxでダウンロードしたファイルの保存先の確認方法と、ダウンロードしたファイルの保存先の変更方法を詳しく解説し... -
Microsoft Edgeでページ全体をスクリーンショットする方法
このページではMicrosoft Edgeの機能を使ってWebページ全体をスクリーンショットする方法をはじめ、Webページの一部をスクリーンショットする方法やスクリーンショット... -
【画像付き解説】Chromeのお気に入りをエクスポートする方法
Chromeのお気に入りをHTML形式でエクスポートするには以下の手順で行います。 Google Chromeを起動Google Chromeのアドレスバーに chrome://bookmarks/ と入力してエン...
最後までご覧いただきありがとうございました。
このサイトは情シスマンが半径3m以内のITに関する情報を掲載してるサイトです。
Windows系を主として、ソフトや周辺機器について思い立った物を色々解説しています。
解説している内容に誤りがあった場合や、補足が必要な場合、もっと知りたい場合はこちらのお問い合わせフォームからご連絡ください。
個人の方を限定にサポートさせていただきます。
実行環境
Windows11 Home 22H2
64 ビット オペレーティング システム
Microsoft Office 2019