　実践演習課題11 - イチから学ぶWeb制作

演習課題H11
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Cafe de la plante</title>
<link rel="stylesheet" href="H11.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Cafe' de la plante</h1>

<p>サブタイトルサブタイトルサブタイトル</p>
</div><!-- /header -->
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="#">トップページ</a></li>
<li><a href="#">カフェについて</a></li>
<li><a href="#">本日のおすすめ</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div><!-- /nav -->
<div id="content">
<h2>コンテンツのタイトル</h2>

<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p><br>
<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
<p class="photo">
<img src="img/photo200.jpg" width="200" height="300" alt="sea"></p>
</div><!-- /content -->
</div><!-- /wrapper -->
<div id="footer">
<p><small>Copyright (c)2013 AUTHOR NAME, All Rights Reserved.</small></p>
</div><!-- /footer -->
</div><!-- /container -->
</body>
</html>

CSS

@charset "utf-8";


/*リセット*/
body,div,p,h,img,ul,li{
  margin:0;
  padding:0;
}
ul{
  list-style-type:none;
}
a{
  text-decoration:none;
}


/*全体*/
body{
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height:1.5;
}

#container{
  margin:0 auto;
  width:800px;
  height:auto;
  background:url(img/plant_middle.jpg) repeat-y left;
}


/*ヘッダー*/
#header{
  width:800px;
  height:340px;
  background:url(img/plant_top.jpg) no-repeat left top;
  color:#FFFFFF;
  line-height:1.0;
}

#header h1{
  padding:40px 0 0 40px;
  font-family: 'Georgia';
}

#header p{
  padding-left:40px;
}


/*ナビ*/
#nav ul{
  width: 700px;
  height: 60px;
  margin: 40px 0 0 100px;
}
#nav li{
  float: left;
  padding-right: 25px;
}

#nav li a{
  color: #000000;
}

#nav li a:hover,#nav li a:active{
  color: #00FF00;
}

/*コンテンツ*/
#wrapper{
  width:800px;
  position: relative;
}

#content{
  width: 440px;
  height: 500px;
  padding-left: 60px;
}

#content h2{
  color: #FFFFFF;
  background: #000000;
  width: 430px;
  height: 40px;
  padding-left: 10px;
  line-height: 1.8;
}

.photo{
  position: absolute;
  right: 65px; top: 80px;
  
}

/*フッター*/
#footer{
  width:800px;
  height:100px;
  background:url(img/plant_bottom.jpg) no-repeat left bottom;
  color:#FFFFFF;
  text-align:center;
  border-bottom:#000000 30px solid;
  clear: both;
}
#footer p{
  padding-top:90px;
}

↓