チュートリアル

アドオンなし!Firefoxでパソコンからスマホ画面を見る方法

firefoxでパソコンからスマホ画面を確認する方法

最近は特にスマホでWEBを見る人が多くなってきましたので、パソコン版の表示だけではなく、スマホ表示も重要になってきました。

私もWEB制作のお仕事をしている関係上、スマホ用のWEBデザインやコーディングもします。スマホ用にデザインしたものや、スマホ用にコーディングしたHTMLを実機のスマホで表示を確認すればよいのですが、手間なのであまりしていません。

完成したデザインやHTMLコーディングは実機のスマホで確認しますが、製作途中であればWEBブラウザのスマホ表示シミュレーションで確認しています。

いままではGoogleChromeで確認していたのですが、本日偶然FireFoxのアドオンなしでスマホ表示が確認できることを知りました。
FireFoxユーザーの私は正直、最高にテンションが上がりました。

アドオンなしでFireFoxでスマホ表示を確認する方法

FireFoxの「ツール」→「WEB開発」→「レスポンシブデザインモード」
もしくは、ショートカットキー「ctrl + shift + m

上記の2通りの方法で開きます。

「レスポンシブデザインモード」

開いたレスポンシブデザインモードから上記の「端末が選択されていません」をクリックして、目的のスマホ機種を選択すればOKです。
もしすぐにスマホ表示に切り替わらない場合は「F5」もしくは「ctrl + r」で更新してください。私は目的の端末を選択してもスマホ表示に切り替わらず、更新することに気が付かず無駄な時間を過ごしてしまいました。。

ちなみに以前のFireFoxはレスポンシブデザインモードはあっても、UserAgentを切り替えるボタンはありませんでした。いちいちGoogleクロームでスマホ表示を確認していたのですが、FireFoxのバージョンアップのおかげで、慣れ親しんでいるFireFoxでデバックできることが素直にうれしかったです。

しかも今回はアドオンなしでスマホ表示が実装できるのでFirefoxの立ち上がりが遅くなったりとかの心配もありません。

まとめ

もちろんFirefoxのアドオンを使うことでもスマホ表示は確認することができるかと思いますが、今回はFirefox標準の機能でスマホ表示を確認することができました。

Firefoxでスマホ表示を確認するのには、アドオン(User Agent Switcher)をインストールしましょう!みたいなブログ記事が多かったので、今回はアドオンなしでの方法を紹介します。

私と同じようにFirefoxでデバックやスマホ表示を確認している人の役に立てれば私もうれしいです。

ABOUT ME
ダイキチ(夫)
ダイキチ(夫)
ダイキチ(夫)です! 夫婦で1つのブログを運営しています。ヨメは主にブログ記事を投稿し、私はサラリーマンをしながら夜な夜なブログの構築したり記事を投稿したりしています。 ブログ収入を増やしてサラリーマンを引退するのが夢。記事を読まれた方、よろしければコメントください。もれなく私が喜びます。

COMMENT

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