レフトボックスにメニューを作成し終わったら、
つぎは、センターボックスに、ページの内容となる、
テキストや画像を入れてあげます。
それじゃあ、下のサンプルを見てから、作業をはじめてもらいたいです。
このページの文中のリンクは、すべて新しいウィンドウで開きます。
このページの完成サンプルはこちら >>
■センターボックスの定義内容
.center{
width: 405px;
padding: 0px 15px 0px 5px;
float: left;
}
このボックスの定義内容は、前と変化なしです。
そこで、まずこのボックスに、サンプルにもある、
下の画像を入れてください。
↓画像
で、
このカルボ氏のコメントと、プロフィール紹介みたいなテキストがありますよね？
これは、画像で作成してなくて、
直接テキストを書き込んでます。
つぎは、この書き込むスペースとなるボックスを定義してあげます。
■カルボ氏のコメントとプロフィールを紹介するボックスの定義内容
.comment{
width: 264px;
padding:0px 5px 0px 5px;
font-size: 10px;
float: left;
}
.prof{
width: 108px;
padding:0px 23px 0px 0px;
font-size: 9px;
float: left;
}
.kaijyo{
clear: left;
}
このコメントと、プロフィールを紹介するボックスは、段組してレイアウトします。
だから、２つのボックスに、
float: left;
と定義してあげます。
フォントサイズもそれぞれ定義してますので、わすれずに。
そして、段組するわけですから、
解除用のボックスも定義してあげないといけません。
「.kaijyo」に、
clear: left;
がそのためのボックスです。
これらを、定義したあと、以下のようにHTMLソースを記述します。
■HTMLソースの記述内容
<body>
<div class="base">
<div class="header"><img src="img/title.gif"><img src="img/usp.gif"></div>
<div class="left">
<div class="box-midashi"><img src="img/topix.gif"></div>
<div class="box-menu">
■<a href="#">東関東毒売協会会長の一日</a><br>
■<a href="#">はじめての毒売三段活用</a><br>
■<a href="#">７人の毒売</a><br>
■<a href="#">世界の毒売市場</a><br>
■<a href="#">本日の終値</a>
</div>
<div class="box-midashi"><img src="img/tango.gif"></div>
<div class="box-menu">
■<a href="#">毒売とは</a><br>
■<a href="#">毒舌とは一味違う毒売</a><br>
■<a href="#">会長挨拶</a><br>
■<a href="#">ニューヨーク・ムズムズ紙</a>
</div>
div class="box-midashi"><img src="img/kako.gif"></div>
<div class="box-menu">
■<a href="#">まさるへ</a><br>
■<a href="#">弟７回１級毒売士認定試験</a><br>
■<a href="#">さらなる高みへの挑戦</a><br>
■<a href="#">特定地域に広がる波紋</a>
</div>
</div>
<div class="center">
<img src="img/midashi.gif" width="382" height="231">
<div class="comment"> 「だって、だいたいみんなそうなんじゃないですか？・・・<br>
<br>
<br>
<br>
<br>
<br>
<br>
・・・・・
」
<br>
<br>
・・・そう言いはなち、氏は話を締めくくってくれた。氏との毒売論議のあと、あまりの感慨の深さにしばらく呆然としていたわたしであったが、ＪＲ新宿駅東口方面へと消えてくその背中から、いつまでも目を離せずにいたのを覚えている。（ビ）
</div>
<div class="prof">
カルボナーラ昌明
<br>
<br>
「タイミングの悪さ」という、<br>
時間毒（ジカンドク）を操る、<br>
カリスマ的なポインズンバイヤー。この写真も、「シャッターチャンスにピースサインが間に合わない」という、氏の底知れぬ実力を知らしめる結果となった。（ビ）
</div>
<div class="kaijyo"></div>
/*ここで「comment」「prof」の段組を解除してます*/
</div>
<div class="footer">
ここはフッターボックス。このボックスで、上のレフトとセンターの段組を解除してあげてます。
</div>
</div>
</body>
氏のコメントが中途半端ですが、
よかったら続きを書いてみてください。（笑）
コメント書いてくとわかると思うんですけど、
どんなにコメント書いてっても、
背景画像がちゃんと表示されてますよね？
最初のほうで、ベースボックスに定義した、
下の画像が、繰り返されているからです。
センターボックスは、ベースボックスにネストしてあるので、
センターボックスの内容が大きくなるたびに、ベースボックスも大きくなる、
という性質を利用して、
ベースボックスに繰り返しても平気な背景画像を定義したというわけです。
さあ、いよいよ大詰め。
あとは、フッターボックスの定義を完成させるだけです。
もうちっとだから、がんばってください。
