こんな人にオススメの記事です
- 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に関する記事はこちらです。ぜひご覧ください。
-
Microsoft Edgeの効率モード(バッテリー節約等)を設定する方法
Microsoft Edge(マイクロソフトエッジ)には、コンピューターのリソース (CPUやメモリ)を節約して、電力消費を最小限に抑えることでバッテリーの寿命を延ばすための効... -
IEのサポート終了に伴うお気に入りなどの移行方法
さまざまなニュースサイトなどでも取り上げられているとおり、マイクロソフト社はInternet Explorerのサポートを2022年6月15日(日本時間で2022年6月16日)に終了しまし... -
Firefoxで検索しようとするとアドレスバーに移動してしまう現象への対処法
こんな人にオススメの記事です Firefoxの真ん中にある検索バーで検索しようとすると、カーソルがアドレスバーに移動してしまって困っている人 Firefoxの真ん中にある検... -
Google Chrome(グーグル・クローム)のダークモードを解除する方法 8選
Google Chrome(グーグル・クローム)には目の負担を軽減すること等を目的に、ダークモードと呼ばれるモードが搭載されています。 ダークモード パソコンでは「ダークモ... -
Google Chromeのシークレットモード中に拡張機能を使う方法
Google Chrome(グーグルクローム)の初期設定では、拡張機能を「シークレットモードのときには実行を許可しない」となっています。 この設定を変更することで、Chrome... -
iPhoneでページ内検索をする方法 Safari・Chrome編
このページでは、iPhoneのSafariとiPhoneアプリのGoogle Chromeでウェブサイトの中の文字を検索(ページ内検索)する方法を詳しく解説していきます。 パソコンのインタ... -
Chromeの省エネモードがない場合の対処方法
こんな人にオススメの記事です Chromeで省エネモードが表示されない人 Chromeで省エネモードを利用したい人 Google Chromeにはノートパソコンなどのデバイスのバッテリ... -
Youtube動画等の再生速度を変更できる拡張機能 Video Speed Controller
こんな人にオススメの記事です Youtubeの再生速度を変更したい人 Youtubeの再生速度を倍にしたい人 WEBページにある動画や音声の再生速度を上げたり、遅くしたり、進め... -
Chromeのブックマークバーを常に表示させる方法
こんな方にオススメ Chromeのブックマークバーを常に表示させたい方 Chromeのブックマークバーが見当たらなくなって困っている方 一行でわかるブックマークバーの表示方...
最後までご覧いただきありがとうございました。
このサイトは情シスマンが半径3m以内のITに関する情報を掲載してるサイトです。
Windows系を主として、ソフトや周辺機器について思い立った物を色々解説しています。
解説している内容に誤りがあった場合や、補足が必要な場合、もっと知りたい場合はこちらのお問い合わせフォームからご連絡ください。
個人の方を限定にサポートさせていただきます。
実行環境
Windows11 Home 22H2
64 ビット オペレーティング システム
Microsoft Office 2019