chrome-edge-display

お役立ち情報 ブログ

Chrome・Edgeブラウザでスマホ表示する方法【PC版で確認】

2021年8月3日

PC上でもスマホ表示で、ブログがどう見えるか確認したい…。

そんな疑問にお応えする記事です。

この記事で分かることは、下記のとおりです。

この記事でわかること

  • Chromeブラウザでスマホ表示する方法
  • Edgeブラウザでスマホ表示する方法

結論、Chrome・Edgeブラウザをスマホ表示するには開発者ツールからできます。

ブログは、8割の人がスマホで見ています。

そのためブログ制作には、最後にスマホでどう見えるかチェックする必要が。

そこで、Chrome・Edgeのブラウザでスマホ表示する方法も解説します。

今回は、Windowsの解説していますので参考にしてください。

Chromeブラウザでスマホ表示する方法

chrome-edge-display

Chromeでスマホ表示する方法は、開発者ツール(デベロッパー)からできます。

開発者ツールを開くには、4通りの方法があります。

4通りの方法

  • マウスを右クリックして「 検証 」を選択。
  • Chromeブラウザの右上にある「  」から「 その他のツール 」「 デベロッパーツール 」を選択。
  • ショートカットキー「Ctrl」+「 Shift 」+「 I 」
  • キーボードの「 F12 」

chrome-display
chrome-display

開発者ツールを開きますと、ブログとコードが半分ずつ表示されます。

右側のコードが、開発者ツールになります。

chrome-display

開発者コードの位置は、移動させることが可能です。

  • 別ウインドウ
  • 左側に配置
  • 下側に配置
  • 右側に配置
edge-display

開発者コード側のツール上部デバイスアイコンで、スマホとPC表示の切り替えできます。

chrome-display

左側のウェブページが表示してある「 Responsive 」で、スマホの種類が選べます。

今回は「 Galaxy S5 」を選択。

chrome-display

スマホの種類を変えても、ウェブ表示上ではPCのままなので更新します。

chrome-display

更新すると、スマホ表示になります。

これで、スマホサイズでブログを確認できますよ。

chrome-display

確認が終わりましたら、開発者ツールの閉じる方法を解説。

  • 左のウェブ側の「  」から「 Close DevTools 」
  • 開発者コードの右上にある「  」

このどちらかで、閉じることができます。

chrome-display

Chromeとスマホ表示との違いを見比べてみます。

行間の広さに違いがあるくらいで、ほとんど違いがありませんね。

chrome-display

Edgeブラウザでスマホする方法

chrome-edge-display

Edgeでスマホ表示する方法は、開発者ツール(デベロッパー)からできます。

開発者ツールを開くには、4通りの方法があります。

4通りの方法

  • マウスを右クリックして「 開発者ツールで調査する 」を選択。
  • Chromeブラウザの右上にある「  」から「 その他のツール 」「 開発者ツール 」を選択。
  • ショートカットキー「Ctrl」+「 Shift 」+「 I 」
  • キーボードの「 F12 」
edge-display

開発者ツールを開きますと、ブログとコードが半分ずつ表示されます。

右側のコードが、開発者ツールになります。

edge-display

開発者コードの位置は、移動させることが可能です。

  • 別ウインドウ
  • 左側に配置
  • 下側に配置
  • 右側に配置
edge-display

開発者コード側のツール上部デバイスアイコンで、スマホとPC表示の切り替えできます。

chrome-display

左側のウェブページが表示してある「 Responsive 」で、スマホの種類が選べます。

今回は「 Galaxy S5 」を選択。

edge-display

スマホの種類を変えても、ウェブ表示上ではPCのままなので更新します。

chrome-display

更新すると、スマホ表示になります。

これで、スマホサイズでブログを確認できますよ。

chrome-display

確認が終わりましたら、開発者ツールの閉じる方法を解説。

  • 左のウェブ側の「 」から「 DevToolsを閉じる
  • 開発者コードの右上にある「  」

このどちらかで、閉じることができます。

edge-display

Edgeとスマホ表示との違いを見比べてみます。

フォントの大きさや行間の広さに違いがあるくらいで、ほとんど違いがありませんね。

edge-display

まとめ:ブログはスマホ表示で確認が大切

ということでまとめます。

Chrome・Edgeブラウザをスマホ表示で見る方法は、4通りの方法があります

Chrome

1.マウスを右クリックして「 検証 」を選択。

2.Chromeブラウザの右上にある「 」から「 その他のツール 」「 デバロッパツール 」を選択。

3.ショートカットキー「Ctrl」+「 Shift 」+「 I

4.キーボードの「 F12

Edge

1.マウスを右クリックして「 開発者ツールで調査する 」を選択。

2.Chromeブラウザの右上にある「 」から「 その他のツール 」「 開発者ツール 」を選択。

3.ショートカットキー「 Ctrl 」+「 Shift 」+「 I

4.キーボードの「 F12

開発者コード側のツール上部デバイスアイコンで、スマホとPC表示の切り替えできます。

chrome-display

ウェブ側のレスポンシブで、スマホの種類を選びます。

chrome-display

PCでブログ作成して公開するまえに、スマホ表示で確認しましょう。

8割の人が、スマホでブログを見ますので。

今回の開発者ツールを使えば、手軽にスマホ表示でチェックできますよ。

関連記事 >>【1分で分かる】Chrome・Edge閲覧履歴からウェブページを検索する方法

この記事があなたの参考になれば嬉しいです。

スポンサーリンク

-お役立ち情報, ブログ
-, , ,