レスポンシブデザインを端末ごとに
チェックできるWebサービス。
スマホやPC、タブレットや好きな解像度で
Webサイトの隅々までチェックが可能です。
![レスポンシブデザインを端末ごとにチェックできるWebサービス 『Responsive Design Checker』](https://pc.mogeringo.com/wp-content/uploads/2022/09/responsivedesign9.jpg)
目次
リンク先
Responsive Design Checker リンク先はこちらから
使い方
![レスポンシブデザインを端末ごとにチェックできるWebサービス 『Responsive Design Checker』](https://pc.mogeringo.com/wp-content/uploads/2022/09/responsivedesign1.jpg)
使い方は簡単で調べたいWebサイトのURLをここに入力するだけです。
![レスポンシブデザインを端末ごとにチェックできるWebサービス 『Responsive Design Checker』](https://pc.mogeringo.com/wp-content/uploads/2022/09/responsivedesign2.jpg)
このブログのURLを入力してみました。
![レスポンシブデザインを端末ごとにチェックできるWebサービス 『Responsive Design Checker』](https://pc.mogeringo.com/wp-content/uploads/2022/09/responsivedesign3.jpg)
スマホサイズでの表示が出来ます。
Chromeのデベロッパーモードでも簡単にレスポンシブデザインのチェックが
可能ですが、iPhone8 / 7 など端末ごとにチェックも可能です。
解像度を合わせる必要がないので簡単にチェックができます。
![レスポンシブデザインを端末ごとにチェックできるWebサービス 『Responsive Design Checker』](https://pc.mogeringo.com/wp-content/uploads/2022/09/responsivedesign4.jpg)
こちらはタブレットサイズで表示してみました。
スマホやタブレット、デスクトップを切り替えると再度
「Test My Site」をクリックする必要があります。
スマホとはやっぱり印象が変わります。
![レスポンシブデザインを端末ごとにチェックできるWebサービス 『Responsive Design Checker』](https://pc.mogeringo.com/wp-content/uploads/2022/09/responsivedesign5.jpg)
Rotateで画面を回転させて横画面で表示も可能です。
![レスポンシブデザインを端末ごとにチェックできるWebサービス 『Responsive Design Checker』](https://pc.mogeringo.com/wp-content/uploads/2022/09/responsivedesign6.jpg)
Compareで画面を比較表示が可能です。
横幅、360pxと414pxの細かい表示の違いも見比べる事ができます。
Chromeのデベロッパーモードではここまで出来ません。
![レスポンシブデザインを端末ごとにチェックできるWebサービス 『Responsive Design Checker』](https://pc.mogeringo.com/wp-content/uploads/2022/09/responsivedesign7.jpg)
用意されている解像度、デバイスは豊富にあるので
わざわざ解像度を覚えておく必要もありません。
各画面の画面上部にある「Save Settings」で
Favorite devicesに登録して簡単にチェックが可能です。
レビュー
![レスポンシブデザインを端末ごとにチェックできるWebサービス 『Responsive Design Checker』](https://pc.mogeringo.com/wp-content/uploads/2022/09/responsivedesign8.jpg)
Web制作時の最終段階でしょうか。
細かいデザイン部分をCSSで調整していく場面などに便利です。
表示された画面はクリックも可能で、リンクで画面遷移できるので
動作などのチェックもできます。
Googleデベロッパーでも表示確認ができますが、
こちらは並べて比較も可能なので便利です。
コメント