スタイルシートでカラー調整とレイアウト変更
＜＜ 前のページ 検索結果ページ作成
前回までで実践2カラムサイト作成は終了しましたが、ここでは、スタイルシートで定義した各カラー、floatを変更して、サイトの見栄えを変更してみます。色の変更だけでサイトのイメージが変わりますので、作成するサイトの内容にあった色を見つけて見ましょう。（ここでは数例だけ挙げますが、もちろん何種類ものカラーパターンを使って表現することができます。）
【緑を基調としたデザイン】
【赤を基調としたデザイン】
【赤を基調としたデザイン（コンテンツとサイドバー逆転）】
【スタイルシートのソース】
body {
text-align:center;
margin:20px;
}
#container {
width:770px;
text-align:left;
border:solid 1px #666666;
}
#header {
background-color:#990000;
padding:10px 0 0 0;
margin-bottom:0px;
}
#header h1 {
font-size:28px;
color:#000000;
padding:0 10px;
}
#header p {
font-size:12px;
padding:3px 10px;
background-color:#ffffff;
border-top:solid 1px #000000;
border-bottom:solid 1px #000000;
}
#content {
width:550px;
float:right;
margin:10px 0;
}
#content h2 {
font-size:16px;
border-left:solid 10px #990000;
border-bottom:solid 1px #990000;
background-color:#eeeeee;
padding:4px 5px;
margin:10px 10px;
color:#000000;
}
#content p {
font-size:12px;
margin:10px 10px;
line-height:18px;
}
#sidebar {
width:200px;
float:left;
margin:10px 5px;
background-color:#f8f8f8;
border:solid 1px #666666;
}
#sidebar form {
padding: 0 10px;
}
#sidebar h3 {
font-size:16px;
border-left:solid 10px #990000;
border-bottom:solid 1px #990000;
background-color:#eeeeee;
padding:3px 5px;
margin:10px 10px;
color:#000000;
}
#sidebar ul{
margin:0 10px;
padding:0;
}
#sidebar li{
margin-left:18px;
font-size:12px;
line-height:15px;
padding:5px 0;
}
#footer {
width:770px;
border-top:solid 1px #000000;
background-color:#990000;
margin-top:10px;
clear:both;
text-align:center;
padding:10px 0;
}
#footer p {
font-size:12px;
color:#000000;
}
#footer a {
color:#000000;
}
#footer a:hover {
color:#990000;
}
次のページ ＞＞ 画像を使用する
