表示しながらCSSの編集が出来るFirebugの使い方

実際の表示を確認しながらCSSの編集を行いたい時ってありませんか。特にサーバーにアップした後はCSSを変更してFTPでアップ後、表示させるというのは面倒です。
そんな時に便利なのが今回紹介する、FireFoxのアドオンツール、「FireBug」です。
結構、有名なツールなので使っている方もいるとは思いますが、備忘録も含めて説明します。

FireBugとは

FireBugとはFireFoxブラウザのアドオンツールです。このツールの特徴はサーバーにアップした状態でhtml、CSS、JavaScriptの設定を疑似的に変更する事により、サイトの見栄えを変える事が出来るツールです。
ただ、実際にサイトのCSSデータを変えるのではなく、あくまでも疑似的なので実際に変更する場合にはCSSファイルを変更後、サーバーにアップする必要があります。
ただ、ワードプレス等のCMSで構築したサイトの場合は、実際に動いているサーバーを変更することもなかなか難しいし、かといって管理画面からCSSをちょこっとずつ変えていくのも大変なので、運用中のCMSサイトでFireBugを使って変更状態を確認し、その後に管理画面に入ってまとめて変更するというのが、サイトを運用する上で便利なのではないかと考えています。

FireBugのインストール

FireBugはFireFoxブラウザのアドオンツールです。なのでFireFoxをインストールしていない方はインストールをお願いします。

FireFoxのダウンロード

まずはFireFoxブラウザを開いてFireBugのダウンロードサイトからダウンロードを行います。

FireBugのインストール

FireFoxへインストールのボタンをクリックするとソフトウェアのインストール画面が表示されるのでインストールをクリックして下さい。

インストールボタンをクリック

インストールが終わるとFireFoxブラウザの右上に虫(Bug)の絵が表示されています。

FireBugのアイコンが表示

これでインストールは終了です。

FireBugの使い方

FireBugの使い方ですが、アイコンをクリックするとアイコンの色が変わってブラウザの下面に編集画面が表示されます。

アイコンの色が変化

FireBug編集画面

この編集画面を使ってhtmlやCSS,JavaScriptを編集してサイトの変化を確認して下さい。

編集画面で設定を決めたら実際のファイルに反映してサイトにアップするなり、CMSの管理画面から変更するなりして下さい。

実際の使い方や機能についてはこちらのサイトの方が詳しく行っているので一度、見てみて下さい。

参考サイト

最後に

FireBugのインストールから編集方法まで簡単に説明しました。

詳しい説明はFireBug公式サイト(英語表記)に掲載しているのでそちらを参考にして下さい。

追記・Google Chromeでのインストール

FireBugですがGoogle Chromeでも使えるようなのでインストール方法を追記します。

まずはGoogle Chromeブラウザを開いて下さい。

次にGoogle Chrome用のFireBugページを開きます。

ページを開いたらInstall FireBug Liteのボタンをクリックして下さい。

GoogleChrome用FireBugページ

すると「Firebug Lite Google Chrome」のページに移動するので右端の「+無料」ボタンをクリックします。

無料ボタンをクリック

「新しい拡張機能の確認」画面が出るので「追加」ボタンをクリックします。

追加ボタンをクリック

インストールが完了すると右端に「CHROMEに追加済み」と表示されます。

追加済みの表示

Chromeブラウザの右上に虫(BUG)の絵が表示されているのを確認出来ると思います。FireFoxの虫の絵とは少し違いますね!

虫の絵の表示

あとはFireFoxの時と同じように虫のアイコンをクリックするとブラウザの下面に編集画面が出てきます。

Chromeの編集画面

あとはFireFoxと同様の方法で編集が行えます。

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

コメントを残す




関連記事

これは便利!オンラインで出来る日本語校正補助ツール!
簡単にWindows10のフォントを変更できるツール
Windows7,8からWindows10に更新後の環境改善を行うツールを試してみました
画像に簡単に説明を加える事が出来るキャプチャ(スクリーンショット)&注釈ツール「Screenpresso」
webデザインのグリッドレイアウト作成に使える無料ツール
レスポンシブ・フレームワーク「Bootstrap」を使う際に便利なツール、アイコン、テンプレート
フリーで使える高性能3D CADソフト「DesignSpark Mechanical」
HTML5ベースのアニメーションを手軽に作成出来るウェブアプリ
2014年春、人気のCSSフレームワーク フラットデザイン対応もあります
無料テーマPrinciple限定でのOGP設定方法(コードあり)
Dreamweaverを超えた?無料で使える高性能htmlエディタBrackets
FireFox、Chromeブラウザのアドオンツール「SimilarWeb」で簡単にアクセス解析を
競合サイトのアクセス解析が無料で出来るツール「SimilarWeb」
Bracketsを使っている方へお薦めの一冊「Webのための次世代エディタBracketsの教科書」
鮮やかな背景をCSSで表現できるウェブツール これはかなり使えます!

Menu

HOME

 TOP