スゴイ便利!Webページの構造を視覚化し、レスポンシブの表示サイズごとの変化を確認できるChromeの機能拡張

こんな便利な機能拡張があったんですね!

レスポンシブ対応ページを作成する時に大切なのは、さまざまな表示サイズでレイアウトや要素がどのように変化するかです。
レイアウトやコンポーネントの構造を視覚化し、px, emでサイズを表示し、その変化を確認できるChromeの機能拡張「Responder」を紹介します。

Webページのレイアウトがどのように変化するか

ResponderはWebページの表示サイズを変更すると、ページ上の要素をブロックレベルでアウトラインで表示し、どのように変化するかが確認できます。

Responderが表示されるのはブラウザのサイズを変更している間だけで、変化しない場合は表示されません。
サイズはpx単位とem単位に対応しており、幅と高さが表示されます。

インストールは、下記ページから。

サイトのキャプチャ

Responder -Chrome ウェブストア

「Chromeに追加」ボタンをクリックすると、インストールできます。

top of page

©2017 coliss