floatを使ったレイアウト基礎

CSSレイアウト

  • テキストP.092〜095
  • 基本は、floatを使ったレイアウト

floatプロパティを使ったレイアウト

  • 通常ならHTMLの順序通り縦に並んでしまうコンテンツを横に並べることが可能になります
  • floatは浮き上がっている状態
  • floatを使ったレイアウトは、HTMLソースコードの順序と表示順が連動するため、レイアウトに一定の制約ができます
  • floatした子要素を持つ親要素は、高さがなくなる
  • 後継要素がある場合は clear:both、無い場合は clearfix か overflow:hidden で float解除する
通常の表示状態
  • スタティック
  • ソースコードの記述順と同じように上から順番に縦に並んで表示されます


float:leftのソースコードと表示状態
  • float（浮き上がる）
  • 浮き上がって上→下の順に並んだブロックが、そのまま左から追い込まれて横に並びます


float:rightのソースコードと表示状態
  • float（浮き上がる）
  • 浮き上がって上→下の順に並んだブロックが、そのまま右から追い込まれて横に並びます


一部分だけにfloatが設定された場合のソースコードと表示状態
  • float設定されたブロックの後ろに続く要素も領域に隙間があれば入り込んできます（レイアウトの崩れ）


一部分だけにfloatを設定し、継続要素で解除した場合のソースコードと表示状態
  • float設定を途中から解除したい場合、後続要素に対してclearプロパティによるfloat解除の設定を行う必要があります


演習課題

F01

  • ボックス「primary」「secondary」を背景色をつけて表示するよう記述しなさい
  • それぞれ、幅：200px、高さ：200px、背景色：適宜


F02

  • 「primary」を左に、「secondary」を右にfloatさせなさい


F03

  • 「primary」と「secondary」を「wrapper」で囲みなさい
  • 「wrapper」は、幅450px、高さ：auto、背景色：適宜


F04

  • 「primary」を右に、「secondary」を左にfloatさせなさい


F05

  • 「wrapper」と「primary」「secondary」の空きを10pxに設定して表示させなさい


F06

  • 「wrapper」をブラウザの中央に表示させなさい

floatプロパティを使ったレイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatを使ったレイアウト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">#header</div>
<div id="nav">#nav</div>
<div id="wrapper">
<div id="content">#content</div>
<div id="sidebar">#sidebar</div>
</div><!-- /#wrapper -->
<div id="footer">#footer</div>
</div><!-- /#container -->
</body>
</html>



@charset "UTF-8";

/* reset */
html, body, div {
  margin: 0;
  padding: 0;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* body */
body {
  background: #CCC;
}

/* layout */
#container {
  width: 740px;
  margin: 0 auto;
  padding: 10px;
  background: #FFF;
}
#header {
  height: 100px;
  margin-bottom: 10px;
  background: #B1DAF0;
}
#nav {
  height: 40px;
  margin-bottom: 10px;
  background: #FFE3F1;
}
#wrapper {
  overflow: hidden;
  width: 740px;
  height: auto;
  margin-bottom: 10px;
  background: #F3B2B3;
}
#content {
  float: left;
  width: 530px;
  height: 300px;
  background: #F9F5E7;
}
#sidebar {
  float: right;
  width: 200px;
  height: 300px;
  background: #CFFAAB;
}
#footer {
  height: 40px;
  background: #7FC4BF;
}
floatと親ボックスの「高さ」