Google chromeでスマホ表示画面(レスポンシブデザイン)を確認

サイト運営するにあたって、
スマホ対応(レスポンシブデザイン)は、
ほとんどのサイト管理者が考えなければいけない問題です。

その際、パソコンはもちろん、
スマホ表示画面やタブレット表示画面を確認する必要があります。
 

それを手軽に行えるのが、
ブラウザ「Google chrome」のデベロッパーツールです。

これは拡張機能を追加する必要がなく、
Google chromeがインストールされている
のであれば誰でもすぐに使うことができます。

今回は、Google chromeで
スマホ表示画面(レスポンシブデザイン)を確認する方法を紹介します。

 

Google chromeでスマホ表示画面(レスポンシブデザイン)を確認する方法

まず、スマホ表示画面を確認したいページを
Google Chromeで開きます。
 

ページを開いたら、Google Chrome画面の右上にある
「Google Chromeの設定」→「その他のツール」
→「デベロッパーツール」をクリックします。
Chromeの設定
 

そうすると以下のような表示画面になります。
Chromeのデベロッパーツール
 

「Responsive▼」からスマホの機種をクリックします。
※ここでは「iPhone6/7/8」をクリックしてみます。
Chromeのスマホの機種を選択
 

※「Responsive」の表示がない場合は、下のマークをクリックしてみてください。

 

これで「iPhone6/7/8」でどのように表示されるかわかります。
ChromeのiPhoneの表示画面
 

表示が正確に反映されない場合がありますので、
更新するために「F5」を押します。

もしくは、スーパーリロードをします。
「Ctrl + F5」を押します。
(フルリロード、強制再読み込みとも言う)

※スーパーリロードとは、キャッシュを利用せず
全てのファイルを読み込む更新方法です。
 

以上が、Google Chromeでスマホ表示画面
(レスポンシブデザイン)を確認する方法です。
 

気づかれたかもしれませんが、
デベロッパーツールを表示させる方法は
ショートカットキー「Ctrl + Shift + I」
を押すことでも可能です。
 

さらにもっと簡単な方法もあって、
「F12」を押すだけでデベロッパーツールを
表示させることができます。
 

スマホやタブレットの表示画面を
確認する方法は様々ありますが、
このGoogle Chromeのデベロッパーツールを
使う方法が一番簡単で早いのではないかと思います。
 

余談ですが、この機能だけではなく、
Goolge Chromeは使い勝手の良い
おすすめのブラウザです。
 

ネットビジネスに関わっている人の多くは、
「Google Chrome」か「Mozilla Firefox」
を使っているのではないかと思います。

その2つ以外はあまり聞きません。
 

特に「Internet Explorer」を
使っているとは聞いたことがないような。。。

まだ、Google Chromeを使ったことがないのであれば、
これを機会にGoogle Chromeを使ってみてください。
 

 

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!

↓↓↓メルマガ登録は下のフォームから↓↓

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。