Firefoxを使うメリット
ワタシがしつこくすすめた効果があったのかなかったのかFirefoxユーザーが1人増えました。
しかもblogも始めたいとおしゃる。
(ホントに始めるかは微妙だけれども…)
せっかくですものFirefoxの便利さをもっと知って欲しいしblogも始めて欲しい。
そこでWeb制作に役立つFirefoxの拡張をいくつかまとめてみました。
blogの記事を書くときに便利な拡張もいくつかあると思いますが今回は省いちゃいました。
これらの拡張があるからFirefoxはやめられないんですよね :-)
長くなりそうなので2回に分けてご紹介します。
HTML/CSS関連の拡張
総合ツール
The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools.
Web制作関連の様々なツールをブラウザのツールバーに追加
この拡張1個あれば他のはいらないかもってくらいな高機能っぷり。
できることがたくさんあってすべての機能を使いこなしてはいないですが…
- ブロック要素のサイズを表示する
- id属性値とclass属性値を表示する
- 入れ子構造を視覚的に表示する
- 色情報を表示する
これらは特によく使ってます。
他のサイトを参考にしたい場合なんかにも便利かもしれません。
日頃の見落しがちなアクセシビリティ上の問題を発見することができます。
Web Developerと重複する機能もありますがアクセス性の高さを100点満点で採点してくれるので参考になります。
HTMLツール
The Aardvark Firefox extension is a tool for web developers/designers as well as casual users.
ウェブ開発者/デザイナーのためのツール
右クリックもしくはツール→Start Aardvark(A)から起動します。
マウスオーバーで赤く囲われた部分のHTML要素class/idを表示してくれます。
CTRL + Vで選択部分のみのソースを表示します。
Source charting is a totally new and innovative way to look at source code.
ソースを図で表示する拡張
右クリック→View Rendered Source Chart(V)から起動すると複雑な入れ子になったソースをわかりやすく色別に階層化して表示してくれます。
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ツール
The Editcss project ought to be an easy way for web developpers to edit and modify currently loaded stylesheets.
CSSを編集してリアルタイムで確認
特に表示が崩れちゃったときに大活躍
1ピクセル単位で微調整するときにも編集結果が即座に確認できるのでかなり便利です。
(Web Developerにも同じ機能があります)
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のチェックをしてるっていうのがわかりました。
Leave a Reply