シンプルな使いやすいレスポンシブを
チェックできるChrome拡張機能。
画面を分割してスマホ版、PC版を表示して
確認が可能、デベロッパーツールも使えます。
![Web制作に便利なシンプルで使いやすいChrome拡張機能 『レスポンシブ チェック!』](https://pc.mogeringo.com/wp-content/uploads/2024/03/responsivecheck-thumb.jpg)
目次
リンク先
Chrome拡張機能 レスポンシブ チェック! インストール
インストール
![Web制作に便利なシンプルで使いやすいChrome拡張機能 『レスポンシブ チェック!』](https://pc.mogeringo.com/wp-content/uploads/2024/03/responsivecheck1.png)
上記リンク先ページをChromeで開き、「Chromeに追加」をクリックします。
![Web制作に便利なシンプルで使いやすいChrome拡張機能 『レスポンシブ チェック!』](https://pc.mogeringo.com/wp-content/uploads/2024/03/responsivecheck2.png)
拡張機能を追加をクリックするとインストールが完了します。
Chromeにアイコンが追加されますが、使用時はアイコンをクリックが必要となるために、
頻繁に使う場合はChromeにピン留め表示しておくと便利です。
使い方
![Web制作に便利なシンプルで使いやすいChrome拡張機能 『レスポンシブ チェック!』](https://pc.mogeringo.com/wp-content/uploads/2024/03/responsivecheck3.png)
レスポンシブチェックを行いたいWebページを開き、アイコンをクリックします。
![Web制作に便利なシンプルで使いやすいChrome拡張機能 『レスポンシブ チェック!』](https://pc.mogeringo.com/wp-content/uploads/2024/03/responsivecheck4.jpg)
画面が分割されて表示されます。左側がスマホ画面、右側がPC画面として見ることができます。
分割されたボーダーをドラッグすると分割幅を変更が可能で、右側をスマホ画面ぐらいの幅に
することも可能です。
![Web制作に便利なシンプルで使いやすいChrome拡張機能 『レスポンシブ チェック!』](https://pc.mogeringo.com/wp-content/uploads/2024/03/responsivecheck5.jpg)
通常のChromeの機能では分割での表示はできなかったと思うので、こうやって
両画面をチェックできるのはとても便利です。
![Web制作に便利なシンプルで使いやすいChrome拡張機能 『レスポンシブ チェック!』](https://pc.mogeringo.com/wp-content/uploads/2024/03/responsivecheck6.jpg)
分割しながらChromeのデベロッパー画面も使うことができます。
CSSなど調整しながら作業も可能です。
コメント