ブログをカスタマイズしていると、やがてレスポンシブデザインという壁にぶち当たる。そんな時に、今まではブログを設定しては自分のスマホで表示を確認するという面倒な作業を行ってきた。

しかし、「Google Chrome」の「デベロッパーツール」を使えば、PCからスマホの表示を確認することができるので、今までの面倒な作業を省略できる。また、スマホのみならずタブレットの表示も確認ができる優れものである。

とても便利なので、このデベロッパーツールを使ってスマホの表示を確認する方法を書き残しておくことにする。

操作手順

Chromeのデベロッパーツールを起動する

・ブラウザの右上にある「︙」をクリックする
・「その他のツール」を選択する
・「デベロッパーツール」を選択する

デバイスモードに切り替える

・右上のツールバーのデバイスアイコンを選択する
・「Ctrl＋Shift＋M」キーを押しても切替可能

※表示がスマホ版になっていない場合は、ページを更新すれば切り替わる

表示させたいデバイスを選択する

・サイト表示画面の上にある「Responsive▼」をクリックする
・表示するデバイスが一覧されるので、表示を見たいデバイスを選択する

デバイスの種類を追加する

・右のツールバーの「︙」をクリックする
・「Settings」を選択する
・Settingsメニューの「Device」を選択する
・デバイスが一覧されるので、追加したいデバイスを選択する

※「Add Custom device…」を選択すると、カスタムサイズのデバイスを追加できる