web関係、制作関係でのよしなしごとを書いています。
2012/8/20 初稿
CSSでレイアウトするときに必須なのがfloatを使ったレイアウトです。しかし初めのうちはpositionとともに仕組みがわかりにくいプロパティの一つです。
そこでfloatの厳密な原理というよりは、レイアウトに使うときの感覚としてこう覚えておけば苦労はしないということを基準に解説します。厳密な原理についてはW3Sの9.5.1 浮動体の配置: 'float'プロパティ(日本語訳ページ)をご覧ください。
まずはfloatの主に使用するときの例を2つ解説します。
floatとは文字通りほかのレイアウトから浮かすことで、後続の要素は浮くことによって空いたスペースの上まで、右または左に詰まります。これにより雑誌などのように画像にテキストが回り込んだようなレイアウトになります。
通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP
通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP
このDivにfloat:right;を指定すると、floatを使った右寄せの状態になります。leftを指定すれば左寄せの状態になります。
通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP
通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP
<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>
.float{
float:right;
width:200px;
height:100px;
background: #999;
}
p{
background: #bbb;
margin-bottom:1em;
}
雑誌のような文字と画像でだけではなく枠組みのレイアウトに使うことにより2カラムや3カラムなどのレイアウトにすることができます。
<div class="float">floatされたDiv</div>
<div class="float">floatされたDiv</div>
<div class="float">floatされたDiv</div>
.float{
float:left;
width:200px;
height:100px;
margin-right:20px;
background: #999;
}
そして、floatを使うときに注意することは、幅の計算をきちんとすること、float含む親要素に高さの影響をあたえないこと、適切な場所でclearすることの3点です。
1点目は、幅の計算をきちんとするということです。
左右に並べて2カラムを作ったりするときに幅のピクセル数を正確に計算することは当たり前のことですが、計算ミスなどにより親要素の幅を1pxでも超えてしまうとfloat落ち、カラム落ちなどと呼ばれるレイアウトの崩れが発生します。
下の例では親要素が600pxのところを子要素が300px+301px=601pxになっているために横並びにならずに縦並びになっています。親要素の幅を超えてしまわないようにしましょう。
親要素Div 幅600px
<div>
<div class="float1">floatされたDiv 幅300px</div>
<div class="float2">floatされたDiv 幅301px</div>
</div>
.wrap{
width:600px;
padding:20px;
background: #bbb;
}
.float1{
float:left;
width:300px;
height:100px;
background: #999;
}
.float2{
float:left;
width:301px;
height:100px;
background: #888;
}
2点目は、高さの影響をあたえないことです。
先ほども解説したようにほかの要素から浮いて切り離された状態になります。しかしposition:absolute;のみのように完全に切り離されるわけではなく、インライン要素に対して幅と高さを確保しつつもブロック要素の高さの計算には影響をあたえないということです。これにより雑誌のようなレイアウトにすることができまが、この関係でfloatさせた要素の方が高さがある場合に背景が切れたように見えます。
親要素Div
通常のP
通常のP
<div>
<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>
</div>
.wrap{
padding:20px;
background: #bbb;
}
.float{
float:left;
width:300px;
height:200px;
background: #999;
}
3点目は、適切な場所でclearするということです。厳密な原理についてはW3Sの9.5.2 浮動体に隣接するフローの制御: 'clear'プロパティ(日本語訳ページ)をご覧ください。
floatはclearするまで後続の要素に影響をあたえ続けます。その影響を止めるために、たいていの場合影響させたくないブロック要素にclear:bothを指定します。
先ほどのサンプルのPとPの間にclearを指定したDivをたしました。
これにより2番目のPはfloatの影響をうけなくなりました。それとともに親要素の中でclearした場合は高さの計算がclearした要素以降まで含まれるようになるため背景色が2番目のPまで続くようになりました。親要素の外でclearした場合は先ほどと同じように背景は切れたように見えたままになります。
親要素Div
通常のP
通常のP
<div>
<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>
</div>
<div class="clear">clear:both;を指定したDiv</div>
.wrap{
padding:20px;
background: #bbb;
}
.float{
float:left;
width:300px;
height:200px;
background: #999;
}
.clear{
clear:both;
background: #888;
}
このサンプルのように毎回親要素の中でclearできるとは限りません。しかし背景色はflatした要素の高さまで続いてほしいといった場合は多々あります。こういったときにclearfixと呼ばれるCSSのテクニックが必要になります。
検索でclearfixと入れるといろいろなパターンのコードが出てきますが 最近のブラウザを対象とする場合は以下のコードで不具合が出ることはありませんしIE6までにも対応しています。また、clearfixという名前は単なるクラス名ですので自由に変更することもできます。
.clearfix:after {
content:"";
display:block;
clear:both;
}
.clearfix{
/zoom:1;
}
親要素Div
通常のP
通常のP
<div class="clearfix">
<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>
</div>
このコードだけではなくoverflow: hidden;を使ったコードでも同じ効果をあたえることができます。しかしoverflow: hidden;を使うので一部がはみ出たようなデザインにする場合ははみ出た部分が消えてしまうので注意が必要です。
.clearfix{
overflow: hidden;
/zoom:1;
}
初めまして。そして、ようこそ!京都でwebデザイナー、htmlコーダーをやっているackyです。
このサイトはでイラストレーションギャラリーとCSSのテクニックを紹介しています。
イラストレーションでは、主にF1やスーパースポーツ、モータースポーツをテーマにトレース技法で描いています。イラストのポイントは直線で構成したソリッドでシャープな質感です。
CSSテクニック、webの小技ではweb制作の時にちょっと役に立つようなCSSテクニックや、positionのrelative、absoluteの使い方、リスト(li)の横並びや、リスト(li)横並びの中央寄せ、フォームのチェックボックスやラジオボタンとテキストのずれを揃える方法、Photoshopのチャンネルを使った髪の毛の切り抜き方法、お気に入りアイコン(ファビコン、webアイコン)の作り方などを紹介しています。
(このサイトについて何がありましたら左記のアドレスからご連絡をお願いします)