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

サイト運営するにあたって、
スマホ対応(レスポンシブデザイン)は

ほとんどのサイト管理者が
考えなければいけない問題です。
 

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

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

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

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

 

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

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

ページを開いたら、
Google Chrome画面の右上にある
「Google Chromeの設定(三本線マーク)」
→「その他のツール」→「デベロッパーツール」
をクリック。
Google Chromeでスマホ表示画面 評価 レスポンシブデザイン 確認 Google Chromeの設定 その他のツール デベロッパーツール
 

そうすると以下のような表示画面になるので、
「Toggle device mode(スマホのアイコン)」
をクリック。
デベロッパーツール Toggle device mode
 

あとは、スマホ機種を選択するだけです。
デベロッパーツール Toggle device mode スマホ機種を選択
 

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

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

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

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

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

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

スマホやタブレットの表示画面を
確認する方法は様々ありますが、

このGoogle Chromeのデベロッパーツールを
使う方法が一番簡単で早いのではないかと思います。
 

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

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

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

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

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

 

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

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

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!
(PDFとサイト版の両方をプレゼント)
AFFIKATSUGuideBook

>> メルマガ登録はこちら <<

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

メルマガ登録フォーム

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

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




コメントを残す



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

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

CAPTCHA