- 最終的には、レスポンシブ対応にする。
- メディアクエリーを記述しやすいように気をつける。
- box-shadowの記述がトリッキーなのが気になる。
- ４隅均等に影をつける。下の影はフッターで隠れるから、y軸を下げて、ヘッダーに掛からないようになっている。大丈夫か？
文書構造の確認
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;
}
