表示しながら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
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

htaccessファイルの作成方法-サイトのリダイレクトやアクセス制限にも使えます
ウィンドウズアップデートで画面のフォントが見にくくなった時に使ってみて下さい!
レスポンシブウェブサイトで必須!メディアクエリとブレイクポイントの仕組み
アイコン付きのフラットデザイン風ボタンを簡単に作れるツール「2.5dBUTTON」
Bootstrapを採用しているhtmlテンプレート&テーマ
デザイン全般で使えるweb色見本
画像に簡単に説明を加える事が出来るキャプチャ(スクリーンショット)&注釈ツール「Screenpresso」
サイトの画像コピーや右クリックでの操作を禁止する方法
2014年春 お勧めのウェブアイコンフォント(web icon fonts)2種類!
FireFox、Chromeブラウザのアドオンツール「SimilarWeb」で簡単にアクセス解析を
サイト構造と被リンクの確認が無料で出来るツール「AdMatrix Analytics」
競合サイトのアクセス解析が無料で出来るツール「SimilarWeb」
HTML5ベースのアニメーションを手軽に作成出来るウェブアプリ
無料で使えるウェブスケジュール管理・予約管理ツール
レスポンシブ・フレームワーク「Bootstrap」を使う際に便利なツール、アイコン、テンプレート

Menu

HOME

 TOP