実践演習課題H05C05

課題 
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>H05C05</title>
<link rel="stylesheet" href="css/H05C05.css" media="all">
</head>
<body>
<div id="container">
<div id="header">
<h1>provence</h1>
</div>
<div id="wrapper">
<div id="content">
<p><img src="img/05/illust.gif" alt="" width="250" height="196">
プロヴァンス（la Provence）は、フランス革命以前のフランスに置かれていた州のひとつであり、フランスの南東部に位置する。フランス王国併合前（15世紀末）にあった独立国（プロヴァンス伯爵領）の名前でもある。「プロヴァンス」の名称は、古代ローマ時代の属州（プロウィンキア、Provincia）であったことにちなみ、プロヴァンス語で"Provenco"や"Provenca"などとも呼ぶ。プロヴァンスの名は現在でも特に観光上の観点から親しまれている。
地域の区分としては、ローヌ川の左岸（東岸）とヴァール川の右岸とデュランス川の南側で区切られた一帯であり、現在の地域圏でいえばプロヴァンス＝アルプ＝コート・ダジュール地域圏の大部分に当たる。
</p>
</div>
<div id="nav">
<ul>
<li id="home"><a href="#"><span>Home</span></a></li>
<li id="about"><a href="#"><span>About</span></a></li>
<li id="product"><a href="#"><span>Product</span></a></li>
<li id="shop"><a href="#"><span>Shop</span></a></li>
<li id="access"><a href="#"><span>Access</span></a></li>
<li id="contact"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
</div>
<div id="footer">
<p><small>&copy;provence</small></p>
</div>
</div>
</body>
</html>

@charset "UTF-8";
/* CSS Document */
body, div, h1, p, ul, li, img{
  margin: 0;
  padding: 0;
}
body{
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #696969;
}
#container{
  width: 700px;
  margin: 20px auto;
}
#header{
  width: 700px;
  height: 120px;
  background-image: url(../img/05/header.gif);
  background-repeat: no-repeat;
  margin-bottom: 20px;
}
#wrapper{
  width: 700px;
  overflow: hidden;
  margin-bottom: 20px;
}
#content{
  width: 480px;
  float:right;
}
#nav{
  width: 200px;
}
#footer{
  clear: both;
  width: 700px;
  height: 60px;
  background-image: url(../img/05/footer.gif);
}
h1 {
  padding: 40px 0 0 20px;
 color: #FFFFFF;
  font-family:
    Georgia, 
    "Times New Roman", 
    Times, 
    serif;
}
img{
  float: right;
  margin-left: 10px;
}
ul {
  list-style: none;
}
li {
  margin-bottom: 10px;
}
span {
  visibility: hidden;
}
a {
  width: 200px;
  height: 50px;
  text-decoration: none;
  display: block;
}
li#home{
  background:url(../img/05/nav_bg001.gif) no-repeat;
}
li#about{
  background:url(../img/05/nav_bg002.gif) no-repeat;
  }
li#product{
  background:url(../img/05/nav_bg003.gif) no-repeat;
}
li#shop{
  background:url(../img/05/nav_bg004.gif) no-repeat;
}
li#access{
  background:url(../img/05/nav_bg005.gif) no-repeat;
}
li#contact{
  background:url(../img/05/nav_bg006.gif) no-repeat;
}
#footer p{
  text-align: center;
  color: #ffffff;
  padding: 20px 0 0 0;
}