【HTML/CSS】1カラムレイアウトの演習
HTMLにもCSSにも慣れてきたので、1カラムレイアウトの演習をしました。
演習結果(ブラウザプレビュー)
ポイント
- ヘッダーの画像の上にテキスト(h1)を表示するために、imgタグではなくCSSでdiv#headerにbackgroundで背景画像を設定。
- 画像上のテキストの位置はh1にpaddingを指定することで、div#header内の自由なところにテキストを移動させることができます。
ソース
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title>石垣島観光ガイド</title> <style> html, body, div, h1, h2, h3, h4, p{ padding:0; margin:0; line-height:1.0; } body{ font-size:16px; background: #D8EAFF; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } #container{ background: #fff; width: 760px; margin: 10px auto; padding: 20px; } #header{ background: url(img/03.jpg) no-repeat center top; } #header h1{ color: #fff; font-size: 28px; padding: 110px 0 0 510px; margin-bottom: 20px; } #header p{ line-height:1.5; text-indent: 1em; margin-bottom: 30px; } #content h2{ padding: 3px 0 2px 10px; border-left: #0066D5 solid 5px; color: #011049; margin-bottom: 20px; } #content h3{ background: #EEEEF8; border-top: #B3B2D4 dashed 2px; border-bottom: #B3B2D4 dashed 2px; padding: 12px 0 8px 10px; margin-bottom: 16px; } #content h4{ color: #519DEB; margin-bottom: 16px; } #content p{ line-height:1.5; margin-bottom: 20px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>石垣島観光ガイド</h1> <p>石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p> </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><!--/#container--> </body> </html>