<html lang="ja">
<head>
<meta charset="utf-8">
<title>ペンギンカフェ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body id="home">
<div id="container">
<div id="header">
<h1><a href=""><img src="img/logo.png" alt="ペンギンカフェ"></a></h1>
<p class="billboard"><img src="img/billboard.png" alt="カフェイメージ"></p>
<ul>
<li class="first this"><a href="">ホーム</a></li>
<li><a href="food/index.html">カフェフード</a></li>
<li><a href="drink/index.html">カフェドリンク</a></li>
<li><a href="info/index.html">インフォメーション</a></li>
<li><a href="contact/index.html">お問い合わせ</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">「ホーム」#content内容が入る</div>
<div id="sidebar">「ホーム」#sidebar内容が入る</div>
</div>
</div>
<div id="footer">@penguin café</div>
</body>
</html>
@charset "utf-8";
html, body, div, h1, p, ul, li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: none;
vertical-align: bottom;
}
body {
font-size: 16px;
background: #CCC;
overflow: scroll;
}
body#food {
background: #EBDEA0;
}
body#drink {
background: #BCEC8C;
}
body#info {
background: #B1DCDC;
}
body#contact {
background: #E8C8EC;
}
#container {
width: 800px;
margin: 0 auto;
padding: 20px;
background: #FFF;
box-shadow: 0 0 10px #666;
}
#header {
position: relative;
left: 0;
top: 0;
margin-bottom: 30px;
padding-top: 200px;
}
#header h1 {
position: absolute;
left: 30px;
top: 0;
}
#header p.billboard img {
border-radius: 20px;
margin-top: -140px;
}
#header ul {
overflow: hidden;
}
#header li {
float: left;
width: 160px;
height: 50px;
text-align: center;
}
#header li a {
display: block;
line-height: 45px;
color: #444;
border-right: 1px solid #CCC;
}
#header li.first a {
border-left: 1px solid #CCC;
}
#header li a:hover {
border-bottom: 5px solid #A3D64D;
}
#header li.this a {
border-bottom: 5px solid #A3D64D;
}
#wrapper {
overflow: hidden;
}
#content {
float: right;
width: 500px;
height: 200px;
}
#sidebar {
float: left;
width: 270px;
height: 200px;
}
#footer {
width: 100%;
padding: 20px 0 50px 0;
text-align: center;
background: #999;
color: #FFF;
}
