「 レスポンシブＷｅｂデザイン」

webサイト作成の立場からすれば、数多いモバイル機器を揃えて検証するのは難しい。

Chromeの検証モードでモバイル表示のシュミレーターが準備されており、検証モード画面をDevtools (developer tools)と呼んでいる。

Devtoolsを使用するには対象となるページが表示されているChromeの画面で右クリックし「検証」をクリックする。右上のメニューから「その他のツール」->「デベロッパーツール」でも可能。

Devtools画面右上のToggle device toolbarで pc表示<-->モバイルシュミレーション表示 を切り替える

シュミレーション画面上のタグから各機器を選んで表示を確認できる。画面幅も表示される。

その下のカラーバーは画面の収まり具合を表示しており、はみだした場合などのソースコードを表示。