パソコン

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

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

関連記事

メルカリPC版の機能制限の解決方法

メルカリPC版は検索や入力は楽だけど制限が多い 解決方法はあるの?

メルカリPC版の機能制限の解決方法 スポンサーリンク CMでお馴染みのメルカリは、誰でも簡単に売り買いが楽しめるフリマアプリです。 以前は、スマホやタブレットからだけでしたが、今はパソコンからも取引す …

コピー&ペーストが連続でできるクリップNOTEの使い方

コピーと貼り付けが連続でできる超便利なクリップNOTEの使い方

コピー&ペーストが連続でできるクリップNOTEの使い方 スポンサーリンク コピー&ペーストを何度も繰り返しすのは面倒!連続でコピーした文字を、連続で貼り付けられたら便利だなぁと思いませんか? コピーと …

Aamazon出品用アカウントの解約方法

Amazon出品用アカウントを解約する手順とその条件とは?

Aamazon出品用アカウントの解約方法 スポンサーリンク 先日、Amazonでお買い物をした履歴を確認しようとしたところ、アカウントにログインができなくなっていました。 Amazonに問い合わせたと …

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

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

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

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

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

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