隣接セレクタと子セレクタを認識。。

子要素にだけスタイルを適用するには、親要素を正しく設定してやる必要あり。

内のh2要素の後にくるulに左マージンを作ってやろうとしたら、関係ないグローバルナビのulにまでマージンが発生してレイアウト崩れて、少々悩みました。
h2 > ul{    margin-left:50px;
}
みたいに設定したら無理で、
div#main > ul {
    margin-left:50px;
}
はOKでした。

子セレクタへのCSS適用は、ちゃんと親要素を設定してやらないといけませんね。

h2とulは隣同士の関係だったので、「隣接セレクタ」という「+」で設定するようですね。
「子セレクタ」と「隣接セレクタ」を混同していました（爆）

input type='text' とtextareaの違いメモ

input typeでtextにした際は、textboxの長さはsizeで指定。

一方、textareaの場合は、rows,colsで指定。

メモでした。

backgroundの省略形と、CSSでの一枚画像でのロールオーバー

backgroundというプロパティなら、backrgound:url(button.png) no-repeat 0px 0px;
などという風に複数の値を記述可能。

background-imageならイメージのURLだけ。当然ですが。。

それで、CSSのみでロールオーバーさせる場合、
上下にロールオーバー前と後の両方の画像を作って、
a要素をdisplay:blockにし、
backrgound:url(button.png) no-repeat 0px -30px;
みたいに上などに適宜ずらしてやればOK。

参考になったページ：http://www.acky.info/tips/css/00014.html

センタリングとwidthの関係

ある領域をセンタリングしたい場合、
{
text-align:center;
margin:0 auto;
}
とするのは便利だが、
widthで値を指定してやらないとセンタリングされない。

当たり前のことかもしれないが、最初ちょっと思いつかず、
「なんでセンタリングされる場合とされない場合があるんだろう？！」と思っていた（笑）。

メモでした。

IE5のimgにfloatでカラム落ち。。

IE6までは大丈夫なのに、IE5.5ではカラム落ちする現象が発生し、悩みました。（どうもIE7でも落ちていた様子。自分の環境のIE７はIE testerなので再現せず。。）

親ボックスのwidthに対して、左右のボックスwidthをぴったり設定しているのに落ちるから、「なんでだろう！？」と思っていました。

判明した原因は、左と右にfloatでカラムを作った際、右はdivでくくっていたのに、左は単にimgにfloat:leftを振ってやっていたことが原因と判明。

IE5だと、imgのborder:0；にしておいてやっても、何かが邪魔するようです。。
margin-left:-5px;で落ちなくなったので、4px分何かが悪さしていたようです。。

vertical-alignをimgに当てたら、いい感じに。

今までvertical-alignをtextの方に宣言していました。

が、「どうもうまく画像と文字の上下バランスを調整できないなあ。。。」と思っていて、
ふと調べたら、
imgの方に割り当てることが書かれていました。
（「スタイルシート上級テクニック」河内正紀著P140)

すると、けっこううまく調整できました。。

よかった。

改行の恐怖。。

IE６以外のブラウザだと隙間があかないのに、
なぜかIE6だと、ブロックとブロックの間に隙間が出ている、という現象に少し悩まされました。

いろいろやってわかったのは、
二つの画像を横並びに配置しているレイアウトで、
その二つのimgタグを二行に分けて書いていたことが原因となっていました。

いろいろやっていて、ふと改行を加えず、二つのimgタグを一行にまとめてやると、marginが消えました。。

どうやら、改行が半角スペースとしてレンダリングされたことにより、
指定したwidthの範囲を超えたので、
下にmarginができた様子です。

改行（＋IE6)、気をつけねば。。。