CSS layout

Project

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.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>石垣島観光ガイド</title>
<link href="ishigakijima.css" rel="stylesheet" type="text/css" 
media="screen, print" />
</head>

<body>
<!-- ▼#container -->
<div id="container">
<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>
</div>
</body>
</html>


CSS

@charset="UTF-8";

*[Homework]{
  margin: 0;
  padding: 0;
}

body{
  font-size:0.8em;   
  font-family: 
    "Hiragino Kaku Gothic Pro",
    "ヒラギノ 角ゴ Pro W3",
    Meiryo,
    "メイリオ",
    Osaka,
    "MS PGothic",
    "ＭＳ Ｐゴシック",
    sans-serif;  
    line-height: 1.5;
}

#container {
  heigth: 800px;
  width: 900px;
  margin: 50px auto;
  padding: 20px 20px;
  border-bottom: 20px solid  #E0F8FF;
  border-right: 20px solid  #E0F8FF;
  border-left: 20px solid  #E0F8FF;
}

h1{
  color:  #0050BF;
  font-size: 2em;
  margin: 0 0 20px;
}

h2{
  color: #0050BF;
  font-size: 1.5em;
  letter-spacing: 5px;
  border-left: 10px solid #1E90FF;
  padding-left: 10px;
  margin: 30px 0 30px;
}

h3{
  color: #0050BF;
  font-size: 1.1em;
  background-color: #E0F8FF;
  border-top: 1px  solid #B0C4DE;
  border-bottom: 1px solid  #B0C4DE;
  padding-top: 5px;
  padding-left: 5px;
}
	
h4{
  color: #1E90FF;
  font-size: 1.1em;
  margin: 10px 0 10px;
}

p{
  font-size: 1em;
   margin: 10px 0 10px;
}

ガラスの靴作成中...