float とは
float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。要素はウェブページの通常のフローから外れますが、 (絶対位置指定 とは対照的に) フローの一部であり続けます。
これだけを読むと概念的で難しいですね……
でも、float を使って段組みをしたり文字を横に表示したり良く使われているテクニックですので、概念は置いておいて「どうのようにしたら、どうなるか」を経験的に覚えてしまうのも手です。
CSS floatの使い方
floatは段組みを使う時によく使う、CSSレイアウトの基本テクニックです。
ぱっと見は解りづらいですし、思った通りのことが出来ないことも良くあります。
自分で簡単なCSSレイアウトを組んでみて、体感して使うことが覚えてしまう早道です。
何も指定しない場合
<div>
<div style='background-color: red; width:100px;height:50px;'>テスト赤</div>
<div style='background-color: blue; width:100px;height:50px;'>テスト青</div>
<div style='background-color: green; width:100px;height:50px;'>テスト緑</div>
<div style='background-color: yellow; width:100px;height:50px;'>テスト黄色</div>
</div>
上のHTMLをそのまま記述すると、DIV要素がそのまま下方向に流れて下のように表示されます。
float:left指定すると
右に流して表示する場合に CSS で float:left を指定します。
<div>
<div style='background-color: red; width:100px;height:50px; float:left;'>テスト赤</div>
<div style='background-color: blue; width:100px;height:50px; float:left;'>テスト青</div>
<div style='background-color: green; width:100px;height:50px; float:left;'>テスト緑</div>
<div style='background-color: yellow; width:100px;height:50px; float:left;'>テスト黄色</div>
</div>
<div style="clear:both"></div>
float:left 指定をすると上のように、右方向に流れて表示されます。
FLOAT:RIGHT指定すると
左に流して表示する場合は CSS に float:right を指定します。
<div>
<div style='background-color: red; width:100px;height:50px; float:right;'>テスト赤</div>
<div style='background-color: blue; width:100px;height:50px; float:right;'>テスト青</div>
<div style='background-color: green; width:100px;height:50px; float:right;'>テスト緑</div>
<div style='background-color: yellow; width:100px;height:50px; float:right;'>テスト黄色</div>
</div>
<div style="clear:both"></div>
しかし、全体が右寄りになってしまっています。これを全体を左にしながら左に流すには、親の DIV要素を float:right; 指定します。
<div style='background-color: black; float:left;'>
<div style='background-color: red; width:100px;height:50px; float:right;'>テスト赤</div>
<div style='background-color: blue; width:100px;height:50px; float:right;'>テスト青</div>
<div style='background-color: green; width:100px;height:50px; float:right;'>テスト緑</div>
<div style='background-color: yellow; width:100px;height:50px; float:right;'>テスト黄色</div>
</div>
<div style="clear:both"></div>
良くある段組みの作り方
次に良くある段組みの作り方を紹介します。
これはテーブルなどで作ってその中に要素を書いていく手も有るのですが、DIV要素の段組みを使うことこのようになる例です。
<div style="width:400px; clear:both;">
<div style='background-color: red; width:200px; height:50px;'>ヘッダー</div>
<div style='background-color: blue; width:100px; height:100px; float:left;'>メイン</div>
<div style='background-color: green; width:100px; height:100px; float:left;'>右サイド</div>
<div style='background-color: yellow; width:200px; height:50px; clear:left;'>フッター</div>
</div>
<div style="clear:both"></div>
ちなみに、フッターをそのまま float:left にしたり何も指定しないと、簡単に段組みが崩れます。
しなみに clear:left を入れずに作るとこのようになります。分かりやすく表示するためにわざと黄色の領域を大きくしてはみ出させて表示しています。
下のサンプルコードで確認してみてください。
<div style="width:400px; clear:both;">
<div style='background-color: red; width:200px; height:50px;'>ヘッダー</div>
<div style='background-color: blue; width:100px; height:100px; float:left;'>メイン</div>
<div style='background-color: green; width:100px; height:100px; float:left;'>右サイド</div>
<div style='background-color: yellow; width:210px; height:150px;'>フッター</div>
</div>
<div style="clear:both"></div>
試行錯誤で試すとなんとなくわかってくると思いますので、最初は簡単な段組みから徐々に複雑な段組みへと挑戦してみてください。
ここまでがレイアウトの基本です。
複雑な段組みはこれらの応用ですので、まずは基本のレイアウトをしっかり把握しておきましょう。
以上、CSS floatの使い方の備忘録でした。
ピンバック: 画像の横に文字を表示するには | 開発備忘録＆ふと思ったこと