ワンカラム - コーディング例
観光ガイド - ワンカラム
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>石垣島観光ガイド</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>石垣島観光ガイド</h1>
<p class="lead">石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。<br>
気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。</p>
</header>
<main class="main-content">
<h2>観光スポット</h2>
<h3>底地（すくじ）ビーチ</h3>
<ul>
<li>川平湾から車で約10分</li>
<li>マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。</li>
</ul>
<h3>マエザトビーチ</h3>
<ul>
<li>石垣空港より車で約5分</li>
<li>ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。</li>
</ul>
<h3>川平（かびら）湾</h3>
<ul>
<li>石垣港から車で約20分</li>
<li>石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。</li>
</ul>
<h3>宮良川（みやらがわ）のヒルギ林</h3>
<ul>
<li>石垣港からバスで30分宮良橋で下車</li>
<li>巨大なマングローブ林（ヒルギ群落）があり、国の天然記念物に指定されているほど壮大です。</li>
</ul>
</main>
<footer class="footer">
<p><small>© 石垣島観光ガイド</small></p>
</footer>
</div>
</body>
</html>
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
body {
background-color: #b7d7d4b3;
color: #333;
font-size: 16px;
font-family:
"Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
line-height: 1.7;
}
.container {
max-width: 760px;
margin: 30px auto;
padding: 40px;
background-color: #fff;
}
.header {
margin-bottom: 30px;
}
h1 {
display: flex;
justify-content: center;
align-items: center;
height: 240px;
margin-bottom: 20px;
background: #4195ef url(../img/h1_bg.jpg) no-repeat center bottom;
background-size: cover;
color: #fff;
text-shadow: 0 0 4px #000, 0 0 4px #000;
}
.lead {
text-align: center;
}
h2 {
margin-bottom: 30px;
padding: 8px 0 6px;
background-color: #3176c0;
color: #fff;
text-align: center;
}
h3 {
margin-bottom: 10px;
padding: 8px 0 6px 20px;
background-color: #b6ecf5;
border-left: 12px solid #3176c0;
font-size: 18px;
}
ul {
margin-bottom: 20px;
padding: 0 20px 0 50px;
}
li:first-child {
color: #3176c0;
font-weight: bold;
}
.footer {
padding: 10px 0 0;
border-top: 1px dotted #333;
text-align: center;
}
