ホームページを運営していると、季節のイベントなどに合わせてデザインや配色を若干変えるケースがあります。
この場合ソースコードを書き直す必要がありますが、ページ内のどの要素を書き換えるのかなど、ソースコードのみを見ていてもなかなか把握しにくい場合があります。

今回は、ページを見ながらリアルタイムでソースコードを確認できる「Firebug」の使い方をご紹介します。
知っているだけで格段に作業効率が上がりますので、デザイナーやエンジニアの方は特に一読しておくことをオススメします。

Firebugとは

1.png
[インストールはこちらから(Google Chrome用です)](2020年8月13日時点でページが存在しないためリンクを削除しました)

Firebugとは、ホームページHTMLCSS、JavaScriptなどを編集したり、プロファイラーなどを解析するなど、さまざまな開発ツールとして活用できるGoogle Chrome・Firefoxの拡張機能です。
使用料金は無料です。

Firebugを使用する最大のメリットは、リアルタイム性です。
HTMLCSSの内容や表示はもちろん、JavaScriptのコードからオブジェクトの中身までリアルタイムで監視することができます。

ただし、ホームページの改ざん防止のために、確認ができるだけで変更内容がそのまま適応されるわけではありませんので注意してください。
変更箇所・変更内容が決まったら、自社のホームページのソースコード部分での変更が必要となります。

使い方

step1.

まず、Firebugをインストールします。
先にご紹介したURLからインストール可能です。

step2.

2.png
インストールが完了すると、ブラウザの右上にアイコンが追加されます(画像赤枠部分)ので、確認してください。

step3.

3.png
追加されたアイコンをクリックします。
すると画面したからパネルが出ますので、パネルの左上の「Inspect」(画像赤枠部分)をクリックしてください。

step4.

4.png
すると、ブラウザの各要素を選択することが可能になります。
下のパネルには、マウスオーバーしている要素を示すHTMLが青いマーカーで示されます。
そのままではマウスの動きに合わせて下のパネルのコードも動いでしまうので、ひとつの要素に注目したい場合は該当の要素をクリックして選択してください。

step5.

5.png
Firebugでは、表示しているページで使用されているフォントやカラーなども同時に確認することができます。
下のパネルの向かって右側に表示されています(画像赤枠部分)。

これでページ内のソースコードの確認をして、変更点を決定したら実際のソースコードを編集してください。
Firebugでの確認が終了したら、最初にクリックしたアイコンを再度クリックすると、下のパネルが閉じます。

まとめ

Firebugを使用すれば、ページ内のどの要素をどのように変更するのか検討する際に視覚的に把握することができます。
ソースコードだけを見て変更するよりも作業効率をアップできるので、使用しない手はありません。

今回はGoogle Chromeの拡張機能での使用方法を解説しましたが、Firefoxでも同様の手順で使用することができます。
Firefoxを使用している方も、ぜひこのツールを使用してみてはいかがでしょうか。

このニュースを読んだあなたにオススメ

意外と知らない?読みづらいHTMLタグ・属性20個の読み方まとめ
ゼロから自力でHTMLを学びたい方にオススメ!オンラインで学習できるWebサービス10選