HTMLの構造可視化やCSS即時編集が可能なFirefox Extension 「Web Developer」

Firefox webdesign

webdev

Web Developerとは

Web Developerは、Web制作者向けのFirefoxエクステンション。インストールすると、Firefoxのツールバーから、以下のような操作が可能になる。

  • ［情報］ボタンから［id属性値とclass属性値を表示する］メニューを選べば、CSSを利用したHTMLソース内のid属性とclass属性が可視状態になる。
  • ［CSS］ボタンを押して［CSSを編集する］メニューを選ぶと、現在開いているWebページのソースのうちCSS記述部のみがサイドバー内に表示される。このCSSを手動編集すると、Webページの表示もリアルタイムに更新される。
  • 見出しや段落、テーブルやテーブルのセル、フレーム、HTML 4.0で非推奨とされているタグや属性などの使用箇所の周りに、赤・青・緑の枠線を表示できる。

このほかにも、さまざまな機能があるようだが、詳細は機能一覧を参照。

ビフォーアフター

これまではで、はてなダイアリーのデザインを変更する場合、「CSSセレクタ」のページを参考にしつつ、ちょこちょこ修正し「設定」ページで更新して確認・・・といった作業を繰り返していた。

ところが、このツールを使うとCSSセレクタのページを参照する必要もなく、CSSの編集結果の確認も即時にできる。すばらしい！

関連URL