Google Chrome(パソコン)でスマホサイトを表示する方法

google chrome mobile sites

Google Chrome(パソコン)でスマホサイトを表示する方法を紹介します。

how to view mobile version of a website 02
Google Chromeでは、このようにスマホサイト(この例では「iPhone」)を表示することができます。

Webサイトを制作していて、スマホサイトの外観をパソコンでチェックしたい! そんな場合は今回紹介する方法で確認しましょう。

パソコンでスマホサイトを表示する方法は?

パソコンでスマホサイトを表示する方法は次の手順です。

  1. Google Chromeを起動する

  2. 画面右上の [︙] をクリックする

    how to view mobile version of a website 03

  3. [デベロッパーツール] を起動する

    how to view mobile version of a website 04
    ①表示されたメニューの「その他のツール」→
    ②「デベロッパーツール」をクリックします。

  4. [スマホ・タブレット] のアイコンを選択する

    how to view mobile version of a website 05
    デベロッパーツールです。「スマホ・タブレット」のアイコンをクリックします。

    how to view mobile version of a website 06
    すると、左側に「デバイスツールバー」が表示されます。

  5. [画面サイズ] を調整する

    how to view mobile version of a website 07
    デバイスツールバーです。「画面のサイズ」が表示されているので、手動でカスタマイズすることもできます。「Responsive」というところをクリックすると

  6. [スマホサイト] を表示する

    how to view mobile version of a website 08
    さまざまなスマホの種類が表示されるので、どれかを選んでみましょう。

    how to view mobile version of a website 09
    ここでは「iPhone 6/7/8」を選択してみました。すると、選択したデバイスの画面サイズに調整されます。

このようにGoogle Chromeを使えば、パソコンでもスマホサイトの表示を確認することができます。便利なので、使い方を覚えておきましょう。

Google Chrome の人気記事