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