3カラム・レイアウトのコーディングの手順
- 各段の幅を設定。
- float を指定して2段組にする。
- float したボックス内でさらに float を指定する。
HTMLのコーディング
id=”contents” の中に、id=”main”,”left-side”,”right-side” の div を記述する。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Page Title</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> <script src="main.js"></script> </head> <body> <div id="contents"> <div id="main"> <p>メインのカラムです。</p> </div> <div id="left-side"> <p>左サイドです。</p> </div> <div id="right-side"> <p>右サイドです。</p> </div> </div> </body> </html>
div#main と div#left-side を div 要素で囲む。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Page Title</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> <script src="main.js"></script> </head> <body> <div id="contents"> <div class="wrap-contents"> <div id="main"> <p>メインのカラムです。</p> </div> <div id="left-side"> <p>左サイドです。</p> </div> </div> <div id="right-side"> <p>右サイドです。</p> </div> </div> </body> </html>
CSS のコーディング
まず、各ボックスの位置がわかりやすいように、背景に色を付ける。
@charset "utf-8"; #main { background-color: red; } #left-side { background-color: green; } #right-side { background-color: blue; }
要素の幅を設定する。
@charset "utf-8"; .wrap-contents { width: 750px; } #main { background-color: red; width: 500px; } #left-side { background-color: green; width: 200px; } #right-side { background-color: blue; width: 160px; }
#main を500px、左サイドを200px、右サイドを160pxとし、要素間の間隔を50pxとする。
div.wrap-contents は、
#main:500px + #left-side:200px + 間隔:50px = 750px
となる。
float 属性を設定する。
div.wrap-contents に、float: left; div#right-side に、float: right; を設定する。
@charset "utf-8"; .wrap-contents { float: left; width: 750px; } #main { background-color: red; width: 500px; } #left-side { background-color: green; width: 200px; } #right-side { background-color: blue; float: right; width: 160px; }
float された要素は浮いてしまうため、親要素は子要素の高さを算出できなくなり、div#contents の高さが0になり、その下の要素が入り込んでしまう。
そのため、親要素(div#contents)に、overflow:hidden; を記述する。
IE 6/7 は、overflow:hidden; に対応していないため、IE 独自属性 zoom 属性を設定する。
width は、
div.wrap-contents 750px + div#right-side 160px + 要素間の間隔 40px = 950 px
を設定する。
#contents { overflow: hidden; zoom: 1; width: 950px; margin: 20px auto 0; }
overflow:hidden;
fioat を解除できる clearfix に比べ、指定する属性が少なく、気軽に使える。
ただし、ボックスからあふれる部分を隠すため、ボックスからはみ出る表現やドロップシャドウ、印刷が想定される場合には問題が生じやすいため、ケースバイケースで使い分ける必要がある。
div.wrap-contents 内を、float 属性で2段組にする。
#main { background-color: red; float: right; width: 500px; } #left-side { background-color: green; float: left; width: 200px; }
完成。
3段組を実現する手法には、ほかに様々なものがある。