パソコンでスマホ画面を様々な形式で表示・確認する方法!【Chromeブラウザ編】

パソコンとスマホ 便利アプリ・ツール・サイト

こんにちは、おひとりさまブロガー和泉です!

今日は、「パソコンでスマホ画面を様々な形式で表示・確認する方法(chrome編)」についてを解説します。

この方法は、私自身も実際によく利用していて、めちゃくちゃ便利です。

簡単に出来るので是非やってみてください。

記事を読むのが面倒だよ!って方は動画でも解説しています

動画でも解説しています。

どうやってパソコンでスマホ画面を表示させて確認するのか?

そもそもパソコンでスマホ画面を確認することが出来るのか?ですが、、、

Google chromeブラウザの「デベロッパーツール」を使うことで簡単に出来ます!

「デベロッパーツール」とは?

  • ホームページのHTML・CSSソースを知ることができる
  • スマホ画面の表示を確認できる

自分のホームページ以外も確認することが出来、WEBデザインをしている人が主に使っている便利ツールです。

そのツールを今回使用してパソコンでスマホ画面を表示させます。

以下のスマホの形式で表示することが出来、めちゃくちゃ便利ですよ。

  • Galaxy S5
  • Nexus 5X
  • Nexus 6P
  • iPhone 5
  • iPhone 6
  • iPhone 6 plus
  • ipad
  • ipad pro

例えば、以下はパソコンでchromeのブラウザを開いて、Galaxy S5を表示させています。

パソコンでスマホ画面を表示する方法

スマホから見た感じと同じように表示されているのがわかるかと思います。

パソコンでスマホ画面を表示する方法

では、早速、パソコンを使ってスマホ画面を表示する方法を解説します!

今回はGoogle chromeのブラウザを使うので、もしパソコンにGoogle chromeをインストールしていないよって方はしておいてください。

step1 パソコンでGoogle chromeブラウザを開きます。

chrome

step2 パソコンでスマホ画面で表示をしたいURLを開きます。

今回は、私自身の「おひとりさまですブログ」を開きました。

おひとりさまですブログ

step3 画面上のバーの「…」をクリック

step4 「その他のツール」をクリック

step5 「デベロッパーツール」をクリック

おひとりさまですブログ

step6 スマホ画面になりました!

早速、パソコンからスマホ画面にすることが出来ました。

パソコンでスマホ画面を表示する方法

形式を変える

step1 スマホ名が書かれている「▼」をクリック

step2 好きなスマホを選択します

今回は「iPhone6」を選択

おひとりさまですブログ

step3 iPhone6の形式で表示することが出来ました!

おひとりさまですブログ

最後に

ここまで「パソコンでスマホ画面の表示を確認する方法」について解説してきました。

例えば、パソコンで作った記事をスマホ画面で気軽に確認したいって時や、画像がスマホから見たときにはみ出していないか?などの確認に使えるので、めちゃ便利ですよね。

めちゃくちゃ簡単な方法なので、ぜひやってみてください^^

タイトルとURLをコピーしました