数あるFirefoxのアドオンの中で、Web制作に特化したアドオンと、オススメのカスタマイズを紹介したいと思います。
自分は職場でWin:Dreamweaver、自宅ではMac:Codaを使用しています。今回は会社のWindowsでの紹介となります。Macでは、後で説明するIETabが使えないので。
基本はDreamweaverでHTMLとCSSのラフを作りコーディングし、CSSの調整・編集を行います。そしてCSSの確認などは全てFirefoxで行っています。
ま、とりあえず紹介に入りたいと思います。
まずはFirefoxのヘッダー(ツールバー？)
アドレスバーの右側に【IETab】【ソースを表示】【Webdeveloper】といった感じで、ポチポチよく押すボタンが配置してあります。
中段が【Webdeveloper】のツールバー。下段がGoogleツールバーです。
因みにGoogleツールバーの右側のリンクバーには、【はてなブックマーク】と【Yahoo!辞書】のリンクが貼ってあります。
各ツールについては、後で詳しく書きます。
では、次にフッター(ステータスバー？)
左側の左から【MeasureIt】【ColorZilla】
右側の左から【TwitterFox】【IETab】【GREASEMONKEY】【GooglePreview】【Googleノートブック】【振り仮名インジェクター】【Firebug】【ダウンロードステータスバー】
といった具合が会社のFirefoxの状態です。
因みに【TwitterFox】【GREASEMONKEY】【GooglePreview】【振り仮名インジェクター】【ダウンロードステータス】等は、あまりWeb制作には関係ありません。
では、ツールを紹介します。
無いとマジで困るFirefoxアドオンのうちの1つ、Webdeveloper。具体的に何ができるかというと、様々な情報を表示したりCSSやクッキーなどを無効にしたりなど。
自分は見落としがちなalt属性などを表示させたりしています。後はCSS無効、画像をalt属性に置換えるなどしてテキスト量なんかも見れたりします。
まあ、この子もメジャー中のメジャーですが、無いと厳しい愛用アドオンの一つFirebug。
JavascriptやAjaxなどの方々には最高のデバッグツールだと聞いています。
何がすごいって自分はInspect機能が最高に嬉しい。
例えばページ中段の入れ子になったdivを選択して、現在そのdivにはどんなCSSが効いていて、どんなCSSが無効になっているか分かる。また、そのプロパティをFirebugで修正できる。
もう、この機能がマジで使える。もちろん、他にもやれる事はたくさんありますが、自分は先ほどいった+ほんの少しの機能しか使っていないです。
ただ、ロゴが……なぁ……。
虫とか嫌いな人はページも見ないほうがいいと思います。自分は今でも拒否反応がたまにおこります。
○IETab ※左のリンクはFirefox2用です。
他のページでも何度か紹介しているFirefoxの一つのタブをIEエンジンに切り替えるツール。
自分はDreamweaverのデフォオルトプレビューをFirefoxにし、そこでIEでも確認。という様にしています。
これはFirefoxで表示されているページ内に、可変可能な定規を表示するツールです。
左側の画像を見てくれると分かりやすいのですが、ふとした時にWebページの幅や高さ、余白をはかりたいと思ったとき、このツールが非常に役に立ちます。
これも、MeasureItと同じで、ちょっとしたときに便利なツールです。
抽出したカラー情報は、いちいち覚えなくても、コピペできるので楽です。
とりあえず、自分がFirefoxでWeb制作時に重宝するアドオンはこれだけですかね。
もし、気になったアドオンがありましたら入れてみてください。
トラックバックURL
コメントはまだありません。