このページでは、センター、レフト、フッターボックスを定義して、
段組を完成させます。
それぞれのボックスの細かい定義は、
このページ以降に順をおって解説していきますね。
このページの文中のリンクは、すべて新しいウィンドウで開きます。
このページの完成サンプルはこちら >>
■センターボックスの定義内容
.center
width: 479px;
float: right;
}
まず初めに、センターボックスを上のように定義します。
横幅指定のwidth属性は、デザイン上わたしが決めた値なので、特に意味はありません。
ここで注目してほしいのは、
回りこみ指定の
float属性。
値に、
rightと定義されています。
この意味は、「
センターボックスを右端に配置し、つづく要素を自分の左側に回りこませる」ということ。
参考→<DIV>をヨコに段組していこう（ページ下部）
かんたんに言えば、今までは、左側に詰めながら段組してたのを、
逆の右側にボックスを詰めていきながら、段組している、という感じです。
ふつうの<table>タグだと、こんなことは絶対できませんよね。
左から右、っていう流れが鉄則ですすので。
こんなふうにスタイルシートをつかうと面白いことや、
お得なことができるようになるので、がんばって使いこなせるようになりましょう。
■レフトボックスの定義
.left
{
width: 219px;
float: right;
}
横幅は、これまたデザイン上の都合です。
で、このレフトボックスと、さっき定義したセンターボックスを、
ヨコに段組していくので、これも当然、
float: right
と定義します。
■フッターボックスの定義内容
.footer{
clear: both;
}
このフッターボックスで、レフト、センターでおこなった
段組を解除してあげます。
その解除を指令する、clear属性ですが、
今回は、左右どちらの段組も解除する、という意味を持つbothを使用。
rightでもＯＫですが、こっちの方が、いろんな場面で使いまわしできるので、
便利だと思います。
そして、このように定義した３つのボックスを、
下のように書き込んであげてください。
HTMLソース（<body>〜</body>）
<body>
<div class="base">
<div class="header"><img src="タイトルロゴの画像までのパス"></div>
<div class="center">ここはセンターボックス</div>
<div class="left">ここにレフトボックスがあります</div>
<div class="footer">フッターボックスで、上の２つのボックスの段組を解除してあげてます。</div>
</div>
</body>
赤いテキスト部分が、あらたに書き込む部分です。
さて、骨組みも作り終わったところで、
次はセンターボックスの細かいところを、スタイルシートで定義してみましょう。
