96's blog

WEBサイト制作科 6ヶ月コース

実践演習課題H11C11

HTML

<!doctype html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>H11C11</title>
<linkrel="stylesheet"href="css/H11C11.css">
</head>
<body>
<divid="container">
<divid="header">
<h1>Caf&eacute; de la plante</h1>
<p>サブタイトルサブタイトルサブタイトル</p>
<divid="nav">
<ul>
<li><ahref="#">トップページ</a></li>
<li><ahref="#">カフェについて</a></li>
<li><ahref="#">本日のおすすめ</a></li>
<li><ahref="#">ブログ</a></li>
<li><ahref="#">お問い合わせ</a></li>
</ul>
</div><!-- /nav-->
</div><!--/header-->
<divid="content">
<divclass="section">
<h2>コンテンツのタイトル</h2>
<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
</div>
<imgsrc="img/11/photo200.jpg"width="200"height="300"alt="海">
</div><!--/content-->
<divid="footer">
<small>Copyright &copy;2013 AUTHOR NAME, All Rights Reserved.</small>
</div><!--/footer-->
</div><!-- /container-->
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */
body , div, h1, h2, p ,ul ,li {
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}

body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #333333;
  line-height: 1.5em;
}
#container{
  width: 800px;
  margin: 0 auto;
  background: url(../img/11/plant_middle.jpg) repeat-y;
}
#header{
  height:350px;
  background: url(../img/11/plant_top.jpg) no-repeat;
  padding: 50px 0 0 40px;
}
#nav{
  height: 50px;
  margin-top: 240px;
  text-align: center;
}
#content{
  overflow: hidden;
  padding:  0px 50px;
}
#footer{
  height: 40px;
  padding-top: 80px;
  background: #000000 url(../img/11/plant_bottom.jpg) no-repeat;
  text-align: center;
  clear: both;
}
h1{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 30px;
  color: #ffffff;
  margin-bottom:10px;
}
h1 a{
  color:#ffffff;
}
#header p{
  color:#ffffff;
  letter-spacing: 1px;
}
ul{
  list-style:none;
  padding: 8px 10px;
}
li {
  display: inline;
  margin: 5px;
}
li a{
  color: #333333;
  font-size: 14px;
}
li a:hover{
  color: #ffc87a;
}
h2{
  background: #000000;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.8;
  padding-left: 10px;
  margin-bottom: 20px;
}
p{
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.2px;
  margin-bottom: 20px;
}
.section{
  width: 445px;
  margin: 0px 5px 30px 10px;
  float:left;
}
img{
  width: 200px;
  margin: 0px 10px 30px 10px;
  float:right;
}
small{
  font-size: 10px;
  color: #ffffff;
}

f:id:webtm2013:20130825215744p:image