Webページ上のUI要素を分かりやすく
枠線と色分けで表示するChrome拡張機能。
Webレイアウト時の画面崩れやレスポンシブ確認など
要素の重なりなどを表示することができます。
目次
リンク先
インストール
上記リンク先ページをChromeで開き、「Chromeに追加」をクリックします。
拡張機能を追加をクリックするとインストール完了です。
使用時はアイコンをクリックするので、よく使う人はChromeにピン留めして表示しておくと便利です。
使い方
使用時は追加されたアイコンをクリックします。
Webページ全体がこんな表示に変わります。全ての要素にOutlineとBackground-colorで
明確に分かりやすく表示されます。
どの様にブロックがあり、その中に要素が配置されているのかが、よく分かります。
崩れてしまったり改行されてしまったりと、Web制作時には何かと問題が発生します。
今はPCとスマホ、タブレットなどへのレスポンシブデザインにも対応が必要で、様々な解像度で
表示確認を行いますが、しっかりと枠組みが無いと思わぬデザインになってしまう事があります。
細かい部分もしっかりとチェックできる便利なChrome拡張機能です。
Web制作時に役立ちます。
コメント