html page 001 - 96's blog

HTML

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

CSS

@charset "UTF-8";
/* CSS Document */
body, h1, h2, p, ul , li{
  margin: 0;
  padding: 0;
}
li {
  list-style: url(list.gif);
}
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #333333;
}
#container{
  width: 566px;
  margin: 5px auto;
  border: 1px solid #006;
}
#header{
  text-align: center;
  border-bottom: 3px solid #C5E1ED;
}
h1 {
  font-size:18px;
  background: #C5E1ED;
  line-height: 70px;
  margin-bottom: 15px;
}
#header p{
  color:  #5F8DAC;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 5px;
}
#content{
  padding: 20px 60px;
}
#content h2{
  font-size: 18px;
  font-weight:500;
  margin-bottom:10px;
  }
#content h2 span{
  color: #5F8DAC;
  font-size: 22px;
  vertical-align: baseline;
}
#content p {
  font-size: 14px;
}
#content h3 {
  margin-bottom:0px;
  font-size: 14px;
  color: #5F8DAC;
}
#content li {
  margin-left: 2em;
  font-size: 14px;
}
#footer{
  height: 25px;
  text-align: center;
  border-top: 10px solid #C5E1ED;
}
#footer p{
  color: #5F8DAC;
  font-size: 12px;
}
#footer a{
  color: #5F8DAC;
}