グループ分けとスタイルシート記述

<< 前のページ 完成画面の紹介

完成型の画面を参考に、各エリアを<div>タグでブループ分けします。
全体を囲むコンテナ、ヘッダ、コンテンツ、サイドバー、フッタの5種類を作成します。
(body全体のスタイルもここで定義します。)

グループ分け

以下のように、各グループをスタイルシートで定義します。

【body】
コンテナがブラウザの中心に位置するように、text-align:center;を指定し、ブラウザとの余白をmargin:20px;としています。

body {
text-align:center;
margin:20px;
}

【コンテナ】
全体の横幅を770pxとし、全体の枠の境界線の種類をsolid、太さを1px、色を#666666としています。

#container {
width:770px;
text-align:left;
border:solid 1px #666666;

}

【ヘッダ】
背景を:#0099FF、paddingで上部分だけに10pxの内余白を設定し、margin-bottomで下の外余白を0px指定します。
※例えば、padding 5px 10px 15px 20px;という記述があった場合、この意味は、上内余白5px、右内余白10px、下内余白15px、左内余白20pxです。↑→↓←という順になります。時計回りと覚えるといいでしょう。

#header {
background-color:#0099FF;
padding:10px 0 0 0;
margin-bottom:0px;
}

【コンテンツ】
コンテンツの横幅を550pxとし、float:leftで左側に位置するよう指定しています。
margin:10px 0;で上下に外余白10pxを指定しています。
※例えば、margin:10px 0;という記述があった場合、この意味は、上下の外余白10px、左右の外余白0です。上下、左右という順になります。

#content {
width:550px;
float:left;
margin:10px 0;
}

【サイドバー】
サイドバーの横幅を200pxとし、float:rightで右側に位置するよう指定しています。
外余白、背景、境界線の設定もしています。

#sidebar {
width:200px;
float:right;
margin:10px 5px;
background-color:#f8f8f8;
border:solid 1px #666666;
}

【フッタ】
回り込み解除のための、clear:both;、width:770px;(コンテナと同じ幅)を設定しています。
その他背景、余白、テキストの位置などのスタイルを定義しています。

#footer {
width:770px;
border-top:solid 1px #000000;
background-color:#0099FF;
margin-top:10px;
clear:both;
text-align:center;
padding:10px 0;
}

次のページ >> 文字部分のスタイルを定義

▲ページトップへ