ホームぺージの制作時や修正中のパソコンの表示画面については、作業中であっても一旦中断してすぐに確認することができます。

一方、スマートフォンの表示画面の場合は、アドレスバー部分にURLを直接入力することで、確認をわずらわしく感じている方も多いのではないでしょうか。

また、スマートフォンやタブレット端末は、新型の機種がリリースされるサイクルも早く、複数の機種や解像度が存在するため、すべての環境や実機で表示画面を確認するのが難しい状況です。

このような悩みを持つ方向けに、パソコンで操作をして簡単に閲覧できる、スマートフォンの表示画面を確認する方法があります。

WEBブラウザのGoogle chromeが提供している、デベロッパーツール(要素の検証機能)を活用すれば、スマートフォンの表示をパソコン画面でも確認することができます。

今回は、パソコン画面でスマートフォンの表示を簡単に確認する方法について紹介をさせていただきます。

 

ホームページの制作後に確認しておきたいキャッシュのクリア方法について!

 

ホームページの制作時や修正中には必見!パソコンでスマートフォンの表示画面を確認する方法をご紹介

【スマートフォンの表示画面を確認するまでの手順について】

◇START

1.まず、はじめにWEBブラウザのGoogle chromeを立ち上げます。

2.次に、スマートフォン画面のチェック対象になるホームページにアクセスをします。

3.ホームページの画面上のどこの部分でも構いませんので、マウスの右クリックをします。

4.メニューが表示されますので一番下の「検証」部分をクリックします。

また、キーボードでWindowsの場合は、「Ctrl + Shift + C」、Macの場合は、「Command + Shift +C」で押した場合も同様の結果になります。

さらに簡単な確認方法としては、キーボードの右上の「F12」ボタンを押しても同様の結果が表示されます。

5.デベロッパーツール(要素の検証機能)が画面の右側にソースコードと一緒に表示されます。

6.表示された右側画面ソースコードの一番左上部分に、長方形がふたつ重なったアイコンが表示されていますので、そこのアイコン部分をクリックします。

7.クリック後にスマートフォンで閲覧した場合と同じ画面が2種類で表示されますので、大と小をクリックして、それぞれを切り替えながら確認することができます。

8.左側画面の一番左上部分には、iPhone,iPad,Galax,Blackberry,Pixelなど様々なスマートフォンの端末をプルダウンで選択して、それぞれの画面表示を切り替えて確認することができます。

9.スマートフォンの表示を確認して、元のパソコン画面の状態に戻る場合には、右側画面のソースコード右上部分に表示されている×をクリックすることで、パソコン画面に戻ることができます。

END

 

おわりに

今回は、パソコン画面でスマートフォンの表示を簡単に確認する方法について紹介をさせていただきましたが、いかがでしたでしょうか。

今まで、アドレスバー部分にURLを直接入力して確認していた方も、Google chromeが提供しているデベロッパーツール(要素の検証機能)を活用すれば、パソコン画面でスマートフォンの表示を簡単に確認することができます。

また、他にもデベロッパーツール(要素の検証機能)を使いこなすことで、下記の様な別の用途でも活用することができます。

 

【デベロッパーツール(要素の検証機能)の他の活用方法について】

・修正作業中のホームページのhtmlとcssコードをテスト用として確認できる。

・他社のホームページがどのようなコードで書かれているか確認できる。

 

と、ここまでは、非常に便利なデベロッパーツール(要素の検証機能)の紹介でしたが、スマートフォンのiPhone(iOS)版、または、Android(OS)版のGoogle chromで画面の表示を比べてみると、細かい箇所で表示が違って見えてしまう箇所も散見されました。

ホームぺージの制作時や修正中は、デベロッパーツール(要素の検証機能)を活用して、画面の表示を確認すると非常に便利ですが、あくまでも実際の環境をテスト用として、【すべてを完璧に変換できる機能ではない。】ということも知っておく必要があります。

この記事をご覧になった方は、ホームページの制作時や修正中に便利なデベロッパーツール(要素の検証機能)を活用して、スマートフォンの画面を確認してみてはいかがでしょうか。

 

ホームページの制作時には設置したいファビコンについて!

 

【株式会社セレクト・ワン】

東京本社:03-5953-7160

横浜支店:045-270-3353

長野営業所:026-474-5333

お問い合わせはこちら

 

関連記事

  1. ホームページを制作の時点からスマホ対応にするメリットとは?

  2. ホームページ制作後の更新作業について!

  3. ホームページの制作時には、常時SSL(https)化への対応が必要にな…

  4. ホームページのページ数の重要性について!

  5. ホームページを制作する上でやってはいけないことってなに?

  6. ホームページの制作時から入れておきたい【お役立ち情報】について!