読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

CSS演習 - 1カラム 石垣島観光ガイド

1カラムレイアウト

f:id:web-0818:20170507165310p:plain

石垣島観光ガイド

石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。

観光スポット

川平(かびら)湾
石垣港から車で約20分
石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。

宮良川(みやらがわ)のヒルギ林
石垣港からバスで30分宮良橋で下車
巨大なマングローブ林(ヒルギ群落)があり、国の天然記念物に指定されているほど壮大です。

底地(すくじ)ビーチ 
川平湾から車で約10分
マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。

マエザトビーチ
石垣空港より車で約5分
ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。

©石垣島観光局

正しい文書構造の記述

  • HTML5新要素「header」と「footer」を記述する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>演習 - 石垣島観光ガイド</title>
</head>
<body>
<div class="container">
<header>
<h1></h1>
<p></p>
</header><!-- /header -->
<div class="content">

</div>
<footer>
<p></p>
</footer><!-- /footer -->
</div><!-- /.container -->
</body>
</html>

CSSで修飾

  1. リセットを記述
  2. bodyの設定を記述
  3. body直下のレイアウトブロックの幅を決める
  4. 他の内包するブロックのmarginとpaddingを決める
  5. コンテンツの文字サイズと文字色、背景色を決める
  6. 各コンテンツの下の空きを微調整する