CSSまとめ - web-0127のブログ

CSSは3次元で考える

記述の順序は「外側から」と「重なり順の上から」があります
一般的にレイヤー構図を意識して記述することが少ないからか「外側から」記述することが多いようです
記述順序例

スタイルの優先順位

スタイルの特殊性（specificity）

スタイルの読み込み順序のルール（あとから読み込んだものを優先する）は、あくまで特殊性が同じスタイルに適用される

要素間の上下マージンの相殺

どちらも正の値の場合、大きいほう
どちらも負の値の場合、小さいほう
一方が正の値、他方が負の値の場合、足し引きした値を設定（5px + 10px = 15px）

fontsizeとlineheight

displayとvisibility

「visibility: hidden」ではボックスが生成されたうえで、不可視化される

position: relative

position: relative（相対的）

その要素本来の位置（左上）からの移動距離

position: absolute（絶対的）

包含ブロック（左上）からの移動距離

bordercollapse

table要素、td要素にそれぞれ表示するborderを重ねて、１重の状態で表示する

table {
bordercollapse:collapse;
}

CSSによるページ構築の手順

この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。

文書構造のグループ化

グループ化とは、div要素によるコンテンツのブロック化

「コンテンツのブロック化」であるので、１行を「div要素」で囲まないことが鉄則
見出しと本文のまとまりとを一緒に構造化

情報を「線形化」する

砕いて言えば、ワープロソフトの１文字が縦に改行されていくイメージです。
その「１文字」は、ひとつのブロックで、なかに情報のかたまりが入っていると考えます。

情報は上の行から順に読まれる
HTMLはブロック化しないと横並びはできない
先に読ませながら、右に並べるときに設定するのが「float : right」

段組レイアウトの注意点

IE6で、マージンが２倍になってしまうバグ

下記のコードで、IE6はマージンが20pxになります。

#sidebar{
　float: left;
　width: 200px;
　margin-left: 10px;
}
#content{
　float: right;
　width: 500px;
　margin-right: 10px;
}

マージンが２倍になってしまうバグは、「display:inline;」で解決します。

#sidebar{
　float: left;
　width: 200px;
　margin-left: 10px;
　display: inline;
}
#content{
　float: right;
　width: 500px;
　margin-right: 10px;
　display: inline;
}

width を指定したボックスには border も padding も指定しない
フロートのコンテナブロックには幅を指定する

【IE6でよく遭遇するCSSのバグとその解決方法】