まとめ系記事
PCのブラウザSafari・GoogleChrome・Firefoxでスマートフォン(レスポンシブ)表示を確認する方法-アイキャッチ
スポンサーリンク

各PCブラウザにはだいたいデフォルトでレスポンシブ表示を確認する機能が搭載されています。

レスポンシブ表示を確認する場面が増えたので個人的に主要ブラウザと考えている、Safari・GoogleChrome・Firefoxで確認する方法を紹介します。

デフォルト機能で確認はできますが、拡張機能を使用した方が使い勝手が良い時もあったので、併せて拡張機能の紹介もしていきます。

 操作方法に大差がないため画像はMacを使用しています

Safari

Safariは比較的手早く表示確認ができます。

Safari起動後、上部メニューバーの開発➡︎レスポンシブ・デザイン・モードにするを選択します。
もしくは⌃ control+⌘ command+Rでも大丈夫です。

Safari-レスポンシブデザインモード

メニューバーに開発が無い場合は
Safari➡︎環境設定➡︎詳細タブ➡︎メニューバーに"開発"メニューを表示にチェックを入れると表示されます。

メニューバーに"開発"メニューを表示

すると下記のようにiPhoneやiPadなどの表示が確認できます。

Safari-レスポンシブデザインモード-表示

結構直感的に確認できるので簡単に操作方法を説明します。

Safari-レスポンシブデザインモード-操作方法

注釈でも説明していますが、アイコンを選択すると、それぞれのデバイスでの表示を確認できます。
アイコンを再度クリックするとデバイスの向きを変更できます。

Safari-レスポンシブデザインモード-デバイスの向き変更

右上のリストメニューを選択するとブラウザの変更が行えます。
前まではIEなども選択できましたが、現在はMicrosoftEdgeになっています。Windows用ブラウザも選べるところに優しさを感じます。

確認してみましたが、Safariにはレスポンシブ表示用の機能拡張も用意されていないようで、デフォルトの機能で確認するのみのようです。

比較的操作方法が簡単なのがSafariの良いところではありますが、確認できるデバイスがApple製品のみなのが少しデメリットですね。

GoogleChrome

GoogleChromeの場合は操作ステップが多いです。

GoogleChrome起動後、下記のいずれかの方法でデベロッパーツールを起動します。

  • F12
  • 右クリック➡︎検証
  • 右上の「⋮」➡︎その他のツール(L)➡︎デベロッパーツール(D)

デベロッパーツール起動

下記のようにデベロッパーツールが表示されます。
左側アイコンGoogleChrome-デベロッパーツール-レスポンシブモード変更アイコン を選択すると、レスポンシブモードに切り替わります。
また、そのままだと視認性が悪いので右側の拡大しているメニューボタン「⋮」を選択し、DockSideの項目よりツールの表示場所を変更します。

GoogleChrome-デベロッパーツール-レスポンシブモード変更方法

レスポンシブモードのショートカット
Macは⌘ command+⇧ shift+MWindowsは⌃ Ctrl+⇧ Shift+Mでもレスポンシブモードに切り替えができます。

レスポンシブモードはツールを左右どちらかに表示させると視認性が良いと思います。

GoogleChrome-デベロッパーツール-レスポンシブモード表示画面

下記にGoogleChromeレスポンシブモードで使用できる機能を簡単に説明します。

検証するデバイスを選択

上部メニュー➡︎ドロップダウンリストメニューより検証するデバイスを選択できます。

GoogleChrome-デベロッパーツール-レスポンシブモード-検証デバイス選択

特定のデバイスを指定したり、「Responsive」を選ぶことでサイスを変更することができます。

検証するデバイスを追加

上部メニュー➡︎ドロップダウンリストメニュー➡︎Edit...を選択するとデフォルトで表示されている主要デバイス以外のデバイスを追加できます。

GoogleChrome-デベロッパーツール-レスポンシブモード-検証デバイス追加①

追加できるデバイスの種類は豊富です。

指定サイズデバイスを追加

検証デバイス追加画面の「Add custom device...」を選択すると、自分で指定したサイズのデバイスを追加できます。

GoogleChrome-デベロッパーツール-レスポンシブモード-検証デバイス追加②

デバイスサイズを変更(検証デバイスResponsiveを選択している時のみ)

検証デバイス「Responsive」を選択しているときは、上部メニューよりデバイスサイズを素早く変更できます。

GoogleChrome-デベロッパーツール-レスポンシブモード-検証デバイスのサイズ変更

数字を指定するだけでなく、上部バーより規定サイズを選んで素早くサイズを変更できるのも便利です。

デバイスの向きを変更

上部メニューのアイコンGoogleChrome-デベロッパーツール-デバイス向き変更アイコン をクリックすると、表示しているデバイスの向きを変更できます。

GoogleChrome-デベロッパーツール-レスポンシブモードデバイス向き変更

デバイスタイプを変更(検証デバイスResponsiveを選択している時のみ)

検証デバイス「Responsive」を選択しているときに、上部メニューボタン「⋮」を選択し「Add device type」を選択すると、上部メニューにデバイスタイプ変更メニューが表示され、スクリーンタッチ式かそうではないデバイスなどの変更ができます。

GoogleChrome-デベロッパーツール-レスポンシブモード-デバイスタイプ変更

メディアクエリを表示

上部メニューボタン「⋮」を選択し「Show media queries」を選択するとCSSで指定しているメディアクエリを色分けして表示できます。

GoogleChrome-デベロッパーツール-レスポンシブモード-メディアクエリを表示

それぞれの色の意味は下記のようになっています。

  • ブルー➡︎最大幅を対象としているクエリ
  • グリーン➡︎範囲内の幅を対象としているクエリ
  • オレンジ➡︎最小幅を対象としているクエリ

メディアクエリを指定しているCSS内コードを表示

メディアクエリバーを右クリック➡︎Reveal in Source Codeより、該当するメディアクエリを指定しているCSS内のコードを表示することができます。

GoogleChrome-デベロッパーツール-レスポンシブモード-メディアクエリを表示-該当CSSを表示

コードを探す手間が省けるのでとても便利な機能です。

該当するメディアクエリのサイズへ検証デバイスサイズを変更(検証デバイスResponsiveを選択している時のみ)

メディアクエリバーをクリックすると、指定されているメディアクエリのサイズへ検証デバイスのサイズを変更できます。

GoogleChrome-デベロッパーツール-レスポンシブモード-メディアクエリを表示-該当メディアクエリのサイズへ変更

定規を表示

上部メニューボタン「⋮」を選択し「Show rulers」を選択すると定規が表示されます。

GoogleChrome-デベロッパーツール-レスポンシブモード-定規を表示

正確なサイズが確認できるので結構便利です。

デバイスのフレームを表示

上部メニューボタン「⋮」を選択し「Show device frame」を選択すると、デバイスのフレームが表示されます。

 全てのデバイスに対応していませんが、iPhone・iPadなどのデバイスは表示できます

GoogleChrome-デベロッパーツール-レスポンシブモード-デバイスフレーム表示

動作検証の際にイメージが湧きやすいですね。

スクリーンショットを撮影

上部メニューボタン「⋮」を選択し「Capture screenshot」を選択とスクリーンショットを撮影できます。

GoogleChrome-デベロッパーツール-レスポンシブモード-スクリーンショット撮影

GoogleChromeについては以上です。GoogleChromeの機能の豊富さに驚きます。操作ステップは多いですが無料とは思えないほどの機能かと思います。

今回説明した内容よりもっと深掘りして検証する機能が用意されていますので、詳細な情報はGoogleサイトを確認してみてください。

参照サイトTools for Web Developers

素早く表示できる拡張機能「mobile browser emulator」

既に説明した通り、GoogleChromeにはデフォルトでレスポンシブ動作を検証する機能は、十分揃っていますが表示させるまでのステップが少し多く、唯一の難点と言えるのかなと考えています。

「mobile browser emulator」だと少ないクリックでレスポンシブ表示を確認できるので素早く確認したいときには便利です。

拡張機能mobile browser emulator

操作はとても簡単でインストールしたら、上部メニューより追加されたボタンを選択し、4種類のサイズから選ぶだけです。

GoogleChrome-拡張機能-mobilebrowseremulator

拡張機能が更新されていなく、対応しているデバイスも少ないのでしっかりと検証するには不足感はありますが、手早く表示させることはできるので紹介しました。

Firefox

GoogleChrome程ではないですが、Firefoxでもレスポンシブ表示を確認する機能が豊富に用意されています。

Firefoxの場合は下記の方法でレスポンシブモードに変更できます。

  • ⌃ Ctrl+⇧ Shift+M(Windows)⌘ command+⌥ option+M(Mac)
  • 右上の≡を選択➡︎ウェブ開発➡︎レスポンシブデザインモード
  • F12で開発ツール起動後、開発ツール右上のFirefox-開発ツール-レスポンシブモード変更アイコンを選択

Firefoxでは開発ツールを起動しなくても直接レスポンシブモードに変更できます。ショートカットを使用すればより素早くレスポンシブ表示を確認できます。

Firefox-レスポンシブデザインモード変更

開発ツール右上のメニューボタン「⋯」を選択すると表示位置を変更できます。
GoogleChromeと同様に開発ツールは左右どちらかに表示させた方が使いやすいと思います。

Firefox-レスポンシブデザインモード画面

GoogleChromeと重複する箇所はありますが、下記にFirefoxのレスポンシブデザインモードで使用できる機能を簡単に説明します。

検証するデバイスを選択

上部メニュー➡︎ドロップダウンリストより検証するデバイスを選択できます。

Firefox-レスポンシブデザインモード-デバイス選択

検証するデバイスを追加

上部メニュー➡︎ドロップダウンリスト➡︎リストを編集...を選択すると、検証するデバイスを追加できます。

Firefox-レスポンシブデザインモード-検証デバイス追加

主要のデバイスは網羅されています。

指定サイズデバイスを追加

検証デバイス追加画面の「カスタム端末を追加...」を選択すると、指定サイズのデバイスを追加できます。

Firefox-レスポンシブデザインモード-指定サイズの検証デバイス追加

デバイスサイズを変更

上部メニュー➡︎テキストボックスへ数字を入力すると検証しているデバイスサイズを素早く変更できます。

Firefox-レスポンシブデザインモード-デバイスサイズ変更

キーボードの矢印キーで変更可能
テキストボックスを選択している状態で矢印キー⬆︎⬇︎でも変更ができます。(⇧ shiftを押しながらで10ずつ変更)

デバイスの向きを変更

上部メニューのアイコンFirefox-レスポンシブデザインモード-デバイス向き変更アイコン①Firefox-レスポンシブデザインモード-デバイス向き変更アイコン②をクリックすると表示しているデバイスの向きを変更できます。

Firefox-レスポンシブデザインモード-デバイス向き変更

タッチイベント・マウスイベントの切り替え

上部メニューのアイコンFirefox-レスポンシブデザインモード-タッチイベント・マウスイベント切り替えアイコン①Firefox-レスポンシブデザインモード-タッチイベント・マウスイベント切り替えアイコン②をクリックするとタッチイベント⇆マウスイベントの切り替えができます。

Firefox-レスポンシブデザインモード-タッチ・マウスイベント切り替え

スクリーンショットを撮影

上部メニューのアイコンFirefox-レスポンシブデザインモード-スクリーンショット撮影アイコンをクリックすると、スクリーンショットが撮影できます。

Firefox-レスポンシブデザインモード-スクリーンショット撮影

Firefoxについては以上となります。GoogleChromeほど多機能ではないですが、操作性は優れているように感じます。

より詳細な情報を知りたい場合は下記公式サイトをご確認ください。

参照サイトレスポンシブデザインモード

色々なデバイスの表示確認ができるブラウザ「BLISK」

番外編としてWeb開発に特化したブラウザ「BLISK」では、レスポンシブ表示の検証がとても簡単に行えるようになっています。

このブラウザは有料です。無料でも使用することはできますが、一回30分までと制限があります。30分を過ぎたら12時間後に再度使用可能になります。

ダウンロードサイトBLISK

詳しい説明は割愛しますが、Web開発に特化しているだけあって、検証などといった作業がとても捗るブラウザです。

BLISK-表示画面

対応しているデバイスは豊富にあり、左側から1クリックで変更できます。(フレーム付き)また、レスポンシブ画面とPC画面を同時に検証できるといったことも可能です。

値段は日本円で約月1000円ほど(記事公開時)です。年間契約すると少し安くなります。
ブラウザへ支払うには、少々値が張るのでWeb開発をガシガシ行わない限りは、手は出しづらいかなと思います。

レスポンシブ表示を確認できるサイト

最後にブラウザではなく、レスポンシブ表示を確認できるサイトを簡単に紹介します。

ブラウザのように細かな確認はできませんが、ブックマークなどに登録しておけばかなり手軽にレスポンシブ表示確認ができますね。

レスポンシブ表示確認サイトResponsinator

レスポンシブ表示確認サイトDemonstrating Responsive Design

レスポンシブ表示確認サイトレスポンシブWebデザインチェックツール

レスポンシブ表示確認サイト

以上となります。
それぞれのブラウザに特徴がありますが、機能的に言うとGoogleChromeが圧倒しているように感じます。それぞれの用途でブラウザを使い分けたり、サイトを利用しても良いかもしれませんね。

スポンサーリンク

この記事が気に入ったら
D-Boxを"いいね"、"フォロー"

新しい情報をお知らせします。
気になるニュースとかもPickしています。

おすすめの記事