なら@はてなブログ

福岡で働くスマートフォンエンジニア(おっさん)のブログ。更新頻度がとにかく低いのが悩み。

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