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

Post on:2017年6月30日

sponsors

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

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

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

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

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

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