CSSでフレームっぽいレイアウト
最近、GAEで遊び始めたのです。
で、普段はMVCでいうところのMCしか作ってなくて、HTMLなんかもう5年以上さわってないので復習中。
HTML5は、まあいろいろ思い出しながら、並行して勉強すればいいかなあ?
で、今回もGoogle先生の助けを借りて実装。
左にメニュー、右にメイン、下にフッターが出るように分割してみます。
index.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSSで分割表示</title> <link rel="stylesheet" href="css/common.css" type="text/css" /> </head> <body> <div id="container"> <hr/> <div id="menu">メニューブロック</div> <div id="main">メインブロック</div> <div id="footer">フッターブロック</div> </div> </html>
で、それぞれのdiv要素に対するCSSはこんな感じ。
common.css
/* ブラウザ間の表示差異に対応するため、まず余白を全部0にするらしい */ * { margin: 0; padding: 0: } body div { text-align: left; margin: 0 auto; } /* CSSでフレーム分割(divタグのidで指定する) */ div#container { width: 800px; background-color: #E3E3E3; } div#menu { width: 200px; min-height: 400px; float: left; background-color: #FFFFFF; } div#main { width: 600px; min-height: 400px; float: left; background-color: #FFFFFF; } div#footer { width: 800px; height: 80px; background-color: #EEEEEE; clear: both; }
えーと、ポイントはfloat属性みたい。
で、これやると指定したdivブロックは文字通り“浮かんだ”状態になるので、親divからは子divの高さが取得できない。なので、そのままだとペチャンとなってしまうらしい。
それに対応するために、今回は#footerで、clear: both; とやってる。時間なくて自分で調べてないけど、とりあえずはそれでペチャンとならずにすむそうな。実際きちんと表示されてます。
やっぱフロント側もきちんと理解できてないとダメですねー。
今回の引用元は以下のサイト。多謝。
ADP: floatレイアウトでつまづかないためのTips