スマホで見てみる必要なし!パソコンからサイトのモバイル表示を確認する方法

公開日:2016年12月4日 ホームページ作成
Knowledge Base パソコン

今まで知らなかった私がバカでした・・・というオチのつきそうな内容です。

インターネットサイト(ホームページ、ブログなど)を作っていてスマホやタブレットではどう表示されてるのかな?と思ったことないですか?しかも、機種によっては画面サイズが違うからいろんな機種の表示を試してみたいなんてことありませんか?

この機能を知るまで私は一生懸命自分のスマホ片手に確認してました。

ではどうやってパソコンの画面上でスマホやタブレットなどの表示を確認するのか・・・特別なツールやサイトで見るの?

いやいやそんなことをしなくても、いつも使っているインターネットブラウザ標準の機能でできてしまうんですね、これが!

早速やり方を紹介します。Google Chromeを例に説明しますが、他のブラウザでも同様の機能がありますからやってみてくださいね。

パソコンからサイトのモバイル表示を確認する方法

デベロッパーツールってご存知ですか?ページのソースを確認したり、CSSをカスタマイズするときに「この部分はどのセレクタが適用されているのか?」を知ることができる便利なツール。実はこの機能にモバイル表示のツールも備わっているんです。

デベロッパーツールの起動方法は2種類
1つめはページを表示している状態でキーボードの「F12」を押す方法。これが一番単純です。

そして2つめはメニューから「その他のツール」→「デベロッパーツール」を起動する方法。

どちらの方法でもいいので開いてみてください。

ページのプレビューと共にコードのようなものが表示されますね(上下表示の場合と左右表示の場合あり)

ここからが本番です

  1. コードが表示されている側の一番上にある左から2つ目の画面が重なっているようなアイコンをクリックします
  2. スマホで見てみる必要なし!パソコンからサイトのモバイル表示を確認する方法

    すると、プレビューの上に何か追加されますね、何となく画面サイズのような、機種名のような(写真はGalaxy S5)

  3. ここをクリックして見てみたい機種を選択します
  4. スマホで見てみる必要なし!パソコンからサイトのモバイル表示を確認する方法

    お?画面が小さくなった・・・でも何か変?レスポンシブ対応だったりモバイル表示用にテーマ切り替えたりしてるはずなのに縮小されただけ?となった方、正解?です。

  5. 正常に表示されなかったら画面をリロードします
  6. すると・・・
    スマホで見てみる必要なし!パソコンからサイトのモバイル表示を確認する方法
    写真のようにきちんとモバイル用の表示になりましたね。

    Chromeの仕様なのか、最初だけリロード(画面の更新)が必要なようです。私はここで「なんだ、表示できないじゃん!!」と少々イライラしました・・・。

スマホで見てみる必要なし!パソコンからサイトのモバイル表示を確認する方法
の画面の一番右にある「×」をクリックすると通常のパソコン表示に戻ります。

ここでも「戻らないじゃん」という方、リロードしてみてくださいね。

以上、「スマホで見てみる必要なし!パソコンからサイトのモバイル表示を確認する方法」でした。

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報