今まで知らなかった私がバカでした・・・というオチのつきそうな内容です。
インターネットサイト（ホームページ、ブログなど）を作っていてスマホやタブレットではどう表示されてるのかな？と思ったことないですか？しかも、機種によっては画面サイズが違うからいろんな機種の表示を試してみたいなんてことありませんか？
この機能を知るまで私は一生懸命自分のスマホ片手に確認してました。
ではどうやってパソコンの画面上でスマホやタブレットなどの表示を確認するのか・・・特別なツールやサイトで見るの？
いやいやそんなことをしなくても、いつも使っているインターネットブラウザ標準の機能でできてしまうんですね、これが！
早速やり方を紹介します。Google Chromeを例に説明しますが、他のブラウザでも同様の機能がありますからやってみてくださいね。
パソコンからサイトのモバイル表示を確認する方法
デベロッパーツールってご存知ですか？ページのソースを確認したり、CSSをカスタマイズするときに「この部分はどのセレクタが適用されているのか？」を知ることができる便利なツール。実はこの機能にモバイル表示のツールも備わっているんです。
デベロッパーツールの起動方法は２種類
１つめはページを表示している状態でキーボードの「F12」を押す方法。これが一番単純です。
そして２つめはメニューから「その他のツール」→「デベロッパーツール」を起動する方法。
どちらの方法でもいいので開いてみてください。
ページのプレビューと共にコードのようなものが表示されますね（上下表示の場合と左右表示の場合あり）
ここからが本番です
- コードが表示されている側の一番上にある左から２つ目の画面が重なっているようなアイコンをクリックします
- ここをクリックして見てみたい機種を選択します
- 正常に表示されなかったら画面をリロードします
すると、プレビューの上に何か追加されますね、何となく画面サイズのような、機種名のような（写真はGalaxy S5）
お？画面が小さくなった・・・でも何か変？レスポンシブ対応だったりモバイル表示用にテーマ切り替えたりしてるはずなのに縮小されただけ？となった方、正解？です。
すると・・・
写真のようにきちんとモバイル用の表示になりましたね。
Chromeの仕様なのか、最初だけリロード（画面の更新）が必要なようです。私はここで「なんだ、表示できないじゃん！！」と少々イライラしました・・・。
の画面の一番右にある「×」をクリックすると通常のパソコン表示に戻ります。
ここでも「戻らないじゃん」という方、リロードしてみてくださいね。
以上、「スマホで見てみる必要なし！パソコンからサイトのモバイル表示を確認する方法」でした。
