html01

課題

※田中先生のサイトにある1つ目の課題になります
HTML

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

<body>
<div id="container">
<div id="header">
<h1>ECOLOGY【エコロジー】</h1>
<p>Computer Technology Groupsでは、<br>
グループをあげてエコロジー／環境問題に取り組んでいます。<br>
成果や実績を地域に還元することもポリシーとしています。</p>
</div><!-- header-->
<div id="content">
<h2>商品のラインナップ</h2>
<p class="Line-up">紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
<p class="title">リサイクル商品</p>
<ul>
<li>ノートやメモ帳などの紙製品</li>
<li>ペットボトル</li>
<li>布製品</li>
<li>ダンボール／梱包材</li>
<li>木工製品／割り箸・爪楊枝など</li>
<li>コンピューター基盤／電子機器</li>
</ul>
<p class="title">省エネ商品</p>
<ul>
<li>消費電力を計測する機器</li>
<li>電源を自動的にオフにするキット</li>
<li>水量を調節する蛇口セット</li>
<li>家庭用省エネ10点セット</li>
</ul>
</div><!-- content-->
<div id="footer">
<p><small>Copyright (C) <a href="#">Computer Technology Groups</a>. All rights reserved.</small></p>
</div><!-- footer-->
</div><!-- container-->
</body>
</html>

CSS

@charset "utf-8";


/* リセット */
body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

body,h1,p,ul,li,h2,div{
  margin:0;
  padding:0;
}
ul{
list-style-type: none;
}

/*全体*/
#container{
  width:650px;
  height:auto;
  margin:0 auto;
  border:solid 1px #5C8FAE;
}

/*ヘッダー*/
#header{
  text-align:center;
}
#header h1{
  background:#C5E1ED;
  color:#333333;
  font-size:20px;
  padding:30px 0px;
}
#header p{
  border-bottom:#C5E1ED solid 2px;
  color:#5F87A0;
  margin-top:30px;
  padding-bottom:5px;
}

/*コンテンツ*/
#content{
  width: 550px;
  height: auto;
  margin: 30px 0px 30px 50px;
}
#content h2{
  background: url(h2_line.gif) no-repeat left;
  font-size: 20px;
  padding: 5px 0 0 20px;
  margin-bottom: 20px;
}
.Line-up{
  margin-bottom: 16px;
}
.title{
  color:#5F87A0;
  font-weight: bold;
}
#content ul{
  margin: 0 0 15px 8px;
  line-height: 1.7;
}
#content li{
  background: url(ul_button.gif) no-repeat left;
  padding: 5px 0 0 20px;
}

/*フッター*/
#footer{
  text-align: center;
  color:#5F87A0;
  border-top: 10px solid #C5E1ED;
}

↓