お問い合わせmenuホームオススメ情報ホームページ制作ホームページの制作時に活用したい、パソコン画面でスマート...ホームページ制作2019.11.21ホームページの制作時に活用したい、パソコン画面でスマートフォンの表示を確認する方法とは?ホームぺージの制作時や修正中のパソコン画面については、作業中であっても一旦中断してすぐに確認することができます。スマートフォンの画面の場合には、アドレスバー部分にURLを直接入力することで、確認をわずらわしく感じている方も多いのではないでしょうか。スマートフォンやタブレット端末は、新型の機種がリリースされるサイクルも早く、複数の機種や解像度が存在するため、すべての環境や実機で確認をするのが難しい状況です。このような悩みを持つ方向けに、パソコン上で操作をして簡単に閲覧できる方法があります。chromeが提供している、デベロッパーツール(要素の検証機能)を活用すれば、スマートフォンやタブレット端末の表示をパソコン画面でも確認することができます。今回は、パソコン画面でスマートフォンの表示を簡単に確認する方法について紹介をさせていただきます。ホームページの制作中や修正後には確認したいキャッシュのクリア方法について!ホームページの制作時や修正中には必見!パソコンでスマートフォンの表示画面を確認する方法をご紹介します。chromeを立ち上げます。↓2.次に、スマートフォン画面のチェック対象になるホームページにアクセスをします。↓3.ホームページの画面上のどこの部分でも構いませんので、マウスの右クリックをします。↓4.メニューが表示されますので一番下の「検証」部分をクリックします。+C」で押した場合も同様の結果になります。簡単な確認方法としては、キーボードの右上の「F12」ボタンを押しても同様の結果が表示されます。↓5.デベロッパーツール(要素の検証機能)が画面の右側にソースコードと一緒に表示されます。↓6.表示された右側画面ソースコードの一番左上部分に、大と小の長方形がふたつ重なったアイコンが表示されていますので、そこのアイコン部分をクリックします。↓7.クリック後にスマートフォンで閲覧した場合と同じ画面が2種類で表示されますので、大と小をクリックして、それぞれを切り替えながら確認することができます。↓8.左側画面の一番左上部分には、iPhone,iPad,Galax,Blackberry,Pixelなど様々なスマートフォンの端末をプルダウンで選択して、それぞれの画面表示に切り替えて確認することができます。↓9.スマートフォンの表示を確認して、元のパソコン画面の状態に戻る場合には、右側画面のソースコード右上部分に表示されている×をクリックすることで、パソコン画面に戻ることができます。◇END◇おわりに今回は、パソコン画面でスマートフォンの表示を簡単に確認する方法について紹介をさせていただきましたが、いかがでしたでしょうか。chromeが提供しているデベロッパーツール(要素の検証機能)を活用すれば、パソコン画面でスマートフォンやタブレット端末の表示を簡単に確認することができます。デベロッパーツール(要素の検証機能)を上手に使いこなすことで、他にも別の用途で活用することも可能です。【デベロッパーツール(要素の検証機能)の他の活用方法について!】1.修正作業中のホームページのhtmlとcssコードをテスト用として確認できる。2.他社のホームページがどのようなコードで書かれているか確認できる。chromで画面を比べてみると、細かい箇所で表示が違って見えてしまう現象も散見されました。ホームぺージの制作時や修正中は、デベロッパーツール(要素の検証機能)を活用して、画面を確認すると便利ですが、あくまでも実際の環境をテスト用として、【すべての表示を完璧に変換できる機能ではない。】ということも知っておく必要があります。この記事をご覧になった方は、ホームページの制作時や修正中に便利なデベロッパーツール(要素の検証機能)を活用して、スマートフォンやタブレット端末を確認してみてはいかがでしょうか。