生活110番ニュース パソコン&周辺機器

このエントリーをはてなブックマークに追加

あら簡単!Chromeをスマホ表示にする方法を専門用語を省いてやさしく解説

投稿日:2018-12-21 更新日:2020-01-22

自分のサイトをスマホから閲覧して見たところ、「段落がずれて読みにくいな」と感じたことはありませんか。

PC上で作ったサイトはスマホで表示したときにレイアウトが崩れてしまうことも少なくありません

そこで、今日は「PCの画面でスマホの画面を表示する方法」を解説してきます!

今回はスマホ画面の表示が簡単なChrome(クローム)でスマホ表示する方法を中心にお伝えしていきますね。

できれば、別のウインドウを開きながら実際に試すことをおすすめします。

記事内の情報は2019年1月時点のものとなります、最新情報と本文中の記述に差異が生じている可能性もありますのであらかじめご留意ください。

PC上のChrome(クローム)をスマホ表示にする方法

では、早速PC上のChrome(クローム)をスマホ表示にしてみましょう。

といっても難しいことではありません

Chromeでスマホ表示をする方法

  1. PC版のGoogle Chromeを開いて、右上の「・」が縦に3つ並んだアイコンをクリック
  2. 「その他のツール」→「デベロッパー ツール」を押す
  3. すると画面右側にウインドウが現れる

これはグーグルの開発者ツール(デベロッパーツール)になります。

開発者ツールの右上の左から2つ目にスマホのマーク(デバイスモード)があります。

これをクリックするとChromeの画面がスマホサイズになるんですよ!

ちなみに、開発者ツールのウインドウの位置は変えられます。

縦に並んだ「…」を押して「Dock side」の横に並んだアイコンを押せば位置が変わります。

また、これらの手順が面倒だという人は[Ctrl]+[Shift]+[I]キーを同時に押す、または[F12]キーを押しても、同じようにグーグルの開発者ツールが開けますよ。

もう一度同じ操作をすると元に戻るため、[F12]キーで切り替えた場合はキーの誤打には気を付けましょう。

とはいえなかには「スマホのサイズってみんな同じじゃないよね? 自分が使っているのと同じ画面のサイズを変えたいんだけど!」と思う人もいるかもしれませんよね。

次の章では画面のサイズをいろいろなスマホのサイズに変えたり、画像の解像度を変える方法をお伝えします。

そのほかの設定方法

先ほどの章では、開発者ツールの開き方をお伝えしました。

この章では、開発者ツールの設定で変更できるものをご紹介していきますね。

表示するスマホの種類を選ぶ方法

サイトを作ったらさまざまなスマホのサイズでチェックをしておきたいものですよね。

では、どうすれば表示できるスマホの画面サイズを変えられるのでしょう。

画面サイズの変更方法

  1. 開発者ツールを開いて、スマホマーク(デバイスモード)をクリックします
  2. サイズが変わったら、中央のサイトが表示されているウインドウ(ブラウザペイン)の上部に「Responsive」や「iPhone」などスマホの機種名が書かれているところがあるはずなので、それをクリックしましょう
  3.  スマホの種類が選択できるので、表示したい機種を選ぶ

あとは好きなサイズを選びましょう。

「Edit」を選べば表示されていないスマホの種類も呼び出せます。

次は画像の解像度を調整してみましょう。

画像解像度を変える方法

解像度を変える場合は、画面サイズの変更方法の1から3までの手順に加えて、「Responsive」の横にある数字も変えてみましょう。

好きなサイズに変更できますよ。

「横×縦」の比率になっているので、好きな数値を指定すれば解像度が変わります。

ちなみに中央のサイトが表示されているウインドウ(ブラウザペイン)のウインドウのすぐ下にある小さな灰色の長方形をクリックしても解像度は変わります。

いろいろ試してみましょう。

次は表示されている画面の大きさを変える方法についてです。

画面表示を拡大・縮小する方法

画面の大きさも先ほどと同じく中央のサイトが表示されているウインドウ(ブラウザペイン)から変えられます。

「100%」や「30%」など数字が書かれているところがあるかと思います。

そこの数字をクリックすれば、画面のサイズが変わりますよ。

パソコンと違ってスマホは縦だけでなく、横で見ることも想定しておくべきです。

次は画面の向きを変える方法をお伝えします。

向きを変える方法

く中央のサイトが表示されているウインドウ(ブラウザペイン)の右端に四角形のようなアイコンがありますよね。

これをクリックすると画面の向きが変わります。

グーグルの開発者ツールにはほかにも機能がありますが基本的なところはここまでです。
とりあえずは基本だけ覚えて、あとはいろいろ触っていきましょう。

そうはいっても、「Chrome以外のブラウザがどう表示されるかも見ておきたい!」という人もいますよね。

そこで、次の章からはChrome以外のブラウザでの表示の方法をご紹介していきます。

PC上のFirefoxをスマホ表示する方法

Chrome以外のブラウザではスマホ表示がどのように見れるか確認していきましょう。

まずはFirefoxの場合です。

Firefoxの場合、アドオン(ソフトウェアに追加できる拡張機能)を使用します。

アドオンにはいろいろありますが、今回は「User Agent Switcher」を例に見ていきます。

Firefoxでスマホ表示にする方法

  1. User Agent Switcherをインストールします。
  2. Add to Firefoxを選択します。すると、インストールできます。
  3. Firefoxを再起動しましょう。
  4. 「ツール」→「 Defalt User Agent」から「iPhone 3.0」を選択すると大体のスマホのサイズになります。
  5. 右クリックを押して「要素の調査」という項目を押しましょう。
  6. 別ウィンドウが開きます。別ウィンドウの右上に四角いアイコンをクリックしてください。
  7. 画面のサイズがいろいろでてくるので好きなサイズを選びましょう。
  8. 戻るときはスマホ画面の左上のバツ印を押しましょう。
  9. バツ印を押したら、「ツール」→「iPhone 3.0」→「Defalt User Agent」を押して更新ボタンを押せば元に戻ります。

Firefoxのスマホ表示の見方から戻し方までを見てきました。

合わせてInternet Explorer 11の方法も押さえておきましょう。

PC上のInternet Explorer 11をスマホ表示にする方法

 

Internet Explorer 11での方法もご紹介していきます。

Internet Explorer 11でスマホ表示にする方法

  1. chromeの時と同じく「F12」を押す
  2. 出てきた「ウインドウのエミュレーションクリック」を実行
  3. ユーザーエージェント文字列というとところを「カスタム」にする
  4. カスタム文字列というところに以下のユーザーエージェントという文字列を入力
    Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0_1 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A306 Safari/6531.22.7
  5. 入力後はiPhone4の画面の大きさになる
  6. 任意の大きさにするときは、ユーザーエージェント文字列(モード)の横にある「ディスプレイ」で変更する

Internet Explorer 11もFirefoxも少し手間がかかります

単純にスマホでどう見えるのか確かめてみたい場合は、Chromeでスマホ表示を確かめるほうが早そうですね。

まとめ

パソコンでスマホ表示をする方法についてしてお話してきました。
「思ったよりも簡単だった!」という人も多いのかもしれませんね。
Chromeでスマホ表示にする場合は、ショートカットの「F12」を押せばすぐに開くので、「F12」のショートカットは覚えておいて損はありません。

サイトを作ったらスマホからも見られるということも意識しましょう。

Chromeのスマホ表示でユーザビリティの高いページになっているか確認してみてくださいね。

記事の内容はいかがだったでしょうか?この記事がお役に立ちましたら、下の星ボタンで評価してください。
0投票,  平均評価値:0

最新記事

おすすめの記事

このエントリーをはてなブックマークに追加
2020-01-22 14:50:43
https://www.seikatsu110.jp/pc/pc_network/137713/
パソコン&周辺機器
シェアリングテクノロジー株式会社

生活110番とは?

「生活110番」編集部の田中です。生活110番は、電気工事から害虫駆除、カギ開けやペット葬儀まで、140ジャンル以上の暮らしのお困りごとに対応します。私たちはこの「生活110番」を通じ、皆さまのお困りごとをスピーディに、安心の品質と価格で、解決するお手伝いをしています。

生活トラブルに見舞われた時は、私たち「生活110番」におまかせください!