以下の設定を最初に行っていただくことで、スマホサイトでもブロックの選択、プレビュー確認が可能です。

Google Chromeデベロッパーツールを開く

  • ページ上で右クリック→「検証」を選択するか、以下のキーボードショートカットを押してGoogle Chromeデベロッパーツールを起動します。
    • Ctrl + Shift + C (Windows)
    • Shift + Cmd + C (Mac)

null

右上の歯車マークをクリック

null

カスタムデバイスを追加する

  • Settings→Devices→「Add custom device...」をクリックします

null

  • 以下を設定後に、Addをクリックします
    • Device Name:任意のデバイス名を設定
    • User agent string:「iPhone」と入力
    • プルダウンで、Mobile(no touch)を選択

null

スマホモードに切り替え、追加したデバイスを選択する

  • 左上のスマホアイコンをクリックして、スマホ表示モードに切り替えます。
    • スマホサイトに切り替わらない場合は一度画面をリロードしてください。

null

  • 上部のプルダウンより、先程追加したカスタムデバイスを選択します。
    • 一度追加してしまえば、以降はプルダウンに表示され、選択することが可能です。

null

あとは通常のPC版と同じようにChromeの拡張機能を起動することで、要素の選択、プレビュー確認が可能です。