簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

パソコンでスマホから見たホームページを表示させる方法|ホームページ制作のツボ

2021/6/29

パソコンでスマホから見たホームページを表示させる方法|ホームページ制作のツボ

ホームページ制作でスマホ対応(レスポンシブ)のデザインで構築するために、都度、スマホでどのように見えているか?を確認する必要があります。

レスポンシブデザインでは、ブラウザの横幅でデザインを切り分けていくので、パソコンのブラウザの横幅をその都度縮小する、ということもできますが、ツールを使うことでもっとスマートにスマホ対応の確認ができます。

Edge・ChromeのDevelopper Tools

Microsoft提供のブラウザ、EdgeとGoogle提供のブラウザ、chromeには標準でDevelopper Toolsという機能が搭載されています。

このツールを使うことで、今表示させているウェブページをスマホやタブレットなどの端末で開いたときにどのように表示されているかを見ることができます(エミュレーション)。

手順は

  1. Edge、GoogleChromeでウェブページを開く
  2. F12キーを押す
  3. DevelopperToolsが起動し、画面が左右2つに分割される
  4. 左側がエミュレータ機能で表示されている
  5. 左側のエミュレータ機能の上部にある選択ボタンをクリック
  6. Garaxy,Pixel,iPhone,iPad,Surface Duoなど様々な端末の中からチェックしたいものを選ぶ

これで、現在制作中のウェブページを、様々なタイプのスマホやタブレットで開いたときにどのように表示されるかを実機を用意することなしに確認することができます。

参考になれば幸いです。

常時SSL+スマホサイト最適化の効果の出るホームページが39,800円!
【0120-55-4682】月~金曜9:00~18:00

月~金曜9:00~18:00

メールでのお問い合わせ
AMS簡単ホームページ作成ツール
あなたのサイトをPRしましょう!
AMSマニュアル
よくある質問と回答
AMSお問合わせ

月別アーカイブ