Web制作に便利なシンプルで使いやすいChrome拡張機能 『レスポンシブ チェック!』

シンプルな使いやすいレスポンシブを
チェックできるChrome拡張機能。
画面を分割してスマホ版、PC版を表示して
確認が可能、デベロッパーツールも使えます。

リンク先

Chrome拡張機能 レスポンシブ チェック! インストール

インストール

上記リンク先ページをChromeで開き、「Chromeに追加」をクリックします。

拡張機能を追加をクリックするとインストールが完了します。
Chromeにアイコンが追加されますが、使用時はアイコンをクリックが必要となるために、
頻繁に使う場合はChromeにピン留め表示しておくと便利です。

使い方

レスポンシブチェックを行いたいWebページを開き、アイコンをクリックします。

画面が分割されて表示されます。左側がスマホ画面、右側がPC画面として見ることができます。
分割されたボーダーをドラッグすると分割幅を変更が可能で、右側をスマホ画面ぐらいの幅に
することも可能です。

通常のChromeの機能では分割での表示はできなかったと思うので、こうやって
両画面をチェックできるのはとても便利です。

分割しながらChromeのデベロッパー画面も使うことができます。
CSSなど調整しながら作業も可能です。