webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

演習 : 石垣島観光ガイド

  • 最終的には、レスポンシブ対応にする。
  • メディアクエリーを記述しやすいように気をつける。
  • box-shadowの記述がトリッキーなのが気になる。
  • 4隅均等に影をつける。下の影はフッターで隠れるから、y軸を下げて、ヘッダーに掛からないようになっている。大丈夫か?

文書構造の確認

HTML 5 Outliner

f:id:ohta-felica:20160606204409p:plain

html

<title>石垣島観光ガイド</title>
<link rel="stylesheet" href="style.css">
</head>

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

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

 css

#container{
width: 960px;
margin: 0 auto;
}
#header{
height: 350px;
background:url(img/ishigaki_resize.jpg) no-repeat;
}
#box{
width: 75%;
margin: 0 auto;
padding-top: 10%;
box-sizing: border-box;
}
#box>h1{
color: #fff;
margin-bottom: 16px;
font-size: 28px;
}
#box>p{
background: rgba(255, 255, 255, 0.7);
line-height: 1.6;
margin: 0 auto;
font-weight: bold;
font-size: 16px;
color: #444;
padding: 8px 16px;
text-indent: 1em;
}
/*
----------------------------------------------------------------------------header*/
#content{
width: 75%;
margin: 0 auto;
padding: 1em 1em 0.5em 1em;
box-shadow: 0 8px 8px 4px #CCC;
}
#content>h2{
border-left: 12px solid #0066cd;
line-height: 1.6;
padding-left: 0.5em;
margin-bottom: 1em;
}
#content>h3{
border-top: 1px solid #AAA;
border-bottom: 1px solid #AAA;
background: #e2ecff;
color: #335a84;
line-height: 2.0;
padding-left: 1em;
margin-bottom: 0.5em;
}
#content>h4{
line-height: 1.6;
color: #024ce8;
font-weight: bold;
margin-bottom: 0.5em;
}
#content>p{
margin-left: 4em;
margin-bottom: 0.5em;
}
/*
-----------------------------------------------------------------------content*/
#footer{
width: 100%;
height: 100px;
background: #66c6cc;
text-align: center;
}
#footer>p{
padding-top: 1em;
color: white;
}