Webページを直接デザインできるChrome拡張機能。
要素を画面上で編集が可能で、MarginやAlign
テキスト変更など様々なデザイン変更できます。
Chromeデベロッパーよりも便利にWeb制作が可能です。
インストール
下記リンク先ページをChromeで開き、「Chromeに追加」をクリックします。
拡張機能を追加、でインストールが完了します。Chromeにアイコンが追加されます。
使用時はアイコンをクリックするので、よく使う人はChromeにピン留め表示しておくと便利です。
使い方
Webページを編集したいページを開いて、Chromeに追加されたアイコンをクリックします。
画面の左側にたくさんのボタンが表示されたツールバーが表示されます。
各機能はポップアップで説明付きで表示されるので、使い方に困る事は無さそうです。
各要素にマウスオーバーすると、配置のガイド線が表示されています。
こちらはメジャーツールです。要素の大きさやマージンの幅など、Web制作にメジャー機能は必須のツールです。
しっかりとmarginやpaddingが効いてるのか、チェックできます。
各要素のフォントやボーダーなどの情報も見ることができます。
Aリンク要素のWCAG情報、コントラストレシオの数値も見る事ができます。
AAやAAAをクリアしておかないと、Googleページコンソール等で怒られるんですよね。
ユーザに見やすい配色が必要な時代、こういうのも確認できるのはとても便利です。
マージンを画面上でカーソルで数値を変更、視覚的に見ながら調整できます。
今まではGoogleのデベロッパーコンソールで、5px、4pxなどちまちまと数値を変更していましたが、
カーソルで見ながら調整、決まったらCSSコードに記述・・・とWeb制作が捗りそうです。
実際に要素そのものをドラッグで移動も可能です。
Flexboxの要素を移動できる機能もあります。私も含めてFlexboxをまだ理解していませんが、
上手く配置できない場合などは、これを使ってあれこれ試すことができそうです。
DIV要素全体をマウスドラッグで移動してみました。デザインどうしようかな～って悩んでいる時に
あれこれ要素を動かしてみたい場合に便利です。
要素全体の背景色も簡単に変更可能です。実際にCSSに書き込むわけではないので、見やすく色を付けたり
検討することができます。
このブログのトップページですが、要素を動かしまくってみました。
自由自在に要素を移動できるってとても便利ですね。
Web制作にとても役立つ便利なChrome拡張機能です。
コメント