Webサイトのレスポンシブデザインを
一括でチェックできるWebサービス。
様々な解像度を一括で表示してWebサイトの
画面が崩れていないか、チェックが可能です。
![レスポンシブWebデザインを一括チェックできるWebサービス 『レスポンシブWebデザインチェックツール』](https://pc.mogeringo.com/wp-content/uploads/2022/08/lqdjp4.jpg)
目次
リンク先
レスポンシブWebデザインチェックツール リンク先はこちらから
使い方
![レスポンシブWebデザインを一括チェックできるWebサービス 『レスポンシブWebデザインチェックツール』](https://pc.mogeringo.com/wp-content/uploads/2022/08/lqdjp1.jpg)
リンク先を開くとサンプルページが表示されます。
デバイスは現在となっては古いのですが、チェックできる解像度は
320px × 568px
375px × 667px
414px × 736px
768px × 1024px
1366px × 768px
と標準的な解像度をチェックできます。
![レスポンシブWebデザインを一括チェックできるWebサービス 『レスポンシブWebデザインチェックツール』](https://pc.mogeringo.com/wp-content/uploads/2022/08/lqdjp2.jpg)
まずは調べたいURLを入力して「RWD Check」をクリックします。
![レスポンシブWebデザインを一括チェックできるWebサービス 『レスポンシブWebデザインチェックツール』](https://pc.mogeringo.com/wp-content/uploads/2022/08/lqdjp3.jpg)
このブログを表示してみました。
スマホサイズでどのように見えるかをチェックができます。
表示されたページはちゃんとクリックも可能で
動作を確認も可能です。
![レスポンシブWebデザインを一括チェックできるWebサービス 『レスポンシブWebデザインチェックツール』](https://pc.mogeringo.com/wp-content/uploads/2022/08/lqdjp4-1.jpg)
画面上部のスクロールバーを移動すると
画面全体を縮小も可能です。
全体をチェックするのに便利です。
![レスポンシブWebデザインを一括チェックできるWebサービス 『レスポンシブWebデザインチェックツール』](https://pc.mogeringo.com/wp-content/uploads/2022/08/lqdjp5.jpg)
サイトによっては横でのチェックも必要な場面もあると思います。
画面のアイコンからローテーションで縦横の切り替えが可能です。
レビュー
![レスポンシブWebデザインを一括チェックできるWebサービス 『レスポンシブWebデザインチェックツール』](https://pc.mogeringo.com/wp-content/uploads/2022/08/lqdjp6.jpg)
ChromeのDevツールでも今はチェック出来ますが、
様々な解像度で一括で見れるのは便利です。
CSSで@mediaなどで細かく指定してる画面など
解像度によって表示の違いなどもしっかり確認ができそうです。
Web制作現場でとても便利なWebサービスです。
コメント