<html lang="ja">
<head>
<meta charset="UTF-8">
<title>H02C02</title>
<link rel="stylesheet" href="CSS/H02C02.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>石垣島観光ガイド</h1>
</div>
<p class="lead">
石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に
大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に
近く南に位置します。気候は亜熱帯気候で、1年を通じて平均
気温は27度もあります。亜熱帯気候のため、マングローブの森
や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何より
も、鮮やかなコバルトブルーの海岸は、多くの観光客をひき
つけ、特にダイバーやシュノーケリングを楽しむ人にとっては
格好の場所になっています。
</p>
<h2>観光スポット</h2>
<div class="section">
<h3>「 川平（かびら）湾」</h3>
<p class="time">石垣港から車で約20分</p>
<p>
石垣を代表する景勝地で、エメラルド色の
サンゴ礁と黒真珠の養殖でよく知られて
います。 潮の流れが早いため、遊泳は禁止
されています。
</p>
</div>
<div class="section">
<h3>「宮良川（みやらがわ）のヒルギ林」</h3>
<p class="time">石垣港からバスで30分宮良橋で下車</p>
<p>
巨大なマングローブ林（ヒルギ群落）があり、
国の天然記念物に指定されているほど壮大です。
</p>
</div>
<div class="section">
<h3>「底地（すくじ）ビーチ 」</h3>
<p class="time">川平湾から車で約10分</p>
<p>
マリンスポーツが楽しめ、マンタが見られる
ことから、ダイバーに人気があります。
</p>
</div>
<div class="section">
<h3>「フサキビーチ」</h3>
<p class="time">石垣港からバスで30分、宮良橋下車</p>
<p>
島の西側にあるビーチで、西表（いりおもて）島
に沈む美しいサンセットが見られるビーチとして有名です。
</p>
</div>
<div class="section">
<h3>「米原海岸」</h3>
<p class="time">石垣空港より車で約30分</p>
<p>
米原キャンプ場が隣接していて、ビーチパーティ
が楽しめます。潮の流れが早いため、遊泳は禁止
されています。
</p>
</div>
<div class="section">
<h3>「マエザトビーチ」</h3>
<p class="time">石垣空港より車で約5分</p>
<p>
ホテル内にあるリゾートビーチですが、宿泊者
以外でも利用可能です。ファミリー向けリゾート地
で、 シュノーケルのレンタルもあります。
</p>
</div>
<div id="footer">
<small>Copyright 2013 xxx All Right Researved.</small>
</div>
</div>
</body>
</html>
"UTF-8";
body, div, h1, h2, h3, p {
margin: 0;
padding: 0;
}
body {
font-family:
"Hiragino Kaku Gothic Pro",
Meiryo,
sans-serif;
background-color: #D3EBFF;
}
#header, h2, p{
margin-bottom: 20px;
}
#container {
width: 850px;
padding: 16px;
margin: 20px auto;
background-color: #ffffff;
}
#header {
height: 200px;
background-image: url(../img/02headerimg.jpg);
background-repeat:: no-repeat;
background-position: 0px -100px ;
border-radius: 10px;
position: relative;
}
h1 {
color: #ffffff;
padding: 0px 562px 0px 16px;
letter-spacing: 2px;
background-color: #001C90;
position: absolute;
top: 120px;
}
p.lead {
text-indent: 1em;
}
h2 {
color: #001C90;
border-left: 10px solid #4194FF;
padding-left: 10px;
letter-spacing: 3px;
line-height: 35px;
}
h3 {
color: #000080;
border-top: dotted 2px #000080;
border-bottom: dotted 2px #000080;
background-color: #D3EBFF;
padding: 3px 0 3px 5px;
margin-bottom: 10px;
}
p.time {
color: #4194FF;
font-weight: bold;
margin-bottom: 10px;
}
#footer {
text-align: center;
padding-top: 15px;
border-top: 2px solid #c0c0c0;
color: #c0c0c0;
}
