トップページ:メイン作成

トップページ:ヘッダー作成」の次はトップページ中央のメイン部分作成です。回り込みにより中央、左サイド、右サイドを作っています。

トップページメインのスタイルシート作成

 「デザイン」で考えたレイアウトで以下のメイン部分を作っていきます。

トップページ:メイン作成1

 スタイルシートでは以下を追加します。

【トップページメインのスタイルシート記述例】
#centerleft {
width: 638px;
margin: 0px 10px 10px 10px;
float: left;
}

#center {
width: 468px;
float: right;
}

#left {
width: 160px;
}

#right {
margin: 0px 10px 10px 0px;
width: 250px;
float: right;
}

.clear {
clear:both;
}

 centerleftは以下のボックスを作る定義です。

トップページ:メイン作成2

 つまり中央と左サイドをまとめたボックスを作り、floatで左寄せする事で右サイドは右に表示されるようにします。

 centerleftは最初に#が付いているため独自定義で好きな名前で定義出来ます。width: 638px;は全体の幅です。左サイドバーが160px、中央が468px、中央と左サイドバーとの間に10pxの余白を設けるため、合計で638pxになります。

 又、marginで右サイドバー、下に位置するフッター、左側の背景との余白をそれぞれ10pxで指定しています。

トップページ:メイン作成3

 centerは中央の部分です。デザイン通り幅468pxを指定し、右に回り込む事で左サイドバーを左に配置しています。

 leftは左サイドバーですが、デザイン通り幅160pxを指定しています。

 rightは右サイドバーで、デザイン通り幅250pxを指定し、marginにより右側の背景との余白、下に位置するフッターとの余白をそれぞれ10pxで指定しています。

トップページ:メイン作成4

 .clearは回り込み解除のためのルールです。回り込みについて詳しく知りたい方は「スタイルシートの基本」の「回り込み」をご参照下さい。

 又、独自定義の名前は説明の分かり易さからcenter、left等付けています。最初はこの方が分かり易いと思いますが、将来左サイドバーではなく右に配置する等見栄えを変更する可能性がある場合はその時の事も考慮して名前を付ける事をお奨めします。

トップページメインのhtml作成

 htmlではスタイルシートで定義したcenterleft、center、left、right等をこれまでのhtmlに追加でボックスとして配置して行きます。配置イメージはcenterleftを配置してその中にcenterとleftを配置、centerleftを閉じた後にrightを配置します。

【トップページメインへの箱の配置のhtml記述例】
<div id="centerleft">

<div id="center">
中央
</div>

<div id="left">
左サイドバー
</div>
</div>

<div id="right">
右サイドバー
</div>
<div class="clear"></div>

 順番にボックスを配置しているだけです。最後の<div class="clear"></div>で回り込みを解除するのを忘れないようにして下さい。又、上記追加は</body>の前で</div>でpageを閉じる前に行って下さい。

ここまでの作成結果

 ここまでのスタイルシートとhtmlをコピーしてこれまでのスタイルシートとhtmlに張り付けて保存し、ブラウザで表示すると以下のようになります。

トップページ:メイン作成5

 上記は実際のサイズを縦横半分にしています。

前のページトップページ:ヘッダー作成」    次のページトップページ:フッター作成

  • このエントリーをはてなブックマークに追加