FirefoxのWebページ開発アドオン「Firebug」の日本語版が、07年06月18日にリリースされました。
ゴキブリアイコンの「Firebug」はHTMLやCSSのリアルタイム編集、JavaScript等のデバッグ等を提供してくれるアドオンです。非常に高機能ですが英語版のために手探りでちょこっと使う程度でしたが、これで手軽に使い易くなったと喜んでいます。
機能豊富な分だけ説明すると非常に長いので、
他の記事で質問があったので今回は「ブログの新着記事のリンクの下線を消したい」という例を使って説明します。見た目の編集となるため、Webページの見た目を定義するスタイルシートの編集を行う事になります。
まずは
公式サイトからFirebugをダウンロード・インストール、Firefoxの再起動を行います。Firefoxのメニューバーの「ツール > Firebug > Firebug を無効」のチェックを外して、有効化します。同じメニューの「Firebug を開く」で、Firefox下部に作業ウィンドウが開きます。「Firebug を新しいウィンドウ開く」を選択すると、別ウィンドウになるために作業しやすいです。
また、Firefoxのステータスバーの右下に新しいアイコンが追加されていますので、右クリック等の操作で同様の処理が行えます。
Firebugを有効化すると、右クリックメニューに「要素の調査」が追加されます。実行すると、HTMLのその記述場所に移動し、CSS（スタイルシート）の関係する場所を抜粋して表示します。上の画像は新着記事のリンク文字の上で右クリックから要素を調査した状態で、ウィンドウの左にはHTMLの内容が、右にはスタイルが表示されています。隠れて全ては見えませんが、スタイルとしてcolor（文字色）、text-decoreation（文字の装飾）等のスタイルが設定されているのがわかります。
上の画像のように今は新着記事のリンク文字は下線が付いていません。そこで下線を消している項目を探してみます。
スタイルの左端をクリックすると赤い駐車禁止のようなマークが付きます。これはそのスタイルが無効化されたという意味です。左下の画像はスタイルを無効化した状態、右下はリアルタイムに変更された状態です。
この無効化により、Webページ全体のリンクに下線が付くようになりました。これで「text-decoration:none;」はリンクの下線を制御しているのがわかりました。noneの装飾無しの替わりに、underline の下線や、overline の上線等も設定できます。
次に、スタイルの「.side A」の上で右クリックして「新しいプロパティ」を選びます。新しいプロパティを入力出来るようになりますので、そこで「text-decoration: none;」と入力します。画面上ですぐにリンクの下線が消えるのが確認できます。プロパティの入力はオートコレクト機能（自動補完機能）が働きますので、「tex」と入力すると「text-align」の候補が出てきますし、上下の矢印キーで他の候補も出てきますので、エンターキーで決定する事で入力ミスの可能性を減らせます。エンターキーを押すと、自動的にプロパティの値に移動しますので、同様に値を決定します。この場合ですと「none」です。下の画像が適用例です。
この時、スタイルの「継承元 div.side」にある「text-decoration」が取消線で消されているのがわかります。スタイルはドンドンと対象に近い要素の設定で上書きされていきます。一番上の画像のHTMLの上の部分に「a < div.side < div#links < div#container < body < html」があります。これは右から左へと順番に要素が積み重なっている（構造化）事を示します。スタイルに関して言えば、右のスタイルから順番に順番に適用されていますので、例えば「links」というスタイルで太字を設定するとその下の要素の文字は全て太字になります。
上の「div.side」という文字をHTMLで検索しても、見つかりません。これは「<div class=side>」を縮めた形と思って下さい。同じく「div#links」は「<div id=links>」を縮めた形です。「 . 」は class= を意味し、「 # 」は id= を意味しますので、検索する時の参考にしてください。id も class も個別にスタイルを適用するための名前付けだと思ってください。id と class の差はWebページの中で一回だけしか使えないという違いがあります。
今回のお題目である「ブログの新着記事のリンクの下線を消したい」で設定する項目は、スタイルシートの「.side A に、text-decoration:none; を追加する」で達成できることがわかりました。一部のリンクの下線だけを変更したい場合は、上記のように要素（タグ）に class を追加して、その名前のスタイルを追加すれば達成できます。
私もWebに詳しくないので説明が苦手ですが、FirebugはWebページの作成やカスタマイズに便利なツールであることは感じれたのではないでしょうか？ このアドオンは他人のサイトを参考にする時にも効果を発揮します。「どうやったらこんな風に見えるの？」をわかりやすい形で見れるようになります。
但し、編集した内容をFirebugで保存する機能はないようです。PC上のファイルをFirebugで確認して実際のWebページに反映させるという使い方がよいと思います。
関連記事
