実践課題 CSS08

CSS

【CSS08】

  • 以下の画像と同じように表示させるCSSを記述しなさい
  • リセットは、全称セレクタで
  • XHTML 1.0 Transitional
  • 記述場所はエンベッド


http://d.hatena.ne.jp/web-design-advance/20120507/p1

<?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>CSS08</title>
<style type="text/css">

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #D6EBFF;
  font-family:
  	"Hiragino Kaku Gothic Pro",
  	"ヒラギノ角ゴ Pro W3",
  	"Meiryo",
  	"メイリオ",
  	"Osaka",
  	"MS P Gothic",
  	"ＭＳ Ｐゴシック",
  	"sans-serif";
}
#container {
  background-color: #fff;
  margin: 0 40px;
  width: 750px;
  border-right: solid 40px #D6EBFF;
}
#wrapper {
  margin: 0 30px;
  overflow: auto;
}
h1 {
  color: #0263D3;
  padding: 25px 0 15px 0;
}
h3 {
  color: #75ABF9;
  margin: 10px 0 10px 0;
  font-size: 1.1em;
}
.b {
  border-left: 10px solid #649BFD;
  color: #0C349D;
  margin: 0 0 20px 0;
  padding-left: 10px;
}
.aa {
  margin: 10px 0 20px 0;
  font-size: 0.9em;
}
.c {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  background-color: #D6EBFF;
  color: #4156A3;
  font-size: 1.2em;
  line-height: 34px;
}
p {
  margin-bottom: 30px;
  font-size: 0.9em;
}
.g {
  padding: 0 0 0 1em;
  float: left;
  font-size: 0.9em;
}

</style>
</head>

<body>
<div id="container">
  <div id="wrapper">

  <h1>石垣島観光ガイド</h1>

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

  <h2 class="b">観光スポット</h2>

  <h2 class="c">「川平（かびら）湾」</h2>
  
  <h3>石垣港から車で約20分</h3>

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

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


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

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

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

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

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

<h2 class="c">「米原海岸」</h2>
<h3>石垣空港より車で約30分</h3>

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

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

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

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

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

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

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

  </div>
</div>

</body>
</html>


実践課題 CSS08 - jsdo.it - share JavaScript, HTML5 and CSS