3カラムレイアウトのメインコンテンツを作ります。

手順4　メインコンテンツを作る

次にメインコンテンツのボックスの両隣に左メニュー、右メニューのボックスがあるため横幅456pxのボックスの 両サイドの外側に 5px程度の適度な余白を入れます。 また、中央部分のボックスの横にライトボックスが並ぶため456pxのボックスに float:left;を指定します。

【ブラウザ表示】

<div id="middle">
<div class="middle1">ホームページの概要を紹介する文章をこの部分に記述します。
</div>
<h3 class="update">更新履歴</h3>
<div class="middle1" id="record">
2009/04/10 - TOPページを更新<br>
2009/04/08 - リンク集を更新<br>
2009/03/31 - TOPページを更新<br>
2009/03/28 - リンク集を追加<br>
2009/03/27 - サイトをリニューアル
</div>
<div class="middle1" id="mh">
この部分にコンテンツを埋めます。
<hr>
当サイトがおすすめするリンク集の一覧です。
<p>
・<a href="http://www.yahoo.co.jp/">Yahoo Japan!</a>
<a href="http://www.google.co.jp/">Google</a>
<a href="http://jp.msn.com/">MSN Japan</a>
<br>
・<a href="http://www.goo.ne.jp/">goo</a>
<a href="http://www.infoseek.co.jp/">Infoseek</a>
<a href="http://www.biglobe.ne.jp/">BIGLOBE</a>
<br>
・<a href="http://www.excite.co.jp/">Excite</a>
<a href="http://www.livedoor.com/">livedoor</a>
<a href="http://ask.jp/">Ask.jp</a>
</p>
</div>
</div>

div#middle{
line-height:1.2;
width:456px;
font-size:95%;
margin:0px 5px 0px;
float:left;
}
div.middle1{
border:1px solid silver;
margin-bottom:5px;
padding:5px;
}
h3.update{
font-size:100%;
color:green;
margin:0px;
background-color:#90EE90;
border-bottom:1px solid silver;
}
div#record{
height:100px;
overflow:scroll;
}
div#mh{height:217px;}

Follow @hp_master_2003

■ その他の項目

3カラムレイアウトの解説に戻る