2014-09-07 - matsunamima’s diary

CSSレイアウト

基本は、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プロパティを使ったレイアウト

サンプルサイト：Layout Gala

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>floatを使ったレイアウト</title>
<style>
　ここにCSSを記述
</style>
</head>
<body>
<divid="container">
<divid="header">#header</div>
<divid="nav">#nav</div>
<divid="wrapper">
<divid="content">#content</div>
<divid="sidebar">#sidebar</div>
</div><!-- /#wrapper -->
<divid="footer">#footer</div>
</div><!-- /#container -->
</body>
</html>

body,div {
  margin: 0;
  padding: 0;
}
body {
  background-color: #CCCCCC;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
#container {
  background-color: #FFFFFF;
  width: 740px;
  height: auto;
  margin: 0 auto;
  padding: 10px;
}
#header {
  background-color: #B1DAF0;
  height: 100px;
  margin-bottom: 10px;
}
#nav {
  background-color: #FFE3F1;
  height: 40px;
  margin-bottom: 10px;
}
#wrapper {
  background-color: #F3B2B3;
  width: 740px;
  height: auto;
  overflow: hidden;
  margin-bottom: 10px;
}
#content {
  background-color: #F9F5E7;
  width: 530px;
  height: 300px;
  float: left;
}
#sidebar {
  background-color: #CFFAAB;
  width: 200px;
  height: 300px;
  float: right;
}
#footer {
  clear: both;
  background-color: #7FC4BF;
  height: 40px;
}

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

これ以外の方法もあるのですが、この時点ではこの方法を指定します。

段組レイアウトの注意点

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

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のバグとその解決方法】