前回の「Web Developerでウェブサイトを構築・デバッグ」に引き続き、今回もウェブ開発向けのFirefoxアドオン「Web Developer」の基本機能を紹介する。 CSSやHTMLの編集 Web Developerの大きな特徴に、ファイルそのものを書き換えることなくHTMLやCSSの編集結果をプレビューできるという機能がある。 例えばCSSの場合、ツールバーから[CSS]−[CSSを編集する]を選択すると、現在のページが使用しているCSSがサイドバー(表示場所は変更可能)に表示される。これを変更し、上部の[適用]アイコンをクリックすると、その内容が表示中のページに反映される。 元に戻すには[リセット]アイコンをクリックすればよい。もちろん、編集したCSSをローカルのファイルに保存することもできる。
![Web DeveloperでCSSとHTMLを編集してみよう - builder by ZDNet Japan](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd80faffac40578799e4cf7873582af837ee4c96/height=288;version=1;width=512/https%3A%2F%2Fbuilder.japan.zdnet.com%2Fstorage%2F2011%2F01%2F24%2Fb4f2f134d119b8d12d9958b5cedf8801%2Fstory_media%2F20368658%2Ffirefoxaddon184x138.jpg)