こんな人にオススメの記事です
- 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の便利な設定や役立つ操作方法オススメ13選
ここではMicrosoft Edgeの便利な設定や、役立つ操作方法をご紹介していきます。 これらの設定を知っておけばMicrosoft Edgeの操作効率がグンと上がるかもしれません。 ... -
アプリケーション
【Microsoft Edge】Copilotボタンを非表示にする方法
こんな人にオススメの記事です Microsoft Edgeに追加されたCopilot(コパイロット)ボタンを非表示にしたい人 Copilot(コパイロット)ボタンを誤ってクリックしてしま... -
アプリケーション
Firefoxでウェブ検索するとカーソルがアドレスバーに移動してしまう現象への対処法
こんな人にオススメの記事です Firefoxの真ん中にある検索バーで検索しようとすると、カーソルがアドレスバーに移動してしまって困っている人 Firefoxの真ん中にある検... -
アプリケーション
Microsoft Edgeのキーボードショートカットまとめ
覚えておくと便利なMicrosoft Edge(マイクロソフト エッジ)のキーボードショートカットをまとめました。実際の使用例や頻度等も交えながらご紹介します。 【Ctrl + Sh... -
アプリケーション
Google Chrome起動時に開くページを追加、変更する方法を徹底解説
こんな人にオススメの記事です Google Chrome起動時に、特定のページを開きたい人 Google Chrome起動時に、終了時に開いていたページを開きたい人 Google Chrome起動時... -
アプリケーション
Microsoft Edgeのお気に入りをGoogle Chromeにインポートする方法
こんな人にオススメの記事です ブラウザーをMicrosoft EdgeからGoogle Chromeに切り替えようとしている人 お気に入り(ブックマーク)をMicrosoft EdgeからGoogle Chrom... -
アプリケーション
Google Chromeのダークモードを解除する方法 7選
こんな人にオススメの記事です Google chromeが突然黒くなって困っている人 Google chromeの色を元に戻したい人 Google chromeをダークモードから通常のモードに戻した... -
アプリケーション
【Chrome】閲覧履歴を自動で削除する方法と手動で削除する方法をわかりやすく解説
こんな人にオススメの記事です Chromeの履歴を定期的に自動で削除したい人 Chromeの履歴をちょくちょく削除したい人 Chromeの履歴を簡単に削除したい人 Google Chromeの... -
アプリケーション
Google ChromeでメールリンクをGmailで開くようにする方法 - Windows11
こんな人にオススメの記事です Google ChromeとGmailを使っている人 Google Chromeでmaito:のリンク(メールアドレス)をクリックしたときにGmailで開きたい人 とにかく...
最後までご覧いただきありがとうございました。
このサイトは情シスマンが半径3m以内のITに関する情報を掲載してるサイトです。
Windows系を主として、ソフトや周辺機器の操作や設定について画像も用いながらわかりやすく解説しています。
解説している内容に誤りがあった場合や、補足が必要な場合、もっと知りたい場合はこちらのお問い合わせフォームからご連絡ください。
個人の方を限定にサポートさせていただきます。
実行環境
Windows11 Home 22H2
64 ビット オペレーティング システム
Microsoft 365