はじめに

本稿は、PCでもスマホでもタブレットでも問題なく表示されるページをGoogle Chromeでデバッグする方法に関する備忘録です。

Webデザイナーの方にとっては常識なんでしょうが、にわかサイト作成者の私は、Chromeでこんなことができるなんて知りませんでした。

操作手順

(1) Chromeのデベロッパーツールを開く

メニュー > その他ツール > デベロッパーツール

分割画面の右側がデベロッパーツール

(2) 「device toolbar」を有効にする

「Toggle device toolbar」をクリック。または、Ctrl+Shift+M

(3) Responsiveメニューからデバイス（スマホの種類）を選択

(4) デバイスフレームを有効にする

メニュー > show device frame

対象デバイスでの見え方をシミュレートできた。

以上