Web DeveloperでCSSとHTMLを編集してみよう

　前回の「Web Developerでウェブサイトを構築・デバッグ」に引き続き、今回もウェブ開発向けのFirefoxアドオン「Web Developer」の基本機能を紹介する。

CSSやHTMLの編集

　Web Developerの大きな特徴に、ファイルそのものを書き換えることなくHTMLやCSSの編集結果をプレビューできるという機能がある。

　例えばCSSの場合、ツールバーから［CSS］−［CSSを編集する］を選択すると、現在のページが使用しているCSSがサイドバー（表示場所は変更可能）に表示される。これを変更し、上部の［適用］アイコンをクリックすると、その内容が表示中のページに反映される。

　元に戻すには［リセット］アイコンをクリックすればよい。もちろん、編集したCSSをローカルのファイルに保存することもできる。

図1 CSSを編集してデフォルトのフォントサイズを大きくした

　HTMLも同様に編集可能。HTMLを編集したい場合にはツールバーから［その他］−［HTMLを編集する］を選択する。ただし、編集できるのは＜＞タグの中身のみとなっている。

図2 CSSと同様にHTMLも編集できる

　エディタ自体はシンプルなもので使い勝手があまり良くないのは残念だが、変更した結果を即座にプレビューでき、気に入らなければ簡単に元に戻すことができる点は非常に有用だろう。

デザインのサポート

　Web Developerではページのデザインをサポートするツールも充実している。例えばガイドラインやルーラー機能だ。ツールバーから［その他］−［ガイドラインを使う］を選択すると、図3のようにガイドラインが表示され、ページ内の要素の位置をピクセル単位で正確に指定することができる。

図3 ガイドラインを表示

　ルーラーは［その他］−［ルーラーを使う］で使用する。ルーラーでは図4のように要素の位置やサイズを正確に計測することが可能だ。

図4 ルーラーで要素のサイズを計測

　そのほか、枠表示機能もページをデザインする際に便利だ。これはフレームやタイトル要素を始めとして、指定した要素を枠で囲って目立たせるというもの。どの要素がどこに配置されているかが一目でわかるのがうれしい。

図5 ブロックレベル要素全てを要素名付きで枠表示した例

CSSやHTMLなどの検証

　作成したウェブページが業界標準の仕様に準拠しているかどうかを調べるには、W3Cで提供されている検証サービス「The W3C Markup Validation Service」を利用するのが確実だ。

　通常はこのサイト上でURLやファイルを指定して検証するのだが、Web Developerには表示中のページを、このサービスを利用して検証するショートカットが用意されている。

　使い方は、ツールバーの［ツール］メニューから［Validate XXXX］を選択するだけ（図6）。検証できるのはCSS、HTML、リンク、フィード、Section 508（米国リハビリテーション法第508条）、WAI（Web Accessibility Initiative）の6つ。Section 508およびWAIはアクセシビリティに関する規定で、HiSoftware Cynthia Saysのサービスを利用する。

図6 メニューから簡単に検証サービスにアクセスできる

　Web Developerにはこの他にも様々な機能が用意されている。効果的に使うことで、ウェブサイトの開発効率は格段にアップすることだろう。