ホームページを制作するのにパソコン向けだけでなく、iPhoneやスマホ、タブレット端末でもそれぞれ快適に閲覧できるように制作するのが当たり前になってきています。

制作中のホームページデータ（htmlファイルや画像ファイルなど）をサーバーにアップして、パソコンだけでなく、手持ちのiPhoneやiPadでもそれぞれアクセスして表示テストをしているとしたら、手間と時間が大変にもったいないです。

パソコン1台で、iPhone他の端末での表示テストを簡単におこなう方法があるのでお伝えします。

ブラウザの「開発者ツール」でチェック

Google chromeほかのブラウザには標準で「開発者ツール」というものが装備されています。

その「開発ツール」の機能を使うことでパソコン画面から、iPhoneやiPad、スマホ（galaxy、pixeln）などの端末からアクセスしたときのホームページの表示をエミュレート（模倣）できるのです。

chromeでのエミュレート（模倣）手順

• ①表示テストをしたいホームページにアクセスする。
• ②F12キーを押す。
• ③右側に「開発ツール」が、左側にホームページが表示されます。
• ④ctrl+shift+m を押す > 左側がエミュレートモードになります。
• ④左側のホームページ表示部の最上部にある下三角▼ボタンをクリックして、テスト表示したい端末に切替えます。

以上の操作で、ご利用のパソコン1台だけで様々な端末でのホームページ表示テストを行うことができます。

この開発者ツールはchromeだけでなく、Edge、Firefoxなどにも装備されています。

CSSの一時的編集もできる

CSS（スタイルシート）の知識をお持ちのかたであれば、右側のツールを使うことで一時的にCSSを編集しその結果をリアルタイムに反映させテストしてくことも可能です。

このように大変便利で高機能なツールなので、ホームページ制作者にとっては欠かせないツールのひとつです。

参考になれば幸いです。