実践演習課題H09C09

HTML

<!doctype html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>H09C09</title>
<linkrel="stylesheet"href="css/H09C09.css"media="all">
</head>
<body>
<divid="container">
<divid="header">
<h1><ahref="#">Computer Technology Groups</a></h1>
<divid="nav">
<ul>
<li><ahref="ecology.html">エコロジー</a></li>
<li><ahref="computer.html">コンピューター</a></li>
<li><ahref="mobile.html">モバイル</a></li>
<li><ahref="shopping.html">ショッピング</a></li>
<li><ahref="contact.html">お問い合わせ</a></li>
</ul>
</div>
<divid="title">
<imgsrc="img/09/ecology.gif"alt="ecology"width="201"height="24">
</div>
</div><!-- /header -->
<divid="content">
<divclass="section">
<h2>エコロジーへの取り組み</h2>
<p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
<p>地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。</p>
</div>
<divclass="section">
<h2>商品のラインナップ</h2>
<p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
</div>
</div>
<divid="footer">
<small>
<span>Copyright (C) <ahref="#">Computer Technology Groups.</a> All rights reserved.</span>
</small>
</div>
</div>
</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: #438f49;
  line-height: 1.7em;
}
#container{
  width: 500px;
  margin: 20px auto;
}
#header{
  background: url(../img/09/logo.gif) no-repeat;
  margin-bottom: 30px;
}
#nav{
  border-top: 1px solid #438f49;
  border-bottom: 1px solid #438f49;
  margin-bottom: 20px;
}
#title{
  background-color: #438f49;
  text-align: center;
  padding: 25px 0 15px 0;
}
#content{
}
#footer{
  border-top: 2px solid #438f49;
  text-align: center;
  padding-top: 10px;
}

h1{
  margin: 5px 0 45px 60px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
}
h1 a{
  color:#438f49;
}
ul{
  list-style:none;
  padding: 8px 10px;
}
li {
  display: inline;
  margin: 5px;
}
li a{
  color: #438f49;
  font-size: 14px;
}
li a:hover{
  text-decoration: underline;
}
h2{
  background: url(../img/09/mark.gif) no-repeat 0px 1px;
  font-size: 18px;
  padding-left: 25px;
  margin-bottom: 20px;
}
p{
  color: #333333;
  margin-bottom: 10px;
}
.section{
  margin-bottom: 30px;
}
span{
  color: #333333;
}
#footer a{
  color:#438f49;
}

テキストのナビゲーションを横並びにするのに、liセレクタにdisplay:inline;を指定しました。float関係は記述しませんでしたが、した方がいいのでしょうか？
画像を、HTMLの要素にするか、CSSでbackground-imageにするか迷うことがあります。

96's blog

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

実践演習課題H09C09