インターネット検索をスマートホンで行う機会が多くなった最近では、自身のサイトをスマホ表示に対応(レスポンシブ化)させることは、もはや当たり前になってきました。
しかし自分のサイトをスマートホン表示に対応させている時、いちいちスマホを起動してレイアウトを確認していたら時間がかかるしとても面倒ですよね。そこで今回は、ホームページをスマホで見た時のレイアウトをGoogle Chrome(PC)上で確認する簡単な方法についてご紹介します！
※スマホの機種ごとにレイアウトの違いを確認することも可能です。
Google Chromeでスマホレイアウトの確認
まず始めに、スマホレイアウトを確認したいページを、Chromeで開いておきます。
▼例として私のサイトで試してみます。
次にChromeの右上にある『設定』のマークから、『その他のツール』→『デベロッパーツール』を選択してください。
画面上の右もしくは下に、このようなバーが出現するので、ここの『スマホアイコン』をクリックしてください。
すると開いていたページが、以下の様にスマホレイアウトで表示されるようになります。ここで横のバーを左右に動かすことで横幅の大きさを変更して見ることもできます。
さらに、上のバーでは横幅をピクセル(px)で指定できたり、任意のデバイスを指定して、そのデバイスでのレイアウトを確認することもできます。
必ずしもスマホ上の表示と一致するワケではないので要注意
スマホでの表示を確認できるこの機能ですが、必ずしもスマホ上の表示と完全一致するワケではなく、稀に画像やiframe要素がレスポンシブになっていない状態で表示されることがあります。
その場合は、やはりスマホ上で確認するしかありません。あくまで簡易的な確認方法として、この機能を用いることをおすすめします！(ﾟ∀ﾟ)
