パソコンでホームページをスマホサイト表示にする方法

スマホサイトの表示を確認する

どうも、スマコマのコマ太郎です。

今やホームページはスマホサイト対応は常識。WordPress のテーマを使えば、ほぼスマホ対応されていますよね。

アクセスの大半がスマホというジャンルも多くなっていて、スマホサイトの重要度は増すばかりです。

でも WordPress を使うのはパソコンだから、意外とスマホ表示を確認していない人も多いのでは?

文字だけなら問題ありませんが、画像やテーブルタグを使うとスマホではデザインが崩れてしまうなんてことも。

ですからページを作ったら、毎回確認しておきたいものです。でも毎回、スマホの実機を使って確認するのは面倒ですよね。

そこで今回はパソコンでスマホサイトを確認する方法をご紹介しようと思います。

ブラウザの機能を使ってスマホ表示する

実はブラウザには、スマホ表示をエミュレートする機能が実装されているのです。

なので、ブラウザでスマホ表示ができちゃうんですね。(chrome, firefox, ie, safariなど)

方法は簡単です。

まず表示を確認したいページを表示させます。(ここでは chrome で説明します)

次に [F12]キーを押し、開発者モード(デバッグモード)にします。

chromeデバッグモード

開いたウィンドウにあるスマホアイコン(上図)をクリックするとスマホ表示とパソコン表示が切り替わります。

パソコン表示に戻したい場合はもう一度クリックすると戻ります。

なお表示を切り替えた際は、一度ブラウザの更新ボタンを押すことをおすすめします。サイトによってはパソコンとスマホで使っているデータが違うため、再リクエストして正しいデータを読み込ませるのが無難です。

スマホサイトの表示

上図の赤枠部分をクリックするとデバイス(iPad,iPhone,Galaxyなど)を変更することもできます。

開発者モードは、再度 [F12]キーを押すことで終了させることができますよ。

なお Firefox や IE でも似たような操作でスマホ画面を確認することができます。

まとめ

ブラウザの開発者モードでスマホ画面を確認する方法をご紹介しました。

わざわざ実機で確認する必要がないので便利ですよ。

ただあくまでエミュレーターであることには注意してください。実際の表示と若干違うことがあります。

ですからページの作成途中で簡易的に確認したいときに使うと良いでしょう。そして最終確認は実機で行うことをおすすめします。

ちなみにあるソフトを使うと手早くパソコンとスマホ間でデータのやり取りができますよ。ぼくはこれを使って実機で最終確認を行っています。その方法はこちらの記事に書きました。

あわせて読みたい記事
パソコンとスマホでデータをやり取りする
どうも、スマコマのコマ太郎です。 作ったページをスマホで確認したい。このフレーズをパソコンに送りたい。そんなときあなたはどうしていますか?...

 コメント/質問、お気軽にどうぞ。

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

関連記事

初心者のためのFFFTPの基本的な使い方。注意点などを交え初期設定から解説

PDFファイルをまるごと翻訳できるサイト

英語のPDFファイルを日本語に翻訳できる無料サイト

WordPressサイトが利用しているテーマ名を調べる方法

WordPressサイトが利用しているテーマ名を調べる方法

パソコンとスマホでデータをやり取りする

パソコンからスマホ(またはその逆)に素早く文字やURLを送る方法