Firebug = WebページからCSSの要素名を簡単に見つける方法 - CSSカスタマイズ
要素の名前の特定は、Firefoxブラウザーの Firebugアドオンが便利です。o Firefoxブラウザー ▽http://mozilla.jp/firefox/
o Firebug アドオン ▽https://addons.mozilla.org/ja/firefox/addon/1843
**** Webページのデータ構造の調べ方 = Firebug バージョン1.5.3の場合
(1) 最初に、Firefoxブラウザーで、調べたいマイページを表示します。
(2) ブラウザー右下にある「虫のアイコン」をクリックします。
(3) 下からメニューなどが出てきますので、左から2番目。矢印の付いたアイコンをクリックします。
+ このアイコンにマウスカーソルを合わせると、「ページ内の調べたい要素をクリックしてください」と表示されます。
(4) 調べたいマイページの調べたい所に、マウスカーソルを合わせます。
(5) 確定したい時は、クリック、もしくは右クリックします。
+ 左下の画面は「対応するHTML」、右下の画面に「対応するCSS」が表示されています。
(6) 入れ子が細かい時は、左下のタグを辿って微調整します。
+ 選択範囲の切り替えは、「<の少し右側をクリック」が簡単です。
(7) 右下の画面に、現在有効な CSSが表示されています。
+ レイアウトタブで、隙間の確認。DOMタブで、HTMLの細かい設定値の確認が出来ます。
(8) 要素の名前をコピーしたい時は、例えば
<div id="aaa" class="bbb">
なら aaa や bbb をクリックします。すると、右クリックからコピーできるようになります。
+ CSSでの書き方は、 div#aaa もしくは div.bbb
+ div以外のタグで使用していない名前の場合、 div は省略可能です。
(9) Firebug画面を閉じたい時は、一番右のボタンを押します。
+ 赤いボタンが3つ並んでいますが、一番右端のボタンです。
+ マウスカーソルを合わせると説明が現れます。
(10) 間違えて操作してしまった場合でも、大丈夫です。
+ Firebugを使ってCSSを修正しても、ブラウザー上の表示が変わるだけです。
+ もう一度表示すると、画面は元に戻っています。
**** メモ
o 取り出した名前を実際に使う時は、適用対象となるページにも注目します。
+ 例えば、zoomeの場合、マイページ全体で1つのCSSを使います。
+ コメントリストは、トップページと日記ページで登場します。それらを区別したい時は名前の指定を工夫します。
+ 他のサイトも概ね同じですが、Bloggerのように、投稿記事内にCSSを書く小技が使える所もあります。
o 名前の特殊な指定方法については「zoomeマイページの右と左を区別する」。
＝＝
関連ページ：
▼CSSを調べる
▼CSSカスタマイズ
▼制作メモ
＞ CSS用語の意味を簡単に調べる
zoomeのマイページを簡単に解析する
「ソースの表示」から CSSを見つける
設定画面中にある CSS入力欄を簡単に辿る
