パソコン

スマホでのサイトの画面表示をPCで確認する方法をご紹介!

投稿日:2018年8月13日 更新日:

スマホ画面でのサイトの表示をPCで確認する方法をご紹介!

 
 
チビッ子からお年寄りまで、スマホの所有率が79.4%となった現代、自分が運営しているサイトが、携帯やスマホから見るとどのように表示されるかを把握しておくことはとても重要なことですよね!?

私は以前はガラケーを使っていて操作が億劫だったので、携帯やスマホからの自分のサイトのページの見え方を、パソコンでチェックしていたのですが、スマホを持つようになった今も、記事を投稿したついでにパソコンで確認をしているんですよ。

携帯やスマホ画面からのサイトの見栄えを、パソコンで簡単に確認することができる方法をご紹介しますね♪

サイトのスマホ画面表示をパソコンで確認できるエミュレーション機能

これからご紹介する、PCからスマホ表示をチェックする方法は、実際のスマホでの見え方ではなく、あくまでも設定したスマホのブラウザの真似(エミューレート)をして表示するエミュレーション機能です。

エミュレーション機能は、プログラムを書き換えずに、疑似的にスマホブラウザの環境を作り出してくれるので、わざわざスマホで表示のされ方を確認する手間が省けて作業効率が高くなります。

記事投稿後、あるいは投稿途中にエミュレーション機能でパソコン上からスマホ表示をチェックをして、「ん?」と、引っかかる箇所があれば、スマホで最終的な確認を行えば完璧という風に捉えていただければと思います。

サイトのスマホ画面表示を確認するお勧めのブラウザはグーグルクローム

Google Chrome・Firefox・Internet Explorer11・Safari・Opera・Edgeなどのブラウザには、スマホ表示させるためのエミュレーション機能がついています。

数あるブラウザの中でも、Google Chromeを使ったサイトのスマホ画面表示の操作手順はとっても簡単なんですよ!

Google Chromeをお使いでない方は、こちらからダウンロードできますよ。

デベロッパーツールを起動させる

Google Chromeブラウザで、スマホ画面を確認したいサイトを表示させて、デベロッパーツール(開発者ツール)を起動するのですが、起動方法は3つあります。
 
 
【1】赤枠で囲った、右上のGoogle Chromeの設定⇒その他のツール⇒デベロッパーツールの順にクリックする。
 
 

 
 
【2】画面上で右クリックをしてメニューを表示して、赤枠で囲った、一番下の[検証]をクリックする。
 
 

 
 
【3】キーボードの[F12]キーまたは、[Ctrl]+[Shift]+[I]キーを同時に押す。
 
 
ワンプッシュでデベロッパーツールが起動するので、キーボードの[F12]キーを押す方法が一番おススメです!
 
 
私のツールパネルは上下に分割されて表示されていますが、設定によって、左右に分割されて表示される場合もあります。
 
また、私のパソコンは、デベロッパーツールを起動させると、サイトを表示している画面がスマホ仕様に細長くなるのですが、そうなっていない場合の手順を記載しますね。

スマホ表示に切り替えるアイコンをクリックする

 
 
デベロッパーツールで、四角が重なった、パソコン表示とスマホ表示を切り替えるアイコンをクリックすると、パソコン表示されていたサイトがスマホ表示に切り替わるので、スマホでの見え方が確認できるというわけです♪
 
 

スポンサーリンク

 
 
画面上部左側の赤枠で囲ったドロップダウンメニューをクリックすると、様々な機種での見え方が選択でき、右側の青枠で囲ったドロップダウンメニューをクリックすると、表示する大きさを選ぶことができるんですよ。端末によって横幅、縦幅のサイズが切り替わるので、色々な端末をポチポチと選択して、見え方をチェックしてみて下さいね!

スマホ表示からパソコン表示に戻す方法は?

 
 
スマホ表示の確認が終わったのでパソコンの表示に戻したい場合は、赤枠で囲った四角が重なったアイコンをクリックするか、青枠で囲った × マークをクリックして、グーグルのデベロッパーツール自体を閉じればOKです。
 
とっても簡単なので、是非、お試し下さいね♪
 
 
【関連記事】

スポンサーリンク

-パソコン
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

無料画像編集ソフトでおすすめは使いやすいPhotoScape!

無料画像編集ソフトでおすすめは使いやすいPhotoScape!

    ブログを運営していく上で、画像はなくてはならないアイテムなので、私は、画像のダウンロードが無制限にできるイラストAC (プレミアム会員) や、もうひとつのブログでは、写真・ …

Amazonアカウント乗っ取りの手口と被害状況

Amazonアカウント乗っ取りの手口と被害状況と防止対策とは?

Amazonアカウント乗っ取りの手口と被害状況 スポンサーリンク 先日、自分のAmazonアカウントにログインできなくなったため、Amazonに相談し、アカウントを解約しました。 私の出品者アカウント …

ブチッと断線した光ファイバーケーブル

光ファイバーケーブルが断線 修理や工事が必要?ケーブル交換で済む?

インターネットの屋内光ファイバーケーブルに足を引っかけブチっと断線!PCの仕事で生活している私には致命傷です。素人の修理は無理だと分かり、NTTの作業員さんに来てもらうことに。あぁ出費が痛い!その後のNTTのオペレーターさんの粋な計らいを記載します。お役に立てれば幸いです♪

Windows7からプログラムをアンインストールする方法をご紹介

Windows7からプログラムをアンインストールする方法をご紹介

    私が使っているデスクトップパソコン(Windows7)は、購入してから5年も経っていて、その間、使うつもりでインストールしたのに、まだ1度も使ったことがないプログラムが膨大 …

スマホ画面をPCに表示させてキャプチャーする方法をご紹介!

スマホ画面をPCに表示させてキャプチャーする方法をご紹介!

    前回、スマホでのサイトの画面表示をPCで確認する方法をご紹介!という記事で、自分が運営しているサイトがスマホではどのように表示されているかを、パソコンのGoogle Chr …