１３日目 １カラム ２カラム
１カラム
★HTML★
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>石垣島観光ガイド</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<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>石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。
潮の流れが早いため、遊泳は禁止されています。</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><small>©石垣島観光局</small></p></div>
</div><!--#container-->
</body>
</html>
★stylesheet★
@charset "utf-8";
/* CSS Document */
html, body, h1, h2, h3, h4, p{
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
/* 古いIE用/モバイル用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 {
background: #429B9B;
}
#container {
width: 760px;
height: auto;
margin: 0 auto;
padding: 20px;
background: #FFF;
}
#header {
background: url(img/h1_bg.png) no-repeat center top;
}
#header h1 {
padding: 160px 0px 20px 490px;
color: #FFF;
}
#header>p.lead {
padding: 10px 40px 40px;
line-height: 1.5;
text-indent: 1.0em;
}
#content>h2 {
color: #039;
margin-bottom: 20px;
padding: 0 0 0 16px;
border-left: 10px solid #009;
}
#content>h3 {
color: #039;
background: #BEE7E6;
padding: 5px 14px;
border-top: 2px dotted #999;
border-bottom: 2px dotted #999;
}
#content>h4 {
margin: 10px 0;
color: #36C;
}
#content>p {
padding: 10px 0 20px 30px;
}
#footer {
text-align: center;
padding: 10px 0;
border-top: 2px dotted #999;
}
２カラム
★HTML★
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムレイアウト基本</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1 lang="en">Homepage Title</h1>
<p>サブタイトルサブタイトルサブタイトル</p>
</div><!--header-->
<div id="wrapper">
<div id="content">
<h2>コンテンツのタイトル</h2>
<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
</div><!--content-->
<div id="nav">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div><!--nav-->
</div><!--wrapper-->
<div id="footer">
<p><small>Copyright © AUTHOR NAME, All Rights Reserved.</small></p>
</div>
</div><!--container-->
</body>
</html>
★stylesheet★
@charset "utf-8";
/* CSS Document */
html,body,h1,h2,p,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
a {text-decoration: none;}
ul {list-style: none;}
html { font-size: 62.5%; }
body { font-size: 16px; font-size: 1.6rem; }
h1 { font-size: 32px; font-size: 3.2rem; }
h2 { font-size: 24px; font-size: 2.4rem; }
p,ul,li{ font-size: 16px; font-size:1.6rem; }
body { background: #CCC; }
#container {
background: #FFF;
width: 760px;
margin: 0 auto;
padding:20px;
}
#header {
height: 200px;
background: url(header01.jpg) no-repeat;
margin-bottom: 40px;
}
#header>h1 {
padding: 30px 20px 10px;
font-family:Verdana, Geneva, sans-serif;} /*英字をきれいに見せる*/
#header>p {
padding: 0 20px;
}
#content {
width: 550px;
float:left;
}
#content>h2 {
background: #ABCB2E;
padding: 10px 0 10px 24px;
font-size: 20px;
margin-bottom: 30px;
}
#content>p {
font-size: 14px;
margin-bottom: 20px;
}
#nav {
float:right;
width: 180px;
}
#nav li a{
border-bottom: 1px solid #999;
line-height: 40px; /*padding: 12px 0 10px 1.0em;*/
font-weight: bold;
font-size: 14px;
color: #000;
display:block;
}
#nav li:first-child {
border-top: 1px solid #aaa;
}
#nav li a:hover {
color: #F90;
}
#wrapper {
overflow:hidden;
}
#footer {
border-top: 2px solid #ABCB2E;
text-align: center;
padding-top: 10px;
}
