スマートフォンでの表示確認をGoogleChromeブラウザ標準機能のみで行う方法【画像解説】

スマートフォンやタブレットの台頭により、近年では、パソコンからのみならず、様々な端末からインターネットが閲覧されるようになりました。

そのため、サイト運営者としては、パソコンのみならずスマートフォン等でサイトがどのように表示されるかを考慮してサイト作成を行う必要があります。

そこで今回は、GoogleChromeブラウザに標準搭載されている機能を用いて各端末での表示確認を行う方法について画像を用いて丁寧に解説していきます。

GoogleChromeなら標準機能のみでスマフォ表示の確認が可能

サイトの表示確認は、スマートフォンやタブレットの実機があればそれで行えばよいのですが、中にはそれらを持っていないという方もいることと思います。

そのような場合に、各種ウェブサービスやソフトウェアやブラウザの拡張機能等を用いて、仮想的にスマートフォン等での表示を確認することが出来ます。

しかしながら、実は、そういった特別なものを用いることなく、Google Chromeではブラウザに標準搭載されている『デベロッパーツール』を用いれば、各種端末での表示を確認することが出来ます。

GoogleChromeで各端末での表示を確認する方法

各端末での表示を確認したいページをGoogleChromeブラウザで開き、『右上の設定メニュー』⇒『その他のツール』⇒『デベロッパーツール』をクリックします。

※『 Ctrl + Shift + I 』というショートカットキーでもデベロッパーツールの起動は可能です。
chrome-developer-smartphone01

ソースが表示されているウィンドウのところの左上の『携帯電話のアイコン』をクリックします。
chrome-developer-smartphone02

画面左上に表示された『Device』のところの▼をクリックして、表示確認を行いたい端末を選択します。

※ここでは『Apple iPhone 6』とします。
chrome-developer-smartphone03

ブラウザの更新ボタンをクリックして、ページを更新します。
chrome-developer-smartphone04

スマートフォンでの表示に切り替わりました。
引き続き下記の画像の場所にあるボタンをクリックすると・・・
chrome-developer-smartphone05

表示画面の縦横の表示が入れ替わりました。
chrome-developer-smartphone06

以上になります。

公式メルマガ


コメントを残す

サブコンテンツ

このページの先頭へ