転職チェンジジョブ

転職活動する上での役立つ情報などを紹介

PCでサイトをスマホ画面に表示できる裏技!拡張機能必要なし!

PCでサイトをスマホ画面に表示できる裏技!拡張機能必要なし!

PCをメインにサイトやブログを運営している人で、 自分のサイトがスマートフォンでどう表示されているのか気になりませんか? 自分の持っているスマホでは確認できるけど、他のデバイスでの確認は難しいですよね? そこで、PCでもいろいろなスマートフォンやタブレットで、簡単に確認できる裏技を紹介します。 しかも、拡張機能など何かをダウンロードするわけではないので、すぐに実行できるからおすすめです。

PCでサイトをスマホ画面に表示できる裏技

PCでスマホの画面にしてチェックできる方法は、ChromeやFirefoxをメインに説明していきます。 IEなど他のブラウザでも同じような流れでできるので、確認してみてください。

キーボードのF12を押す

まずはキーボードにある「F12」を押してください。 すると、デベロッパーツールが表示されます。 人によっては下に表示される場合と、右に表示される場合がありますが特に気にしなくて大丈夫です。 ちなみにデベロッパーツールを消したいなら、また「F12」を押せば元に戻ります。

Chromeの場合

Firefoxの場合

画面のマークをクリック

デベロッパーツールの上のほうにある変なマークをクリックします。 そして、一度「F5」などを押し、更新をして再度読み込んでください。 するとスマホの状態で表示できます。

Chromeの場合

Firefoxの場合

様々なデバイスでチェック

様々なデバイスで確認したい場合は、自分でデバイスを選択することで変更できます。

Chromeの場合

Firefoxの場合

簡単ですよね?ちょっと確認したいなって時に便利なので、私もよく使っています。

注意事項

Firefoxを使って表示している場合、PCの状態に戻したいなら、マークをクリックした後に「F12」を押してください。スマホの表示状態で「F12」を押してしまうと、デベロッパーツールは消えますが、 PCの状態には戻らずにスマホの表示状態のままになってしまいます。 そのため、必ず、マークをクリックしてPCの表示に戻してから「F12」を押してください。

また、この機能は100%正確ではありません。 多少のズレはあるので、あくまで参考程度にこの機能を使ってください。 たぶん、はてななどのブログは問題なく表示できるはずです。 すべてチェックしたわけではありませんが。

まとめ

PCで簡単にスマホ表示ができるので、興味がある人は試してください。 何より、iphone6/7/8/PlusやiPad、Galaxy、Nexus、Kindle、Nokiaなど、 たくさんのデバイスをチェックできるので面白いです。

また、Firefoxで確認する場合、「User Agent Switcher」をダウンロードしないと使えない、 みたいな記事をよく見かけるんですけど、FirefoxでもChromeと同じように簡単にチェックできるんですよね。