THE HAM MEDIA BLOG

(X)HTMLやCSSの動作を見るためにプログラマも入れておくべき5つのオススメFirefoxアドオン

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
便利サイト
タグ:
Firefox
アドオン

(X)HTMLやCSSの動作を見るためにプログラマも入れておくべき5つのオススメFirefoxアドオン

先日のLOCAL PHP部のつどいに参加したとき、
プログラムはかけるけど、マークアップとかCSSは苦手という人が何人かいた。
HTMLのバリデートやCSSのレンダリングを見るために、
このFirefoxのアドオンを入れておくと便利!
というのをいくつか紹介しておきたいと思います。



ハムも使っているオススメのアドオン

Firebug

(X)HTMLやCSSの動作を見るために、Webプログラマも入れておくべき5つのFirefoxアドオン

これはすでに入れている人も多いツール。

このFirebugを使ってCSSの修正チェックをしたり、
JavaScriptの動作チェックやエラーチェックをしたり、
HTML、CSS、JavaScriptのチェックが容易にできるのだ。

調査を使うことで、ブロック要素の大きさも見たりできるは魅力的。

コーダーでも、最低限これは入れておきたいアドオンだ。

Web Developer

コーダーとかWebデザイナーには必須のアドオンの一つだと思っている。
でも意外だったのは、プログラマーさん達はこれをあまり入れていないようだ。

これを使うことで、CSSのオンオフや、JavaScriptのオンオフ、
クッキーのオンオフやクッキー情報の削除、
フォームや画像関連のことなどを制御することができるツールだ。

また、表示上での様々な情報を表示することが可能だ。
下の画像は、ボックス要素のサイズを表示した状態。

(X)HTMLやCSSの動作を見るために、Webプログラマも入れておくべき5つのFirefoxアドオン

要素の状態やXPath(祖先・子孫セレクタ)などを表示することも可能。

(X)HTMLやCSSの動作を見るために、Webプログラマも入れておくべき5つのFirefoxアドオン

そして何よりうれしいのが、Validatorチェックが容易にできること。
ツールに各種検証リンクが入っていて、見ているページをチェックすることができる。
自分のパソコンのローカルファイルも、そこから簡単にチェックできるのはかなり魅力的。

これも必ず入れておきたいアドオンの一つだ!

JSView

(X)HTMLやCSSの動作を見るために、Webプログラマも入れておくべき5つのFirefoxアドオン

これは、見ているページで読み込まれているJavaScriptファイルやCSSファイルを
簡単に開くことができるアドオンである。

僕のブログを見ると、JavaScriptファイルの読み込みすぎなのがよくわかる。
CSSも簡単に開くことができるので、入れてあると便利なツールだ。
ただ、CSSを@importで読み込んでいるファイルは表示されないのは悲しいところ。

HTML Validator

validatoのアドオンとしては、Web Developerと重なる部分もあるが、
このHTML Validatorの優れているところは、
わざわざW3Cのチェックサイトやlintなどのチェックサイトに行かなくても
チェックしたいページをみているだけで文法チェックができるところである。

間違っている箇所も何行目にあるのかもおしえてくれるので、
すぐに修正することができてしまう。

IE Tab

最後の5つ目はIE Tab。
このアドオン、IEがもともと使えないMacでは使うことができない。
しかし、Windowsユーザーであれば、入れておいたほうがいいアドオンである。

Firefoxをレンダリングチェックの基本にしていても、
IEで見たときに崩れてしまっているということが多々ある。

PCに入っているIEが6であると、確認する側としてはとてもいい。

プログラマは意外とバリデートとか気にしない?

上記にあげたのは、HTMLやCSSの修正やチェックが簡単になるアドオンばかり。
しかし多くの人が使っているのは、FirebugやIE Tabくらいだったりする。
もう少しHTMLの出力結果などを気にしてもらいたい僕としては、
せめてWeb DeveloperとHTML Validatorを入れておいてもらいたいと思う。

もちろんプログラマだけでなく、コーダーやデザイナーの人も、
上記のアドオンは入れておくと便利!
まだ入れていない人はぜひ入れてみてはどうだろう。



この記事へのコメント
JSView 以外は入ってるんですけど、使えてません。
FirebugはJavascript組む時に多少使いますが、デザイン系のはさっぱりだったり。
私はこう使ってる!というのがあるとうれしいかも。。。
Posted by bobchin at 2008年09月25日
>bobchinさん
JSViewは見ているサイトでどんなJavaScriptやCSSを指定しているのかというのを見るのに便利なツールです。
「私はこう使っている!」というのはたしかにあるとわかりやすくていいですよね。
今度エントリーしてみようと思います!
Posted by ハム at 2008年09月26日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。