スタイルシートでカラー調整とレイアウト変更

<< 前のページ 検索結果ページ作成

前回までで実践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;
}


次のページ >> 画像を使用する

▲ページトップへ