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

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

その際、パソコンはもちろん、
スマホ表示画面やタブレット表示画面を確認する必要があります。
それを手軽に行えるのが、
ブラウザ「Google chrome」のデベロッパーツールです。

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

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

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

まず、スマホ表示画面を確認したいページを
Google Chromeで開きます。
ページを開いたら、Google Chrome画面の右上にある
「Google Chromeの設定」→「その他のツール」
→「デベロッパーツール」をクリックします。

そうすると以下のような表示画面になります。

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

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

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

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

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

※スーパーリロードとは、キャッシュを利用せず
全てのファイルを読み込む更新方法です。
以上が、Google Chromeでスマホ表示画面
(レスポンシブデザイン)を確認する方法です。
気づかれたかもしれませんが、
デベロッパーツールを表示させる方法は
ショートカットキー「Ctrl + Shift + I」
を押すことでも可能です。
さらにもっと簡単な方法もあって、
「F12」を押すだけでデベロッパーツールを
表示させることができます。
スマホやタブレットの表示画面を
確認する方法は様々ありますが、
このGoogle Chromeのデベロッパーツールを
使う方法が一番簡単で早いのではないかと思います。
余談ですが、この機能だけではなく、
Goolge Chromeは使い勝手の良い
おすすめのブラウザです。
ネットビジネスに関わっている人の多くは、
「Google Chrome」か「Mozilla Firefox」
を使っているのではないかと思います。

その2つ以外はあまり聞きません。
特に「Internet Explorer」を
使っているとは聞いたことがないような。。。

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