スマホ幅・タブレット幅での表示を確認する【Chrome検証ツールの使い方入門】

自分のPCモニター以外でサイトを見た時、どのように表示されるかも検証ツールでチェックすることが出来ます。

表示サイズを変更する

選択ツールの横にある、スマホのような形のアイコンを使います。

クリックしてみましょう。
Webページを表示している部分の見え方が、少し変わります。
下図の場合はiPhone6/7/8で見た時のプレビューです。

サイズ：の横にある▼をクリックすると、ポピュラーなスマホやタブレットの機種名が出てきます。選択肢から別のものを選べば、その端末のサイズに表示を切り替えてくれます。

この機能を使って、スマホやタブレットで見ても問題ないかを確認します。

• レイアウトは崩れていないか
• 要素がはみ出して、変な横スクロールは出ていないか
• ページの見やすさは維持されているか

検証ツールのスマホ/タブレットモードの注意点

検証ツールのスマホ/タブレットモードは、端末の環境を完全に再現したものではありません。時々、スマホのブラウザでは対応していないCSSプロパティもあるので、最後は実機で見るのが一番確実です。