2014-09-17

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>ホーム | cafe</title>
<style>
/* reset */
html, body, div, h1, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
img {
  border: none;
  vertical-align: bottom;
}
a {
  text-decoration: none;
}
/* body */
body {
  background: #FFF;
  color: #333;
  font-size: 16px
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height: 1.5;
}
/* layout */
#container {
  width: 720px;
  border: 1px solid #AAA;
  border-radius: 8px;
  margin: 10px auto;
  padding: 20px;
}
#header {
  height: 150px;
  background: url(img/07.jpg) no-repeat;
  margin-bottom: 20px;
}
#header h1 {
  color: #FFF;
  font-size: 40px;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding: 100px 0 0 30px;
}
#wrapper {
  overflow: hidden;
  margin-bottom: 20px;
}
#content {
  width: 500px;
  height: 330px;
  float: right;
}
#sidebar {
  width: 200px;
  float: left;
}
#sidebar ul {
  border-top: 1px solid #AAA;
}
#sidebar li {
  line-height: 3em;
  border-bottom: 1px solid #AAA;
}
#sidebar li a {
  color: #666;
  display: block;
  padding-left: 1em;
}
#sidebar li a:hover {
  background: #E3EAF4;
}
#footer {
  padding-top: 10px;
  border-top: 1px solid #999;
}
</style>
</head>
<body>
<divid="container">
<divid="header">
<h1>Caf〓 Felica</h1>
</div><!-- /#header -->
<divid="wrapper">
<divid="content">
<p><imgsrc="img/mani01.jpg"alt=""></p>
</div><!-- /#content -->
<divid="sidebar">
<ul>
<li><ahref="index.html">ホーム</a></li>
<li><ahref="caf〓food/index.html">カフェフード</a></li>
<li><ahref="caf〓drink/index.html">カフェドリンク</a></li>
<li><ahref="info/index.html">インフォメーション</a></li>
<li><ahref="contact/index.html">お問い合わせ</a></li>
</ul>
</div><!-- /#sidebar -->
</div><!-- /#wrapper -->
<divid="footer">
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>
擬似クラスを使ったレイアウト
