floatを使ったレイアウト
CSSレイアウト
idセレクタの前に「div」を書くのか書かないのか。
迷います。
正しくは「div」を書くことが基本です。
ただし、半角スペースと違い文字は無視されるわけではないので「データ量」として加算されます。
少しでも軽くしてレスポンスを早くしたいという理由から、現在では省略している場合がほとんどです。
floatプロパティを使ったレイアウト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>floatを使ったレイアウト</title> <link rel="stylesheet" href="css/style.css" media="screen, print"> </head> <body> <div id="container"> <div id="header">header</div> <div id="content">content</div> <div id="sidebar">sidebar</div> <div id="footer">footer</div> </div> </body> </html>
@charset "utf-8"; html, body, div { margin: 0; padding: 0; } body { background-color: #ccc; text-align: center; /* IE6対策 */ } #container { width: 780px; margin: 0 auto; padding: 10px; background-color: #fff; overflow: hidden; } #header { height: 50px; margin-bottom: 10px; background-color: #c2fcfb; } #content { float: left; width: 500px; height: 300px; margin-bottom: 10px; background-color: #f8febc; } #sidebar { float: right; width: 270px; height: 300px; background-color: #fecaff; } #footer { clear: both; height: 50px; background-color: #dcdbfd; }
左右にフロート指定
同じ方向にフロート指定
フロートとマージン指定
floatと親ボックスの「高さ」
これ以外の方法もあるのですが、この時点ではこの方法を指定します。
段組レイアウトの注意点
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 も指定しない
- フロートのコンテナブロックには幅を指定する
