8/27|CSSヘッダー, 枠線, 1カラムサイト
/27
- headerの文字位置の調整
margin-bottom: ← 下にスペースが空く
margin ← 内回りにスペースが出来る
—
- タイトルに画像を配置
—
- タイトルに背景色を設定
—
- 枠線の記述
.border1 → 枠線の記述は「 . 」 ドットから始まる
—
- ★石垣島_1カラムサイト製作
レイアウトの枠組みを記述
bodyの中に、html情報と<div id="container">など枠組みの指定をする
line-height: → 行間指定
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>石垣島観光ガイド</title> <style> html, body, div, h1, h2, h3, h4, p { margin: 0; padding: 0; line-height: 1.0; } body { font-size: 16px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, Osaka, sans-serif; line-height: 1.5; background: #D8EAFF; } #container { width: 760px; margin: 10px auto; padding: 20px; background: #FFF; } #header { line-height: 150px; height: 300px; margin-bottom: 10px; background: url(img/images2.JPG) no-repeat center top; } #header h1 { font-size: 28px; padding-top: 110px; padding-left: 520px; color: #FFF; margin-bottom: 30px; } #header p { line-height: 1.5; text-indent: 1em; } #content h2{ border-left: #039 solid 5px; padding: 3px 0 2px 10px; font-size: 22px; color: #00376F; margin-bottom: 20px; } #content h3 { color: #00376F; padding: 10px 0 8px 1em; margin-bottom: 10px; border-top: #CCC dotted 2px; border-bottom: #CCC dotted 2px; background: #EEEEF8; } #content h4 { color: #064DC3; margin-bottom: 15px; } #content p { line-height: 1.5; margin-bottom: 20px; } #footer { border-top: #CCC dotted 1px; padding: 20px 0 30px 320px; } </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 id="footer"> <p>石垣島観光ガイド</p> </div><!--/#contant--> </div><!--/#contaner--> </div><!--/#footer--> </body> </html>