PCでスマホ表示に切り替える方法 - Chrome Edge Firefox

この記事ではPCのブラウザーでスマホページを開く方法を詳しく解説していきます。

Webサイトを運営している人は是非覚えておいてほしい機能です。

Chromeを使ってサイトをスマホ表示に切り替える方法

利用者が最も多いとされているGoogle Chromeを使ってPCで見ているサイトをスマホ表示に切り替える方法から詳しく解説していきます。

STEP

キーボードのF12を押してデベロッパーツールを開く

Google Chromeをアクティブウィンドウにした状態で、キーボードのF12キーを押してください。

アクティブウィンドウとはPC画面の一番手前に表示されていて、操作可能なウィンドウを指します。
反対に、一番前以外に表示されていて、操作できないウィンドウを非アクティブウィンドウと呼びます。

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

赤枠で囲った部分がデベロッパーツールです。

デベロッパーツールとはWebサイトのコンテンツやリソースを簡単に分析することができる機能です。

STEP

デベロッパーツールのスマホアイコンをクリックしてスマホ表示に切り替える

デベロッパーツールが開いたら、デベロッパーツールの左上にあるスマホとタブレットの図が描かれたアイコンをクリックしてください。

クリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。

その上の青枠内には現在の解像度が表示されており、以下の画像では460✕1213での見え方になっています。

ここに表示されている数字はpoint（CSSピクセル）です。
1ptは1インチの72分の1のサイズで、pixelとは全く異なる数字なので注意してください。

もう一度スマホとタブレットの図が描かれたアイコンをクリックとPC表示に戻ります。

デバイスを選択して表示する大きさを変更する

デベロッパーツールには、デバイス（機種）に応じた大きさ（point）が予め用意されており、「iPhone12Proではどのように表示されるか？」なども確認できます。

デベロッパーツールでスマホ表示に切り替えた後、左上にある[Dimensions: Responsive]をクリックしてください。

[Dimensions: Responsive]をクリックすると下に向かってプルダウンメニューが展開されます。

展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを（機種）を選択してください。
選択したデバイス（機種）の画面サイズに調整されます。

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

[Edit]をクリックすると、画面の左側に「Emulated Devices」が表示されます。

その中には先程まで表示されていないデバイス（機種）も多数表示されています。

「Emulated Devices」内に表示されているデバイス名（機種名）にチェックを入れると、左側のDimensionsにその機種が追加されます。

以下の画像ではiPhone Xにチェックを入れて追加しました。

これでiPhone Xの画面表示を確認することができます。

Emulated Devicesにも選択したい機種がない場合

Emulated Devicesにも選択したい機種がない場合は、Add custom deviceをクリックして登録することができます。

赤枠内に必要項目を入力してAddをクリックすると追加されます。

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

Qiita

iPhone画面サイズ、ピクセル数早見表 - Qiita 機種名 ハードウェア名 有機ELディスプレイ対応 画面サイズ CSSピクセル デバイスピクセル デバイスピクセル比 アスペクト比 発売初期搭載iOS 最終対応iOS 発売年 iOS15...

Microsoft Edgeを使ってサイトをスマホ表示に切り替える方法

次はMicrosoft Edgeを使ってPCで見ているサイトをスマホ表示に切り替える方法を詳しく解説していきます。

STEP

キーボードのF12を押してDevToolsを開く

Microsoft Edgeをアクティブウィンドウにした状態で、キーボードのF12キーを押してください。

アクティブウィンドウとはPC画面の一番手前に表示されていて、操作可能なウィンドウを指します。
反対に、一番前以外に表示されていて、操作できないウィンドウを非アクティブウィンドウと呼びます。

キーボードのF12キーを押すと、Microsoft Edgeの右側に「Microsoft Edge開発者ツールを開きますか？」と書かれた画面が表示されます。

下の方にある[DevToolsを開く]をクリックしてください。

今度このメッセージを表示させないためには「決定を記憶する」にチェックを入れてから[DevToolsを開く]をクリックしてください。

STEP

DevToolsのスマホアイコンをクリックしてスマホ表示に切り替える

[DevToolsを開く]をクリックすると、Microsoft Edgeの右側に「Microsoft Edge DevToolsへようこそ」と書かれた画面がひょうじされます。

その上にあるスマホとタブレットのアイコンをクリックしてください。

クリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。

その上の青枠内には現在の解像度が表示されており、以下の画像では599✕458での見え方になっています。

ここに表示されている数字はpoint（CSSピクセル）です。
1ptは1インチの72分の1のサイズで、pixelとは全く異なる数字なので注意してください。

デバイスを選択して表示する大きさを変更する

Microsoft EdgeのDevToolsには、デバイス（機種）に応じた大きさ（point）が予め用意されており、「iPhone12Proではどのように表示されるか？」なども確認できます。

デベロッパーツールでスマホ表示に切り替えた後、左上にある[ディメンション: レシポンシブ]をクリックしてください。

[ディメンション: レシポンシブ]をクリックすると下に向かってプルダウンメニューが展開されます。

展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを（機種）を選択してください。選択したデバイス（機種）の画面サイズに調整されます。

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

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

「エミュレート済みデバイス」内に表示されているデバイス名（機種名）にチェックを入れると、左側の[ディメンション: レシポンシブ]にその機種が追加されます。

以下の画像ではiPhone Xにチェックを入れて追加しました。

これでiPhone Xの画面サイズでの表示を確認することができます。

エミュレート済みデバイスにも選択したい機種がない場合

エミュレート済みデバイスにも選択したい機種がない場合は、[カスタムデバイスの追加]をクリックして登録することができます。

赤枠内に必要項目を入力して追加をクリックすると追加されます。

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

Qiita

iPhone画面サイズ、ピクセル数早見表 - Qiita 機種名 ハードウェア名 有機ELディスプレイ対応 画面サイズ CSSピクセル デバイスピクセル デバイスピクセル比 アスペクト比 発売初期搭載iOS 最終対応iOS 発売年 iOS15...

Firefoxを使ってサイトをスマホ表示に切り替える方法

次はFirefoxを使ってサイトをスマホ表示に切り替える方法を詳しく解説していきます。

STEP

キーボードのF12を押して開発ツール画面を開く

Firefoxをアクティブウィンドウにした状態で、キーボードのF12キーを押してください。

アクティブウィンドウとはPC画面の一番手前に表示されていて、操作可能なウィンドウを指します。
反対に、一番前以外に表示されていて、操作できないウィンドウを非アクティブウィンドウと呼びます。

STEP

開発ツールのスマホアイコンをクリックしてスマホ表示に切り替える

キーボードのF12キーを押すとFirefoxの画面下半分くらいに開発ツールが表示されます。

開発ツールの右側にあるスマホとタブレットのアイコンをクリックしてください。

クリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。

その上の青枠内には現在の解像度が表示されており、以下の画像では320✕480での見え方になっています。

ここに表示されている数字はpoint（CSSピクセル）です。
1ptは1インチの72分の1のサイズで、pixelとは全く異なる数字なので注意してください。

開発ツールの画面が使いにくい場合

Firefoxの開発ツール画面は上に画面表示があり、下に開発ツールが表示されています。

スマホ表示にした場合、どうしても縦長になることが多いためこのままの状態では見づらいかもしれません。

その場合は開発ツール右下の[三点リーダ]をクリックして、表示を変更することができます。

デバイスを選択して表示する大きさを変更する

Firefoxの開発ツールには、デバイス（機種）に応じた大きさ（point）が予め用意されており、「iPhone12Proではどのように表示されるか？」なども確認できます。

開発ツールでスマホ表示に切り替えた後、左上にある[レシポンシブ]をクリックしてください。

[レシポンシブ]をクリックすると下に向かってプルダウンメニューが展開されます。

展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを（機種）を選択してください。選択したデバイス（機種）の画面サイズに調整されます。

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

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

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

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

これでチェックを入れたデバイス（機種）の画面サイズでの表示を確認することができます。

その他Google ChromeやMicrosoft Edge、Firefoxに関する記事

その他Google ChromeやMicrosoft Edge、Firefoxに関する記事はこちらです。ぜひご覧ください。