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

演習課題H09
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エコロジー</title>
<link rel="stylesheet" href="h09.css">
</head>

<body>
<div id="container">
<div id="header">
<div id="sidebar">
<h1>Computer Technology Groups</h1>
<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><!--/sidebar-->
</div><!--/header-->
<div id="content">
<h2 class="eco"><img src="img/ecology.gif" width="201" height="24" alt="エコロジー"></h2>
<h2><img src="img/mark.gif" width="20" height="20" alt="矢印">エコロジーへの取り組み</h2>

<p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
<p>地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。</p>
<h2><img src="img/mark.gif" width="20" height="20" alt="矢印">商品のラインナップ</h2>

<p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
</div><!--/content-->
<div id="footer">
<p><small>Copyright(C) <span>Computer Technology Groups.</span> All rights reserved.</small></p>
 </div><!--/footer-->
 </div><!--/container-->
</body>
</html>

CSS

@charset "utf-8";


/* リセット */
body,div,h,p,ul,li{
  margin: 0;
  padding: 0;
}

ul{
  list-style:none;
}

a{
  text-decoration:none;
}

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


#container{
  margin:0 auto;
  width: 600px;
  height:auto;
}

/*ヘッダー*/
#header{
  width:600px;
  background: url(./img/logo.gif) no-repeat left top;
}

h1{
 font-family:
    Georgia,
    "Times New Roman",
     Times, serif;
     color: #4C904E;
  font-size: 18px;
  padding-left: 60px;
}
#header ul{
  margin: 50px 0 25px 0;
  border-top: 1px solid #4C904E;
  border-bottom: 1px solid #4C904E;
  padding: 10px 0;
}
#header li{
  display: inline;
  padding-left: 16px;
}

#header li a:link,#header li a:visited{
  color: #4C904E;
}

#header li a:hover,#header li a:active{
  color: #4C904E;
  text-decoration: underline;
}
/*コンテンツ*/
#content{
  width: 600px;
}

.eco{
  width: 600px;
  height: 60px;
  background-color: #4C904E;
  text-align: center;
  padding-top: 30px;
}

h2{
  color: #4C904E;
}



/*フッター*/
#footer{
  border-top: 2px solid #4C904E;
  text-align: center;
  margin-top: 50px;
  padding: 20px 0 60px 0;
}

#footer span{
  color: #4C904E;
}

↓