自分でウェブサイトを開設したときに気になるのが、スマホから見たときの画面。スマホの実機が手元になくても、Chromeではスマホのブラウザをエミュレーションする機能が標準で搭載されている。「デベロッパーツール」の使い方をマスターしよう。

Google Chromeに搭載されている「デベロッパーツール」は開発者向けの機能だが、この中に、スマホやタブレットのブラウザをエミュレーションし、どのように表示されるかを確認する機能がある。対応しているのは、iPhoneの各バージョンからAndroid系の端末まで多種多様。ここでハードを選択すると、その機器の画面サイズでサイトが表示され、どのように見えているのかをチェックできる。
機器やブラウザによって微妙なCSSの反映の違いなどがあるため、100％同じように表示されるわけではないが、どんな感じで表示されているのかを大まかに把握するのには充分。自分のサイトだけでなく、参考にしているサイトのスマホ版の画面を確認するのに、ぜひ活用したい。

■ ChromeでウェブページをiPhone5の画面サイズに変換

Chromeの右上のメニューから「ツール」の「デベロッパーツール」を開こう

「デベロッパーツール」がブラウザ下部に開くので、右上にある「>=」という表示の「Show drawer」をクリックしよう

「Emulation」タブを開いて「Device」で「Apple iPhone5」を選択。「Emulate」ボタンをクリックしよう

Chromeで表示中のウェブページが、iPhone5の画面に変換されるぞ