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

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

レスポンシブWebデザイン実践(1カラム)石垣島観光ガイド

レスポンシブWebデザイン実践(1カラム)石垣島観光ガイド


f:id:web-design-lesson:20160605025834p:plain



f:id:web-design-lesson:20160605030311p:plain

石垣島観光ガイド

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

観光スポット

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

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

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

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

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

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

(c)石垣島観光局

レイアウト構造

f:id:web-design-lesson:20160607233648p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>石垣島観光ガイド - レイアウト構造</title>
<style>
#container {
  width: 100%;
  height: auto;
}
.box {
  height: 100px;
  background: #F2F6E0;
  border: 4px solid #B1CD30;
  text-align: center;
  line-height: 100px;
}
.wrapA>.box {
  background: #ECF7FD;
  border: 4px solid #689DD1;
  width: 60%;
  margin: 0 auto;
  box-sizing: border-box;  /*パディングとボーダーを幅と高さに含める*/
}
</style>
</head>
<body>
<div id="container">
<div class="box box1">BOX1</div>
<div class="wrapA">
<div class="box box2">BOX2</div>
</div><!-- /.wrapA -->
<div class="box box3">BOX3</div>
</div><!-- /#container -->
</body>
</html>
BOX2を書き換えます
  • このときの「.wrapA」は、不要ですがレイアウトの構造を理解するために意識的に残します
<div class="wrapA">
<div class="content">
  ・・・・・
</div><!-- /.content -->
</div><!-- /.wrapA -->
.wrapA>.content {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #FFF;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

f:id:web-design-lesson:20160607234505p:plain

BOX3を書き換えます
<div class="footer">BOX3</div>
.footer {
  height: 100px;
  padding-top: 20px;
  text-align: center;
  background: #66C5CB;
  color: #FFF;
}

f:id:web-design-lesson:20160607234805p:plain

メディアクエリを記述し確認
@media screen and (max-width:797px) {
  /* font-size
  --------------------------------------*/
  html { font-size: 62.5%; } 
  body { font-size: 1.6rem; }
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.6rem; }
  h4 { font-size: 1.6rem; }
  p { font-size: 1.4rem; }
  
  /* .content
  --------------------------------------*/
.wrapA>.content {
    width: 100%;
    box-shadow: none;
  }
  .content h2 {
    margin-bottom: 16px;
  }
  .content h3 {
    padding: 6px 0 5px 5px;
  }
  .content h4 {
    margin-left: 10px;
  }
  .content p {
    margin: 0 0 10px 10px;
    line-height: 1.4;
  }
  
  /* .footer
  --------------------------------------*/
  .footer {
    height: 50px;
  }
}

f:id:web-design-lesson:20160608001110p:plain

BOX1を書き換えます
<div class="header">
<h1>石垣島観光ガイド</h1>
<p class="lead">石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p>
</div><!-- /.header -->
/* .header
--------------------------------------*/
.header {
  position: relative;
  height: 400px;
  background: #FFF url(img/header.png) no-repeat center top;
  background-size: cover;
}
.header h1 {
  width: 800px;
  margin: 0 auto 20px auto;
  padding-top: 120px;
  color: #FFF;
  font-size: 28px; ;
}
.header > p {
  width: 800px;
  margin: 0 auto 20px auto;
  padding: 16px;
  line-height: 1.5;
  text-indent: 16px;;
  background: rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
}


f:id:web-design-lesson:20160608002319p:plain

.header用のメディアクエリを記述
  /* .header
  --------------------------------------*/
  .header {
    position: static;
    width: 100%;
    height: 300px;
    background-size: contain;
  }
  .header h1 {
    width: 100%;
    padding-top: 40px;
    text-align: center;
  }
  .header > p {
    width: 100%;
    margin: 30px 0 0 0;
    background: rgba(255, 255, 255, 0);
    text-indent: 1.6rem;
  }


f:id:web-design-lesson:20160608002808p:plain



《例》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>石垣島観光ガイド - レイアウト構造</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<h1>石垣島観光ガイド</h1>
<p class="lead">石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。</p>
</div><!-- /#header -->
<div id="content">
<h2>観光スポット</h2>
<h3>「 川平(かびら)湾」</h3>
<h4>石垣港から車で約20分</h4>
<p class="main">石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。</p>
<h3>「宮良川(みやらがわ)のヒルギ林」</h3>
<h4>石垣港からバスで30分宮良橋で下車</h4>
<p class="main">巨大なマングローブ林(ヒルギ群落)があり、国の天然記念物に指定されているほど壮大です。</p>
<h3>「底地(すくじ)ビーチ 」</h3>
<h4>川平湾から車で約10分</h4>
<p class="main">マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。</p>
<h3>「フサキビーチ」</h3>
<h4>石垣港からバスで30分、宮良橋下車</h4>
<p class="main">島の西側にあるビーチで、西表(いりおもて)島に沈む美しいサンセットが見られるビーチとして有名です。</p>
<h3>「米原海岸」</h3>
<h4>石垣空港より車で約30分</h4>
<p class="main">米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。</p>
<h3>「マエザトビーチ」</h3>
<h4>石垣空港より車で約5分</h4>
<p class="main">ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。</p>
</div><!-- /#content -->
<div id="footer">
<p>&copy;石垣島観光局</p>
</div><!-- /#footer -->
</body>
</html>
@charset "UTF-8";

/* reset 
----------------------------------------------------*/
html, body, div, h1, h2, h3, h4, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* font-size 
----------------------------------------------------*/
html { font-size: 62.5%; } /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
h2 { font-size: 24px; font-size: 2.4rem; }
h3 { font-size: 20px; font-size: 2.0rem; }
h4 { font-size: 18px; font-size: 1.8rem; }
p { font-size: 16px; font-size: 1.6rem; }

/* body 
----------------------------------------------------*/
body {
  background: #FFF;
  color: #333;
}

/* layout 
----------------------------------------------------*/
#header {
  position: relative;
  z-index: 1000;
  height: 300px;
  background: #FFF url(img/header.png) no-repeat center top;
  background-size: cover;
}
#content {
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  background-color: #FFF;
  box-shadow: 0 0 12px #333;
  box-sizing: border-box;  /*パディングとボーダーを幅と高さに含める*/
}
#footer {
  color: #FFF;
  padding: 20px 0 50px 0;
  background-color: #3268C9;
  text-align: center;
}

/* #header 
----------------------------------------------------*/
#header h1 {
  width: 60%;
  max-width: 760px;
  margin: 0 auto 10px auto;
  padding-top: 70px;
  color: #FFF;
  font-size: 32px; font-size: 3.2rem;
}
#header > p {
  width: 60%;
  max-width: 760px;
  margin: 0 auto 20px auto;
  padding: 16px;
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
}

/* #content 
----------------------------------------------------*/
#content h2 {
  color: #3E4B74;
  border-left: 12px solid #06C;
  margin-bottom: 20px;
  padding: 7px 0 3px 10px;
}
#content h3 {
  color: #1B416D;
  margin-bottom: 10px;
  padding: 10px 0 8px 16px;
  background: #E1EBFF;
  border-top: 1px dotted #1B416D;
  border-bottom: 1px dotted #1B416D;
}
#content h4 {
  color: #3268C9;
  margin-bottom: 8px;
}
#content > p {
  margin: 0 0 16px 36px; margin: 0 0 1.6rem 3.6rem;
  line-height: 1.4;
}

/* #footer
----------------------------------------------------*/
#footer p {
  font-size: 14px; font-size: 1.4rem;
}