ページ・レイアウトにもCSSを使って製作

各ページのレイアウトは下記のように設定されています。



上記の設定に対して外部ファイルの「2_column.css」は下記のように定義しています。

#outline {
　BORDER-RIGHT: #000000 0px solid;
　BORDER-TOP: #000000 0px solid;
　BORDER-LEFT: #000000 0px solid; WIDTH: 762px;
　BORDER-BOTTOM: #000000 0px solid; TEXT-ALIGN: left
}

margin {
　MARGIN: 0px 10px
}

.header {
　BACKGROUND: #ffffff; TEXT-ALIGN: center
}

.side {
　BACKGROUND: #ffffff; FLOAT: left; WIDTH: 166px
}

.main {
　BACKGROUND: #ffffff; FLOAT: right; WIDTH: 470px
}

.c-both {
　CLEAR: both
}

.footer {
BACKGROUND: #ffffff; TEXT-ALIGN: center
}

つまり、各ページは2カラムのページであると定義されますが、ヘッダー、コンテンツ、ナビゲーション、フッターの幅の大きさ、背景色、基礎となる配置は「2_column.css」の1枚のファイルで定義されることになります。