ProjectVisBug - HTMLやCSSの情報をビジュアル的に確認、調整
Webサイトのデザインを作っていて、配置を少し変えたり、色合いを変えたいと思うことは多いでしょう。開発者ツールでCSSを変更したり、Webブラウザを再読込しても良いですが、細かい調整では時間がかかってしまいます。 そこで使ってみたいのがProjectVisBugです。ビジュアルを細かく調整できるGoogle Chrome機能拡張です。
ProjectVisBugの使い方
DOM単位で選択して影をつけたりマージンを調整したりできます。
幅を変更して見た目がどれくらい変わるのか確認しているところ。
画像を右に寄せています。
画像の情報を表示しています。
スタイルシートの設定も確認できます。
同様の情報は開発者ツールの中で見ることもできますが、デザイナーにとってはProjectVisBugの方が使いやすいのではないでしょうか。ビジュアル的に分かりやすく、Webデザインの調整などにお勧めです。
ProjectVisBugはGoogle Chrome用のオープンソース・ソフトウェア（Apache Licnese 2.0）です。