css レイアウト

レイアウト:float

  1. ブロック要素は横一杯に広がり,縦にレイアウトされる(通常レイアウトフロー)。 sample_0
  2. ブロック要素は,横にスペースがあっても,縦に並ぶ(通常レイアウトフロー)。 sample_1
  3. 要素をfloat(浮かす)すると,指定した方向(left, right)へ移動する。 float指定した要素は通常レイアウトフローから除かれ,後続要素はfloat要素を包むようにレイアウトされる。 sample_2 フロート@MDN web docs
  4. 後続要素がfloat要素を包むのを止めさせるには,clearを設定する。 sample_3
  5. windowの高さに合わせ,footerを最下部に配置する。 sample_4
  6. bodyのwidthを指定して中央に寄せる。body{ width: 940px; margin: 0 auto; } sample_5
  7. 背景色を指定した例。 sample

新しいレイアウト

  1. Flexbox:1次元レイアウト
  2. Grid:2次元レイアウト
  3. Multiple-column Layout:段組みレイアウト