Felica Study Site

Lesson Data Down Load

CSS練習-石垣島観光ガイド-

css html

CSS練習-石垣島観光ガイド-

説明画像１

マークアップ演習

本文をコピーし、エディターでマークアップをしていきましょう。

本文

石垣島観光ガイド

石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。
沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。

気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、
マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、
鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーや
シュノーケリングを楽しむ人にとっては格好の場所になっています。

観光スポット

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

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

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

「フサキビーチ」
石垣港からバスで30分、宮良橋下車
島の西側にあるビーチで、西表（いりおもて）島に沈む美しいサンセットが見られるビーチとして有名です。

「米原海岸」
石垣空港より車で約30分
米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。

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

©石垣島観光局

使用画像

  • 使用画像

横:960px 縦:300px のサイズに加工

CSS演習１

マークアップができたら、完成図を元にCSSでレイアウトしていきましょう

完成図

完成図

11/08日演習完成データ

完成データはここからダウンロード

CSS演習２

観光スポット部分に画像をテキストの回り込みを使用して追加しましょう。

ここからダウンロード

5/25日演習

HTML

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>石垣島観光ガイド</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">

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

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

<main>
<h2>観光スポット</h2>

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

<div class="contents">
<h3>宮良川（みやらがわ）のヒルギ林</h3>
<h4>石垣港からバスで30分宮良橋で下車</h4>
<p>巨大なマングローブ林（ヒルギ群落）があり、国の天然記念物に指定されているほど壮大です。</p>
</div>

<div class="contents">
<h3>フサキビーチ</h3>
<h4>石垣港からバスで30分、宮良橋下車</h4>
<p>島の西側にあるビーチで、西表（いりおもて）島に沈む美しいサンセットが見られるビーチとして有名です。</p>
</div>

<div class="contents">
<h3>米原海岸</h3>
<h4>石垣空港より車で約30分</h4>
<p>米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。</p>
</div>

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

</main>

<footer>
<p><small>&copy;石垣島観光局</small></p>
</footer>

</div><!-- ./container -->

</body>
</html>

CSS

@charset "utf-8";
*{
 padding: 0;
 margin: 0;
 line-height: 1;
}

/*body
---------------*/
body{
 background-color: #a7dcec;
}

/*.container
----------------*/
.container{
 width:960px;
 padding:20px;
 margin: auto;
 background-color: #fff;
}

/*header
---------------------*/
.header{
 height: 300px;
 margin-bottom: 40px;
 background: url(../img/ishigaki-header.jpg) no-repeat left top;
}

.header h1{ 
 padding: 160px 0 100px;
 text-align: center;
 color:#fff;
 font-size: 40px;
}

p{
  padding: 0 48px;
  line-height: 1.65;
}

.concept{
 margin-bottom: 20px;
}

/*main
---------------------*/
main{
 padding: 20px 0;
}

main h2{
 padding: 8px 10px 3px;
 margin-bottom: 20px;
 border-left:10px solid #0669d0;
}

main .contents{
 margin-bottom: 40px;
}

main .contents h3{
 padding: 16px 20px;
 margin-bottom: 10px;

 color: #0669d0;
 background-color: #e0ebff;
 
 border-top:1px dashed #8eb5fd;
 border-bottom:1px dashed #8eb5fd;
}

main .contents h4{
  padding: 0 20px;
  margin-bottom: 10px;
  color: #0669d0;
  font-size: 18px;
}

/*footer
--------------------*/
footer{
 border-top: 1px dashed #8eb5fd;
}

footer p{
 padding: 20px 0 40px;
 text-align: center;
}

サイトバリエーション演習

完成したサイトとは別に追加要素を加えてオリジナルのバリエーションサイトを作成してみましょう

バリエーション例

画像