caramel*vanilla > Web制作に役立つFirefoxの拡張(1) - HTML/CSS関連

Firefoxを使うメリット

ワタシがしつこくすすめた効果があったのかなかったのかFirefoxユーザーが1人増えました。
しかもblogも始めたいとおしゃる。
(ホントに始めるかは微妙だけれども…)
せっかくですものFirefoxの便利さをもっと知って欲しいしblogも始めて欲しい。
そこでWeb制作に役立つFirefoxの拡張をいくつかまとめてみました。
blogの記事を書くときに便利な拡張もいくつかあると思いますが今回は省いちゃいました。
これらの拡張があるからFirefoxはやめられないんですよね :-)

長くなりそうなので2回に分けてご紹介します。

HTML/CSS関連の拡張

総合ツール

Web Developer Extension

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools.
Web制作関連の様々なツールをブラウザのツールバーに追加

Web Developer 1.0.2 日本語版

この拡張1個あれば他のはいらないかもってくらいな高機能っぷり。

Web Developer 1.0.2 日本語版の機能一覧

できることがたくさんあってすべての機能を使いこなしてはいないですが…

• ブロック要素のサイズを表示する
• id属性値とclass属性値を表示する
• 入れ子構造を視覚的に表示する
• 色情報を表示する

これらは特によく使ってます。
他のサイトを参考にしたい場合なんかにも便利かもしれません。

Web アクセシビリティ・ツールボックス

日頃の見落しがちなアクセシビリティ上の問題を発見することができます。

Web Developerと重複する機能もありますがアクセス性の高さを100点満点で採点してくれるので参考になります。

HTMLツール

Aardvark

The Aardvark Firefox extension is a tool for web developers/designers as well as casual users.
ウェブ開発者/デザイナーのためのツール

右クリックもしくはツール→Start Aardvark(A)から起動します。
マウスオーバーで赤く囲われた部分のHTML要素class/idを表示してくれます。
CTRL + Vで選択部分のみのソースを表示します。

View Rendered Source Chart

Source charting is a totally new and innovative way to look at source code.
ソースを図で表示する拡張

右クリック→View Rendered Source Chart(V)から起動すると複雑な入れ子になったソースをわかりやすく色別に階層化して表示してくれます。

X-Ray

The X-Ray extension let’s you see the tags on a page without viewing the sourcecode.
ソースコードを見ずにHTMLタグをページに表示

右クリックもしくはツール→X-Rayから起動します。
すべてのタグではなくh, p,font,blockquoteなど主要なもののみです。

CSSツール

EditCSS

The Editcss project ought to be an easy way for web developpers to edit and modify currently loaded stylesheets.
CSSを編集してリアルタイムで確認

特に表示が崩れちゃったときに大活躍
1ピクセル単位で微調整するときにも編集結果が即座に確認できるのでかなり便利です。
(Web Developerにも同じ機能があります)

CSSViewer

A simple CSS property viewer.
CSSのプロパティを表示

マウスオーバーしている箇所のCSSのプロパティを表示してくれます。
(表示もすごいかわいい)

[via]
*snowgrain » Firefox Extension、CSSViewerがいい感じ

それからこそっとListible!にもリストを作ってみました。
てきとーに加えたり評価したりしてみてくださいな。

20 Resources on Best Firefox Extensions for Web Development - Listible!

*1個説明のコピペ間違ったのがあってスイマセン…
修正ができないのが困るなー
でも同じリスト内では重複URLのチェックをしてるっていうのがわかりました。