H09 C09

授業　演習問題 


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Computer Technology Groups</h1>
</div>

<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>

<div id="content">
<h2><img src="img/ecology.gif" width="201" height="24" alt="ecology"></h2>
<h3>エコロジーへの取り組み</h3>
<p>
Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。
</p>
<h3>商品のラインナップ</h3>
<p>
紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
</p>
</div>

<div id="footer">
<address>(C) <span>Computer Technology Groups.</span> All rights reserved.</address>
</div>
</div>
</body>
</html>

@chaset "utf-8";
body,div,h1,h2,h3,ul,li,a,p{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}

body{
  font-size: 16px;
  color: #333;
  background: #fff;
  line-height: 1.5;
  font-family: 
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
}
#container{
  width: 600px;
  padding: 10px 0;
  margin: auto;
}
#header{
  background: url(img/logo.gif) no-repeat top left;
  height: 60px;
  margin-bottom: 10px;
}
#nav{
  overflow: hidden;
  margin-bottom: 20px;
  border-bottom: 1px solid #4C904E;
}
#content{
  margin-bottom: 20px;
}
#footer{
  height: 50px;
  text-align: center;
  border-top: 2px solid #4C904E;
  padding-top: 10px;
  font-size: 14px;
}
/* 子孫 */
h1{
  color: #4C904E;
  font-size: 16px;
  padding-left: 55px;
}
#nav ul{
  border-top: 1px solid #4C904E;
  padding-left: 20px;
}
#nav li{
  display: inline;
  float: left;
  margin-left: 16px;
  padding: 10px 0;
}
#nav li a{
  color: #4C904E;
}
#nav li a:hover{
  text-decoration: underline;
}
h2{
  text-align: center;
  background: #4C904E;
  padding: 15px 0 5px 0;
  margin-bottom: 20px;
}
h3{
  background: url(img/mark.gif) no-repeat left top 3px;
  padding-left: 25px;
  color: #4C904E;
  margin-bottom: 20px;
}
p{
  margin-bottom: 20px;
}
#footer span{
  color: #4C904E;
}