« サブプライム後の新世界経済 | トップページ | Googleブック検索と二分探索 »

2009年3月18日 (水)

Firebugを使ってみた

このブログ、左右の幅が狭いなーとつねづね思っていたので、ちょっと広げてみた。広げるに当たっては、実践 Web Standards Design でCSSについて勉強しつつ、便利と評判のFirebugでHTMLの構造を調査した。

で、ごらんのとおり70pxほど幅が広がっているのだけど、Firebugは評判なだけあってすごい!

Firebugをインストールすると、右下に虫のマークが表示されて、それをクリックすると、Firefoxの下半分がFirebugの画面になる(Ctrl+クリックなら別ウィンドウで開く)。左半分にHTMLがツリー構造で表示され、属性(タグ)をクリックするとそこに設定されているCSSのスタイルが継承関係を含めて右半分に表示される。また、メニューの「調査」をクリックしてから、ページにカーソルを合わせることで、ページの見た目からその位置の属性(タグ)が一発でわかる。CSSやHTMLは編集ができて、修正がどのように見た目に影響するかがすぐに分かる。そんな感じで、Firebugでページ内を調べた結果、幅を広げるにはstyles.cssで定義されている#containerのwidthプロパティと、#centerのwidthプロパティを大きくすればよいことが分かった。

なので、ココログのカスタムCSS機能で、↓なのを追加してみた。もともとの#containerや#centerは上書きできなくて、同じ属性が下のほうに追記されるらしく、後勝ちのルールに従って有効になるみたい。

/*** styles.cssの上書き修正 ***/
/* 大枠のdiv属性 */
#container {
    width:772px; /* オリジナルは702px */
}
/* 本文枠のdiv属性 */
#center {
    width:570px; /*オリジナルは500px */
}

最初、#containerの"#"の意味が分からなくて苦労した。おそらくIDセレクタ(一意セレクタ)のことで、id="container"の属性を指しているんだろうとは思ったのだけど、その前にあるはずの「属性名」がない。div属性を意味するのか、それとも属性名を気にしない(idで一意に定まるので)のかなぁと想像したのだけど、この例がIDセレクタの項目に載ってない・・・なぜだーと思ってググったら、ユニバーサルセレクタ(全称セレクタ)"*"が省略されている形らしい。ユニバーサルセレクタの項目を見たら確かに載っていた。

"*"の後に属性セレクタ、idセレクタ、擬似クラスを続ける場合は"*"を省略することができます。

知らんわ~。

|

« サブプライム後の新世界経済 | トップページ | Googleブック検索と二分探索 »

コメント

死ぬまで勉強とは頭が下がります。

「まずはぐぐれ。話はそれからだ」

を家訓にしましょう。

私も勉強せねば。

花粉症の鼻水で大事なことがどんどん出て行ってしまってマフ。ほへー。

投稿: 妻えもん | 2009年3月18日 (水) 10時01分

にゅー、知識をほじうですよ。(`・∞・´)

投稿: るー | 2009年3月18日 (水) 19時56分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/207693/44383004

この記事へのトラックバック一覧です: Firebugを使ってみた:

« サブプライム後の新世界経済 | トップページ | Googleブック検索と二分探索 »