スタイルシートの修正

<< 前のページ 3カラムレイアウトの構成図

全ページで紹介した3カラムレイアウトのグループごとに、スタイルシートを作成します。
2カラムレイアウトで使用したスタイルシートを元に、太字部分を追加、修正します。

コンテナで全体の横幅を770pxとしています。
各グループも、横幅の合計が770pxになるよう、調整しています。

コンテンツ(450px)とサイドバー(160px)の合計が、ラップの横幅(610px)となります。
ラップの(610px)とサイドバー2(160px)の合計が、コンテナの横幅(770px)となります。

また、ラップでfloat:left;とし、左側に寄せる指定をしています。
サイドバー2では、float:right;とし、右側に寄せる指定をしています。

最後に、各グループを視覚で識別しやすくするよう、背景色を設定しています。

body {
text-align:center;
background-color:#eeffff;
}

/*コンテナ*/
#container {
width:770px;
text-align:left;
background-color:#ffffff;
border:solid 1px #000000;
}

/*ヘッダ*/
#header {
padding:30px;
background-color:#00ff00;
background-image:url(/image/title.jpg);
text-align:center;
}

#header h1 ,#header h2 {
color:#ffffff;
}

/*ラップ*/
#wrap {
float:left;
width:610px;
}

/*コンテンツ*/
#content {
float:right;
width:430px;
padding:10px;

background-color:#eeeeee;
}

/*サイドバー*/
#sidebar {
float:left;
width:140px;
padding:10px;

background-color:#ffeeff;
}

/*サイドバー2*/
#sidebar2 {
float:right;
width:140px;
padding:10px;

background-color:#eeffff;

}

/*フッタ*/
#footer {
clear: both;
width:750px;
padding:10px;

background-color:#3366ff;
text-align:center;
}

#footer p {
color:#ffffff;
}


次のページ >> メインページの修正

▲ページトップへ