CSSまとめ

CSSは3次元で考える


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

スタイルの優先順位

スタイルの特殊性(specificity)

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

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


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

fontsizeとlineheight

displayとvisibility

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

position: relative

position: relative(相対的)

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

position: absolute(絶対的)

包含ブロック(左上)からの移動距離

bordercollapse

  • table要素、td要素にそれぞれ表示するborderを重ねて、1重の状態で表示する
table {
bordercollapse:collapse;
}

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


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

文書構造のグループ化

  • グループ化とは、div要素によるコンテンツのブロック化
  • 「コンテンツのブロック化」であるので、1行を「div要素」で囲まないことが鉄則
  • 見出しと本文のまとまりとを一緒に構造化
情報を「線形化」する

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

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




段組レイアウトの注意点

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


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

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


マージンが2倍になってしまうバグは、「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のバグとその解決方法】

floatと親ボックスの「高さ」