サイト生成に役立つ拡張機能
Firefoxのブラウザには、タグやスクリプトの解析を行う為に役立てられる拡張機能が多数紹介されていますが、私が無いと困る拡張機能だけを3点に絞り掲げてみました
FireBug
Page Hacker
MeasureIt
FireBugはJavaScriptのデバッグや、CSSの調整など使用領域はかなり広範囲に有効活用できます
デバッグの方法についてはこちらで解りやすく説明されています
http://wildcat.cocolog-nifty.com/web/2006/06/firebug_d869.html
CSSの調整に於いては調べたい個所にカーソルを置き、右クリックして「要素を調査」にクリックをすると、各詳細を鮮明に追跡することができます
コンソールを利用してpadding.margin.border-style.border-width.border-colorなどに変化を加えてブログのスタイルを変更することができます
レイアウトをクリックするとstyle.cssを変更して表示させることもできます
Webレイアウトの調整に役立ちます
ツールFirebugを開きます
次に確認したい画面の上でカーソルを右クリックし部分指定をします
「要素を調査」でクリックをします
すると左下に部分を指定したタグが表示されます
下記画像の数字をクリックし変更したい値を入力するとTOPの画面上が変更されて反映されます
Page Hackerは画像の大きさをその場で変更して確認することができます
こちらからダウンロードできます
https://addons.mozilla.jp/firefox/details/5753
こちらで詳しく説明されています
http://techblog.ecstudio.jp/tech-tips/firefox-addons-for-screen-review.html#more-308
MeasureItはデスクトップ上の定規になるので、画像寸法などの確認に利用することができます
例えば画像ファイルのピクセル数が知りたい時、完了左横にある目地枠内をクリックします
計測したいデスクトップ上の端から端まで左クリックを押しながらドロップすると下図画像の様にピクセル数が表示されます
とても便利なツールです
こちらからダウンロードできます
https://addons.mozilla.org/ja/firefox/addon/539
インストールが終了したらブラウザ上部にあるツールタブをクリックします
アドオンをクリックします
使用する時は、目地枠内をクリックして色を変更させてください
有効化をクリックします
インストールをすると画面右下に常駐されますのでアイコンをクリックします
すると画面色が少し変わります
カーソルが＋になるので左クリックをを押したままドラッグすると下図のようにピクセル数が表示されます
WEBページの作成や画像の挿入に役立てることができます
Firefoxのブラウザはアドオンの利用によって必ず役に立つと思います
※アドオンのインストールはFirefoxのブラウザを利用している状態でインストールすれば、保管先のフォルダ指定などする必要はありません
確認のダイアログは出力されますが全て自動でインストールの手順を踏むことができます
