サイト運営するにあたって、
スマホ対応(レスポンシブデザイン)は、
ほとんどのサイト管理者が考えなければいけない問題です。
その際、パソコンはもちろん、
スマホ表示画面やタブレット表示画面を確認する必要があります。
それを手軽に行えるのが、
ブラウザ「Google chrome」のデベロッパーツールです。
これは拡張機能を追加する必要がなく、
Google chromeがインストールされている
のであれば誰でもすぐに使うことができます。
今回は、Google chromeで
スマホ表示画面(レスポンシブデザイン)を確認する方法を紹介します。
Google chromeでスマホ表示画面(レスポンシブデザイン)を確認する方法
まず、スマホ表示画面を確認したいページを
Google Chromeで開きます。
ページを開いたら、Google Chrome画面の右上にある
「Google Chromeの設定」→「その他のツール」
→「デベロッパーツール」をクリックします。
そうすると以下のようにスマホ画面のような表示画面になります。
「Responsive▼」からスマホの機種をクリックします。
![](https://i0.wp.com/catherineroyal.com/wp-content/uploads/2021/02/4.png?resize=575%2C631&ssl=1)
※「Responsive」の表示がない場合は、下記のスマホマークをクリックしてみてください。
これで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を使ってみてください。
最後まで読んで頂いてありがとうございました。
記事が少しでもお役にたるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。
ブログの始め方・稼ぎ方をまとめた7日間無料の「副業ブログ講座」を開設中です。
↓↓↓メルマガ登録は下のフォームから↓↓↓
![友だち追加](https://i0.wp.com/scdn.line-apps.com/n/line_add_friends/btn/ja.png?h=36&ssl=1)
![](https://i0.wp.com/qr-official.line.me/sid/M/227hkmdz.png?ssl=1)