【HTML/CSS】１カラムレイアウトの演習 - PCゲーマーのWebデザイン備忘録

HTMLにもCSSにも慣れてきたので、1カラムレイアウトの演習をしました。

演習結果（ブラウザプレビュー）

f:id:game-web-design:20140922121629p:plain

ポイント

ヘッダーの画像の上にテキスト（h1）を表示するために、imgタグではなくCSSでdiv#headerにbackgroundで背景画像を設定。
画像上のテキストの位置はh1にpaddingを指定することで、div#header内の自由なところにテキストを移動させることができます。

ソース

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>石垣島観光ガイド</title>
<style>
html, body, div, h1, h2, h3, h4, p{
  padding:0;
  margin:0;
  line-height:1.0;
 }
 
body{
  font-size:16px;
  background: #D8EAFF;
  font-family: "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
}

#container{
  background: #fff;
  width: 760px;
  margin: 10px auto;
  padding: 20px;
}

#header{
  background: url(img/03.jpg) no-repeat center top;
}

#header h1{
  color: #fff;
  font-size: 28px;
  padding: 110px 0 0 510px;
  margin-bottom: 20px;
}

#header p{
  line-height:1.5;
  text-indent: 1em;
  margin-bottom: 30px;
}

#content h2{
  padding: 3px 0 2px 10px;
  border-left: #0066D5 solid 5px;
  color: #011049;
  margin-bottom: 20px;
}

#content h3{
  background: #EEEEF8;
  border-top: #B3B2D4 dashed 2px;
  border-bottom: #B3B2D4 dashed 2px;
  padding: 12px 0 8px 10px;
  margin-bottom: 16px;
}

#content h4{
  color: #519DEB;
  margin-bottom: 16px;
}

#content p{
  line-height:1.5;
  margin-bottom: 20px;
}

</style>
</head>

<body>
<div id="container">

<div id="header">
<h1>石垣島観光ガイド</h1>

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

<div id="content">
<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><!--/#content-->

</div><!--/#container-->
</body>
</html>