拡張機能不要！PC版Chromeでスマホ表示画面を確認する方法をご紹介！

スマートフォンが普及している現代では、レスポンシブWebデザインでスマホビューに対応したWebサイトが増えてきています。

そのため、Webデザイナーや趣味でWebサイトを制作している人は作成したWebサイトをスマホ表示させた時に、どのように表示されているか気になりますよね。

それでは、Google Chromeのデベロッパーツールの使い方を説明します。

まずはスマホ表示にしたいWebサイトにアクセスして、ウィンドウ右上のメニューボタンをクリックして開き「その他のツール」にマウスカーソルを乗せましょう。

サブメニューが表示されるので、「デベロッパーツール」をクリックしましょう。

ウィンドウの右側にデベロッパーツールが表示されます。

デベロッパーツールはショートカットキーが設定されており、「Ctrlキー+Shiftキー+Iキー」の同時押しや、F12キーを押すことでも開くことができます。

デベロッパーツールを表示する位置を変えたい場合は、デベロッパーツールの右上にあるメニューボタンをクリックしてメニューを開き、「Dock side」のボタンから好きな表示に変更しましょう。ボタンは左から「別のウィンドウで表示」「左側表示」「下側表示」「右側表示」となっています。

それでは、Webサイトをスマホ表示にしてみましょう。

デベロッパーツールの左上に表示されているスマートフォンのアイコンをクリックすることでスマホビューにすることができます。ショートカットキーはデベロッパーツールがフォーカスされている状態で「Ctrlキー+Shiftキー+Mキー」の同時押しです。

表示サイズがスマートフォンのサイズに変わりますが、

これだけではWebサイトがスマホ表示に切り替わりません。スマホ表示にするには、ブラウザの再読み込みボタンをクリックして再読み込みを行いましょう。

F5キー（MacであればCommant + Rキー）を押すことでも再読み込みが行われます。

Webページを再読み込みすることで、スマホ表示に切り替えることができました。

スマホ表示にすることで、スマートフォン操作と同じようにクリックでタップ・ドラッグでスワイプ操作が行えるようになります。

スマホ表示から通常の表示に戻すには、デベロッパーツールのスマートフォンアイコンをクリックすることで元に戻すことが出ます。

もしくはショートカットキーの「Ctrlキー+Shiftキー+Mキー」の同時押しを行いましょう。

Chromeには特定のスマートフォンの設定がプリセットとして用意されており、ウィンドウ上部の「Responsive」の部分をクリックすることでメニューから選択することができます。選べるプリセットはGalaxy・Pixel・iPhone・iPadの各機種となっています。

「Edit」をクリックすると、他のスマートフォンのプリセットを選択したり、自分でプリセットの項目をカスタムして作成することができますよ。

「Responsive」を選択していると、その右側に解像度の数値入力欄が表示されます。

横×縦の解像度を320px～2560pxから選択することが可能となっています。

また、そのすぐ下に表示されている区切り付きのバーは中央が「Mobile S-320px」サイズ・端に行くにつれてM・L・Tabletサイズへと変化し、クリックすることで指定した解像度へ設定することができます。

スマホの向きはデフォルトでは縦になっています。

向きを変更するには、ブラウザ上部メニューの右側にあるアイコンをクリックしましょう。これでスマホの向きが横に切り替わりますよ。再度クリックすることて向きを縦に戻すことができます。

スマートフォンのプリセットを使用している時に、フレーム表示に対応しているプリセットであればスマートフォンのフレームを表示させることができます。

ブラウザウィンドウ右上のメニューボタンをクリックして「Show device frame」をクリックしましょう。

スマートフォンのフレームが表示され、どのような感じになるのかイメージしやすくなりますよ。

ブラウザウィンドウの右上にあるメニューボタンからは、様々な設定が行えます。その他の設定について軽くご紹介します。