firefox web制作で便利なアドオン

2013/07/01

web制作でおすすめのアドオン紹介

概要

firefox 人気急上昇中!
firefox は自分好みの機能を追加できるアドオンが充実しております。

私は普段 GoogleChrome を使っていますが、WEB制作の時にはほとんど firefox を使用しています。
その理由が、便利な機能を自由に追加できるためです。

今回はその中でも私がよく使用しているWEB制作に役立つアドオンを紹介します。

firefox のアドオンは、こちらで確認できます。
firefox のアドオンは、いれすぎるとブラウザが重たくなるので注意が必要です。。。

Firebug
Html Validator
FireMobileSimulator
Domain Details
ColorZilla

おすすめアドオン一覧

Firebug

アクセスしているページの html、cssなどを簡単に確認することができます。
クリック操作で、好きな場所のコードを確認することができます。
この機能はとても便利なのでもっともインストールすべきアドオンかと思います。

Firebugで特に便利だと感じるところは、閲覧だけでなく html、css、javascript をリアルタイムに編集、デバッグ、モニタできるところです。
たとえば、CSSを変更して表示を確認する場合、通常は以下の手順を踏む必要があります。
1. CSSファイルを編集して保存
2. ブラウザを再度読込
これをfirebugなら、ファイルを編集することなくブラウザ上で直接いじることができます。
Firebug

Html Validator

アクセスしているページの、エラー、警告の数を表示します。
エラーや警告のマークをクリックすることで、該当のエラーを一覧で表示します。
Html Validator のアドオンをいれることで、HTML の文法の間違い等を簡単に確認することができる便利なアドオンです。
ブラウザ上では正しく表示されていても、文法が間違っていたり、スペルミスなどがあるとSEO的にも良くないです。
また、他のブラウザでは表示が崩れるなどの懸念もあるため、web制作者は Html Validator を入れてチェックしていただければとおもいます。
Html Validator

FireMobileSimulator

Mobile向けの画面を表示します。UserAgent と画面サイズを変更しているだけの単純なシミュレータです。
正確に確認するなら、エミュレータまたは実機で確認する必要がありますが、FireMobileSimulator を使用することで簡単にMobile画面が表示できるので、Mobile向け画面作成時にはとても便利です。
FireMobileSimulator

Domain Details

Dmain Details は、サーバ種類とヘッダー、IP アドレス、位置する国旗、Whois 報告へのリンクなどを表示します。
普段なかなか使用することがありませんが、いざというとき(自分のサーバーのIPを調べたいときなど)に便利かと思います。
Domain Details

ColorZilla

ColorZilla は、アクセスしているページの任意の場所から色を取得することができます。
その他に、ページ拡大機能、2 点間の距離測定、DOM インスペクタを行う機能もあります。
他のサイトで使われている色を使ってみたいときなどに使用しています。 Domain Details

  • このエントリーをはてなブックマークに追加
Related

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...

Rails devise で複数モデルの認証機能を実装

Rails devise で複数モデルを管理 概要 rails のログイン認証 Gem「devise」のインストール・設定方法を紹介します。 よく「d...

jQuery UI ドラッグ&ドロップで並び替え sortableの使用方法

sortable 概要 jQuery UIを使用して、ドラッグ&ドロップで並び替えを行います。 sortableを使用することで、一瞬で実装できちゃいます...
トップへ戻る