デラ・マタドーラの株式投資日記

サラリーマン相場師。酒田新値を用いたスイングトレードをしてます。内容は売買実績、筋トレ関係、etc

パソコンでスマホ画面を簡単に確認する方法

こんにちは。デラ・マタドーラです。

最近はインターネットの閲覧にスマホしか使わない人が増えてきていて、ブログを書くときもスマホでの見え方を気にしないといけないですよね。

とはいえ、キーボード操作ができたほうが文章作成は圧倒的に早いので、記事を書くのはPCという人が多いのではないでしょうか。 そんなとき、PCで記事を書いて、わざわざスマホで画面表示を確認するのは面倒ですよね。

そこで今回は、PCでスマホ画面を簡単に確認する方法を紹介します。

なんと、Google Chromeを使えばiPhoneやAndroidだけじゃなく、iPadなどタブレットの画面も確認できちゃうんです!!

◆目次

Google Chromeでスマホ画面を確認する方法

早速、Google Chromeでスマホ画面を紹介します。 まずは、スマホ画面を表示したいWebページを、Google Chromeで普通に開きます。

スマホ画面を表示したいWebページ
スマホ画面を表示したいWebページ

そして、キーボードで「F12」を押します。 すると、画面右側に下図のようなメニューが表示されます。 (人によっては画面下側に表示されるかもです)

F12を押したときの画面
F12を押したときの画面

次に、メニュー上部にあるスマホ・タブレットのマーク(上図の赤枠の部分)をクリックします。 すると、元々Webページを表示していたエリアが、スマホ・タブレット用の画面が表示されるようになります。

スマホ・タブレットモード画面
スマホ・タブレットモード画面

最初は「Responsive」という設定になるのですが、上図の赤枠の部分からスマホ・タブレットの機種を選択することで、その機種の画面を表示することができます。

iPhone X を選択した場合は、以下のように表示されました。

iPhone X 用画面
iPhone X 用画面

機種を選択しても画面表示が変わらない場合、上図赤枠の縮尺の部分をいじってみて下さい。 1回変更すれば画面表示が変わるはずです。

ちなみに、上の説明で例とした画面の場合、スマホ表示にすると表の横幅を画面幅にあわせて狭くしてしまい、おもいっきりレイアウト崩れしてしまっていますね(笑)

この記事を書いている時にそれに気づいたので、今はスマホ表示の場合は横スクロールバーを表示するように修正しました。 この方法はまた時間があるときに記事にしようかと思います!

確認できる端末の増やし方

上の説明で出てきた画面の中にiPhone X の他にもいくつか選択可能な機種が表示されていましたが、実はこれが全てではありません。

ここからは、他の機種を選択可能にする方法を紹介します。

まず、機種を選択するプルダウンを開き、「Edit」を選択します。

他の機種を選択する方法
他の機種を選択する方法

すると、Emulated Devices というメニューが開きます。 ここに表示されている機種にチェックをいれると、選択できる機種が追加できます!

機種を追加する
機種を追加する

最後に

ということで、Google Chrome を使ってスマホ・タブレット画面を確認する方法を紹介しました。 あくまで実機を模倣しているだけなので、実機と100%同じとは言えませんが、簡易的に確認する方法としてはとても便利なので、是非使ってみてください!