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解除の設定を行う必要があります


float基本型

  • 浮き上がらせて、左右に移動させる
囲み（親要素）の左右の端まで移動
  • HTMLの記述は、「#primary」と「#secondary」を「#wrapper」で囲んでいる
  • 「#wrapper」幅が、レイアウト幅になる
  • 「#wrapper」幅とfloatした要素の幅の残りがレイアウトの空きに見える
  • コンテンツ内容は、「#primary」→「#secondary」の順に認識される（左→右）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボックスの幅と位置を指定する</title>
<style>
#wrapper {
  width: 760px; /* レイアウト全体の幅を指定 */
}
#primary {
  float: left; /* ボックスを左寄せに指定 */
  width: 550px; /* ボックスの幅を指定 */
  height: 300px; /* ボックスの高さを指定 */
  background-color: #C7D5ED;
}
#secondary {
  float: right; /* ボックスを右寄せに指定 */
  width: 200px; /* ボックスの幅を指定 */
  height: 300px; /* ボックスの高さを指定 */
  background-color: #F9CFBA;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div><!-- /#wrapper -->
</body>
</html>


左右の配置を入れ替えヘッダーを追加
  • レイアウトの空きは、ボックスモデルの下部を空ける（margin-bottom）
  • コンテンツ内容は、「#primary」→「#secondary」の順に認識される（右→左）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>左右の配置を入れ替えヘッダーを追加する</title>
<style>
#container {
  width: 760px;
}
#header {
  background-color: #DDD;
  height: 50px;
  margin-bottom: 10px; /* 下方向のマージンを指定 */
}
#wrapper {
  overflow: hidden;
}
#primary {
  float: right; /* ボックスを右寄せに変更 */
  width: 550px;
  height: 300px;
  background-color: #C7D5ED;
}
#secondary {
  float: left; /* ボックスを左寄せに変更 */
  width: 200px;
  height: 300px;
  background-color: #F9CFBA;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div><!-- /#wrapper -->
</div><!-- /#container -->
</body>
</html>


フッターを配置して回り込みを解除
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フッターを配置して回り込みを解除する</title>
<style>
#container {
  width: 760px;
}
#header {
  background-color: #DDD;
  height: 50px;
  margin-bottom: 10px; /* 下方向のマージンを指定 */
}
#wrapper {
  overflow: hidden;
  margin-bottom: 10px; /* 下方向のマージンを指定 */
}
#primary {
  float: right;
  width: 550px;
  height: 300px;
  margin-bottom: 10px; /* 下方向のマージンを指定 */
  background-color: #C7D5ED;
}
#secondary {
  float: left;
  width: 200px;
  height: 300px;
  margin-bottom: 10px; /* 下方向のマージンを指定 */
  background-color: #F9CFBA;
}
#footer {
  /* clear: both; 寄せを解除 */
  background-color: #DDD;
  height: 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div><!-- /#wrapper -->
<div id="footer"></div>
</div><!-- /#container -->
</body>
</html>