CSS04,05,08

課題 CSS 
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>CSS04エコロジーへの取り組み</title>
<style type="text/css">
<!--
body{
  width:500px;
  color:ffffff;
  background-color:#ffffff; 
  }
h1{ 
  color:#599A72;
  background-image:url(../image2012/images/logo.gif);
  background-repeat:no-repeat; 
}

}
h2{
  background-image:url("../image2012/images/mark.gif");
  background-repeat:no-repeat;
  background-image:url("../image2012/images/ecology_sub02.gif);
  background-repeat:no-repeat;
  margin:0 20px;
  padding:0 20px;
}
address{
  color:#599A72;
  border-top: 5px solid #599A72;
}


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

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


CSS 5

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>CSS05</title>
<style type="text/css">
<!--
body{
  background-color:#ffffff;
}
h1{
  font-size:1em
  }
p{
  border-left:5px solid #ff7f00;
}
#wrapper{
  width:550px;
}
.left{
  width:140px;
  float:left;
  display:block;
}
.right{
  float:left;
  display:block;
  width:410px;
}
-->
</style>
</head>
<body>
<div  id="wrapper">
<div class="left">
<h1>デザインの話</h1>
</div>
<div class="right">
<p>
物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。<br />

物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。
</p>
</div>
</div>

<div class="left">
<h1>パッケージの色</h1>
</div>
<div class="right">
<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。<br />

パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。
</p>
</div>
</div>

</body>
</html>

CSSが理解できなくて、迷走中です。どのように打開すればいいのかも、わかっていない状態です。今後、どのように自分の対策を取ればよいのか。
理解できないので、構造がみえない、マークアップすらどこから手を付ければよいのかがわからなくなります。

　また、最初のほうから戻って理解できることを復習するしかないのかな。

CSS08

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>CSS08</title>
<style type="text/css">
<!--
body{
  width:500px;
  background-color:#ffffff;
}
h1{
  font-size:1.2em;
  color:#0662D7;
  }
h2{
  font-size:0.875em;
  color:#14449E;
  border-left:solid #0662d7;
}
h3{
  font-size:0.875em;
  color:#14449e;
  background-color:#D5EBFE;
}
h4{
  color:#B5D1FC;
}
p{
  color:#000000;
}
-->
</style>
</head>
<body>
<h1>石垣島観光ガイド</h1>

<p>石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。 沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、 マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、 そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、 特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p>

<h2>観光スポット</h2>

<h3>「川平（かびら）湾」</h3>
<h4>石垣港から車で約20分</h4>

<p>石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。</p>

<h3>「宮良川（みやらがわ）のヒルギ林」</h3>
<h4>石垣港からバスで30分宮良橋で下車</h4>

<p>巨大なマングローブ林（ヒルギ群落）があり、国の天然記念物に指定されているほど壮大です。</p>

<h3>「底地（すくじ）ビーチ 」</h3>
<h4>川平湾から車で約10分</h4>

<p>マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。</p>

<h3>「フサキビーチ」</h3>
<h4>石垣港からバスで30分、宮良橋下車</h4>

<p>島の西側にあるビーチで、西表（いりおもて）島に沈む美しいサンセットが見られるビーチとして有名です。</p>

<h3>「米原海岸」</h3>
<h4>石垣空港より車で約30分</h4>

<p>米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。</p>

<h3>「マエザトビーチ」</h3>
<h4>石垣空港より車で約5分</h4>

<p>ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。</p>

<h3>「唐人墓（とうじんばか）」</h3>
<h4>石垣空港より富崎観音堂方面へ車で15分</h4>

<p>19世紀中頃に、中国のアモイからカリフォルニア行きの船に乗せられて死んでしまった128人の中国の人を悼み、琉球特有のお墓です。</p>

<h3>「明石パラワールド」</h3>
<h4>石垣市街地より車で45分</h4>

<p>島の北方で水牛などの牧場が広がる地域に1997年にできました。素晴らしい景観を見ながら、 パラグライダーを楽しむことができます。</p>

</body>
</html>