Web制作実験floatで段組：固定幅(px指定)＋可変幅(幅指定なし)
公開：2015-03-11
更新：
CSSのfloatプロパティを使って2段組みレイアウトを作ります。固定幅(px指定)＋可変幅(幅指定なし)の組み合わせでの実際の動作の様子です。
レスポンシブデザインの基本となります。
基本形（回り込み）
2つのboxを用意し、boxAのみにwidthで幅を固定、floatを指定します。
1 2 3 4 5 6 | <div class="boxA"> （内容）</div><div class="boxB"> （内容）</div> |
1 2 3 4 5 6 7 8 9 | .boxA { border: 10px solid red; width: 100px; float: left;}.boxB { border: 10px solid blue;} |
PCでウィンドウの横幅を変化させると、boxAは幅固定のままで、boxBは幅と高さが伸縮しました。
また、boxBの内容（Bの文字）がboxAを避けるように回り込みしています。
実際の様子
- 各boxの中の内容は<P>タグで適当に文字を入れています。
- 見やすくするためにCSSは上記以外に多少の装飾をしています。
- HTMLとCSSで上記以外にfloat（段組み）の解除処理をしています。ここでは説明を省きますが詳しくはこちら→ floatの解除。）
overflow:hiddenで2段組
boxBにoverflow:hiddenを指定してみます。
7 8 9 10 | .boxB { border: 10px solid blue; overflow: hidden;} |
boxBの文字はboxAに下にこなくなり、左右に分割しました。
実際の様子
margin-leftで2段組
上記のoverflow:hiddenの替わりにmargin-leftを指定してみます。値は
- boxAの幅（width）＝100px
- 枠線border左右分＝10 x 2 = 20px
を足した120pxです。
7 8 9 10 | .boxB { border: 10px solid blue; margin-left: 120px;} |
これでも上記のoverflow:hiddenの場合と同じ結果となりました。
実際の様子
固定幅+可変幅のまとめ
少しややこしいので表にしてみました。
| box | A（左=赤） | B（右=青） |
|---|---|---|
| float | 有り | 無し |
| 幅指定 | px指定（固定幅） | 無し（可変幅） |
回り込み
画像の周りに説明文などにいいです。
左右に分けた以下は共に段組みとして、片側にメニュー・もう片側にコンテンツで、画面幅に合わせて折り返したい場合に使われます。
overflow:hidden
- 固定側の横幅があらかじめわからなくても可能。
- 中の要素が大きくても横スクロールバーが出なくなる。（※）
margin-left
- 固定側の横幅があらかじめわかっている場合に限られる。
- 横スクロールバーの制御は別途overflowの指定で可能。（※）
という使い方が向いているようです。
※はこの記事では触れませんが、いずれ機会があれば別の記事で書いてみたいと思います。