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