今回はこんな悩みを解決します！
ブログのデザインは、PCはすぐに確認できますが、スマホで見たときの表示もPC上で確認したいことってありませんか？
実はこれ、Google Chromeのデベロッパーツールを使えば可能です。
この記事を読んでいただくと、PC上でスマホ表示を確認する方法がわかります。
特にスマホは、iPhone、Android、タブレット端末など、さまざまな解像度のデバイスがありますから、すべて実機でチェックすることはむずかしいですよね。
自身が持っているスマホでは最低限実機チェックは必要かと思いますが、その他のスマホでの見え方は、Google Chromeのデベロッパーツールで簡単に確認しちゃいましょう！
記事でわかること
- ・PCブラウザ上でスマホの見え方を確認する方法
- ・表示するデバイス・解像度の変更方法
CONTENTS［ hide ］
PCのブラウザでスマホ画面の表示を確認する方法
まずはGoogle Chromeで自身のブログを開いてください。この記事では当ブログのトップページを表示してご説明します。
デベロッパーツールを起動する
以下のショートカットキーを押して、デベロッパーツールを起動させてください。
- Windows：Ctrl＋Shift＋I または F12
- Mac：Option＋Command＋I
下の画像の赤枠の部分がブラウザ上に表示されたらデベロッパーツールは起動しています。
Toggle device toolbarを押してスマホ表示にする
赤枠のToggle device toolbarを押して表示を切り替えてください。
表示が切り替わったら、下の画像の赤枠の部分を選んでいき、今回は試しにiPhone6/7/8を選んでみてください。
これでブラウザ上でiPhone6/7/8のデバイスサイズで画面のエミュレートができました！
おまけで、画面の周りにiPhoneの枠を表示することができるのでやってみましょう。
下の画像のように、右上のメニューからShow device frameを選択してください。
iPhoneのフレームが表示されて、より実際の画面で見ているような雰囲気になりましたね♪
表示画面サイズを変更する
画面の横×縦サイズを自由に変更して表示を確認したい、という時はResponsiveを選んでみてください。
下図のようにバーが表示され、横と縦にマウスで自由に画面サイズを変更することができるようになります。
ただ個人的には、デフォルトで用意されているiPhone6/7/8、iPhoneXなどのメジャーなデバイスサイズの確認で十分じゃないかなと思います。
最後に：PCのブラウザでスマホ画面の表示を確認する方法
今回は、PCブラウザ上でスマホ表示を確認する方法をご説明しました。
ただこれはあくまで簡易的なチェック方法なので、PCブラウザ上のエミュレートと実機画面では表示が微妙に異なる場合があります。
おおよその見た目はPCブラウザでチェックしつつ、最終的には自身のスマホで念のため実機チェックをしておきましょう。
それでは、今回はこの辺で！
