PC画面からスマホ表示を確認する方法

こんにちは、寺おか です。
ブログやWEBサイト、SNSを
PCから編集するって多いと思います。

でも、文章の改行位置などが
PCでは良くてもスマホだと見辛い…
なんてことも出てきます。

そんなときに便利な
PC画面からスマホ表示を確認する方法
をご紹介します。

シンプルなショートカットキー操作のみで
できてしまう優れもの。

これでいちいちPC上で
　・画面をスマホサイズに縮めてみる
　・スマホURLを入力して表示させる
　・スマホで実際に表示させて確認する
というのをしなくても済みますよ＾＾

使用するブラウザはGoogleChrom

デバイスモード 初回の設定方法

まず、Google Chromeで確認したいページを開く。

『F12』キーを押して
ディベロッパーツールを表示させる。

※画面下、あるいは左右どちらかに表示されます

すると、端末の画面表示になりました。
これがデバイスモードです。

画面上部の
「Dimensions: Responsive ▼」から
確認したいデバイスを選ぶ。

『F5』キーを押すと選んだスマホ画面に。

元に戻す場合は『F12』キーを押します。
これでデバイスモードが終了します。

２回目以降の簡単ショートカット

一度設定したら

Google Chromeで確認したい画面を開く
　▼
『F12』を押す
　▼
『F5』を押す

だけでスマホ表示の確認ができます。

※レスポンシブサイトの場合は『F12』だけでOK！

実際の操作感覚はスマホで確認しよう

Google Chromeのデバイスモードは
とても便利な機能ですが、
あくまでも目安として参考にしてください。

操作感を厳密にチェックしたい場合は、
実際にスマホで表示させて確認しましょう。

いかがでしたか？
こういうちょっとした知識で
日々の作業がぐっと簡略化されますよね。

お役に立ちましたら幸いです。

ではでは、また！