パソコン

スマホでのサイトの画面表示を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

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

関連記事

プルダウンメニューがキャプチャできる無料ソフトをご紹介!

プルダウンメニューがキャプチャできる無料ソフトをご紹介!

    Windowsに附属している Snipping Tool は、スクリーンショットが簡単にキャプチャできるのでとっても便利ですよね! スポンサーリンク でも、パソコンのプルダ …

Amazonにログインできない場合の対処方法

Amazonにログインできないしメールも届かない場合の対処方法

Amazonにログインできない場合の対処方法 スポンサーリンク メールアドレスもパスワードも正しく入力したのに、なぜかAmazonにログインできず、「身分を証明するためのコードをEメールでお知らせいた …

単語の登録に失敗しました

単語の登録に失敗しましたと表示された場合の修復方法は?

Windows7のIMEの辞書ツールは、文字入力の手間と時間が省けてとても助かりますね♪いつものように単語/用例の登録をクリックして、頻繁に使う単語を登録しようとしたところ「単語の登録に失敗しました」というメッセージが出てしまい登録ができませんでした。面倒臭がり屋の私はしばらく放置していましたが、やはりとっても不便なので修復してみることにしました。あっけにとられるほど簡単なのでお試しください!

YouTube動画をブログに埋め込む方法

YouTube動画をブログに埋め込む方法とカスタマイズ方法

YouTube動画をブログに埋め込む方法 スポンサーリンク YouTubeで公開されている動画を、自分のサイトやブログで紹介したいときは、記事のHTMLソースコードに動画の埋め込みコードを挿入するだけ …

PhotoScapeのダウンロードから起動までの手順をご紹介!

PhotoScapeのダウンロードから起動までの手順をご紹介!

    無料画像編集ソフトでおすすめは使いやすいPhotoScape! という記事で、編集方法をご紹介している PhotoScape (フォトスケープ) は、何度か操作をしているう …