html
<!doctype html>
<html lang=ja"">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="style.css">
</head><body>
<div id="logo">logo</div>
<div id="header">header</div><div id="nav">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div><!--navigation--><div id="wrapper">
<div id="main">main</div>
<div id="side"></div>
</div><!--wrapper--><div id="footer">footer</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
html, body, div ,ul , li{
margin: 0;
padding: 0;
line-height: 1.0
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
body{
background: #777777;
}
ul, li{
list-style-type: none;
}
a{
text-decoration: none;
}
/*reset--------------------------------------------------------------------------
*/#logo{
background: #C7474A;
width: 75px;
height: 75px;
margin: 8px auto 16px auto;
}
#header{
background:#4747C7;
width: 960px;
height: 200px;
margin: 0 auto 16px auto;
text-align: center;/*rwdの効果を見やすくするための指定*/
}
#nav{
background: #C747C7;
}
#nav ul{
width: 960px;
margin: 0 auto 16px auto;
overflow: hidden;/*ナビゲーション全体のレイアウトに関わる部分*/
}
#nav li{
width: 240px;
height : 50px;
float: left;/*ナビゲーションのボックスに関わる部分*/
}
#nav li a{
display: block;
line-height: 50px;
text-align: center;
color : #ffffff;;
font-weight:bold;
border-left: 2px solid #ffffff;/*ボックスの中身、主に文字についての部分*/
}
#nav li:first-child a{
border-left: none;
}/*header-----------------------------------------------------------------------------
*/#wrapper{
width: 960px;
overflow: hidden;
margin: 0 auto 16px auto;
}
#main{
width: 600px;
height :400px;
float: left;
background: #47C7C7;
text-align: center;/*rwdの効果を見やすくするための指定*/
}
#side{
width: 340px;
height: 400px;
float: right;
background: #409F3E;
text-align: center;/*rwdの効果を見やすくするための指定*/
}
/*content-------------------------------------------------------------------------------
*/
#footer{
background: #C7A747;
text-align: center;
line-height: 100px;
}
