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

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

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

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

Firebugとは

1.png
インストールはこちらから(Google Chrome用です)

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の基本構造を学ぼう
意外と知らない?読みづらいHTMLタグ・属性20個の読み方まとめ
ゼロから自力でHTMLを学びたい方にオススメ!オンラインで学習できるWebサービス10選

このニュースに関連するカリキュラム

HTMLの基本構造を学ぼう

HTMLの基本構造を学ぼう

HTMLは「Hypertext Markup Language」の略語で、ウェブページを記述する際に用いられる言語です。「Markup」とはテキストを「構造化」することを意味します。「構造化」とは、テキスト等を単にベタ書きするのではなく、この部分は見出し、強調、リンク、リスト……などと意味付けをすることです。今回は、ほぼすべてのHTMLドキュメントで記述するHTMLの基本構造を説明します。