PCのChromeブラウザでスマホサイズの画面を見る方法

この記事では、PCを使って、Webサイトがスマホサイズではどのように表示されるのかを紹介したいと思います。また、極力簡単に確認することを目的にするので、ブラウザに備わっている拡張機能は一切使いません！

まずはスマホサイズで見たいWebサイトを訪れ、画面上で右クリック。右クリックすると、以下の画面のような表示がでてきます。

右クリックを行い上記のような表示がでてきたら、一番したにある検証をクリック。するとなにやら難しそうな表示が右側に出てきます。

なにやら難しそうな表示が右側にでてきたら、右上のスマホ型のアイコンをクリックします。

このように操作するとスマホサイズでWebサイトが表示されたかと思います。

画面上部の「Responsive」というボタンをクリックすると、様々なデバイスが出てきます。

Webサイトを表示したいデバイスを選ぶことでそのデバイスのサイズであれば、どのようにWebサイトが表示されるかを確認することができます。

画面上部のバー右側のスマホが回っているようなアイコンをクリックすることで、スマホを回転した場合、どのようにWebページが表示されるかも確認できます。

拡張機能を入れることなく、簡単にスマホサイズでどのようにWebサイトが表示されるか確認できる方法を紹介しました。また、このスマホサイズにした際にWebページのキャプチャを取ることもこの検証ツールを使うことによってできるので、またの機会に紹介したいと思います。