ページ全体のデザインの確認

ページ全体のデザイン

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>森の工房について</title>
<link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link href="base.css" rel="stylesheet" type="text/css" media="all">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<style>
article section figure {
  float: right;
  margin: 0 0 15px 15px;
}
</style>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- ▼#container -->
<div id="container">

<!-- ▼header -->
<header id="pageheader">
<hgroup>
<h1>Green Leaf</h1>
<h2>生活を楽しくする情報をもっと身近にお届けします</h2>
</hgroup>
<!-- ▼nav -->
<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="about.html">森の工房について</a></li>
<li><a href="event.html">季節のイベント</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
<li><a href="http://blog.xxx.xxx/">ブログ</a></li>
</ul>
</nav>
<!-- ▲nav -->
<img src="header.jpg" width="900" height="300" alt="">
</header>
<!-- ▲header -->
<!-- ▼content -->
<article itemscope itemtype="#">
<header id="postheader">
<h1 itemprop="name">森の工房について</h1>
<p id="summary" itemprop="description">Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。</p>
</header>
<div itemprop="articleBody">
<section>
<h1>森の中にある工房</h1>
<figure><img src="photo01.jpg" alt="森の中の様子" width="250" height="165">
<figcaption>工房へ続く森の中の道</figcaption>
</figure>
<p>森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。</p>
<p>この丘はちょうど森の中央に位置しており、森の中を散歩したり、自然の中で遊んだりするときにも、ちょうどいい拠点になります。森全体を見渡すことも可能で、夜は満点の星空を満喫できます。</p>
</section>
<section>
<h1>四季を楽しむことができる場所</h1>
<figure><img src="photo02.jpg" alt="冬の風景" width="250" height="165">
<figcaption>季節ごとに変わる景色</figcaption>
</figure>
<p>森の工房では、春、夏、秋、冬と、四季折々の自然を楽しむことができます。<br />
春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな緑。夏には、緑濃く茂った木々の間を吹き抜けるさわやかな風に、川の清流での水遊び。秋には、森全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、冬になると、ここは雪に覆われて一面の銀世界になります。</p>
</section>
<section>
<h1>工房のまわりにいる動物たち</h1>
<figure><img src="photo03.jpg" alt="鹿さん" width="250" height="165" itemprop="image">
<figcaption>工房の近くに姿を見せた鹿</figcaption>
</figure>
<p>工房のまわりにはいろいろな動物たちが棲んでいます。キツネ、タヌキ、イタチ、ウサギ、リス、シカ、イノシシ…。森の中で出会うこともあれば、ひょこっと工房に顔を出すこともあります。土や雪の上に残った足跡から、正体を探るのも楽しみです。</p>
<p>ただし、森の工房では彼らに餌をやることはしていません。自然にあるがままの姿で、いっしょに生活していきたいと考えているからです。彼らに出会ったときには、びっくりさせないように遠くからそっと眺めてあげてください。</p>
</section>
</div>
</article>
<!-- ▲content -->
<!-- ▼footer -->
<footer>
<p><small>Copyright (C) Green Leaf, All rights reserved.</small></p>
</footer>
<!-- ▲footer -->
</div>
<!-- ▲#container -->
</body>
</html>

@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro",
    "Hiragino Kaku Gothic Pro W3",
    "メイリオ",
    Meiryo,
    Osaka,
    "ＭＳ Ｐゴシック",
    "MS PGothic",
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style-type: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/* HTML5 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block;
}

/* body */
body {
  font-size: 16px;
　text-align: left;
}

/* link */
a  {
  color: #017acd;
}

/* container */
#container {
  width: 900px;
  margin: 0 auto;
}

/* header */
header#pageheader  {
  background: none;
  margin: 0 0 30px 0;
  padding: 15px 0 0 0;
}
header#pageheader h1 {
  float: left;
  font-size: 2.5em;
  font-family: 'Righteous', cursive
}
header#pageheader h2 {
  color: #666;
  font-size: 0.75em;
  font-weight: normal;
  text-align: right;
  padding: 20px 0 0 0;
}
nav {
  clear: both;
}

/* nav */
nav ul {
  font-size: 0.75em;
  margin: 0 0 10px 0;
  height: 30px;
  background-color: #005087;
}
nav ul li {
  float: left;
}
nav ul li a {
  display: block;
  width: 120px;
  line-height: 30px;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background-color: #005087;
  border-right: solid 1px #fff;
}
nav ul li a:hover {
  background-color: #017acd;
}

/* content */
article {
  width: auto;
}
article header h1 {
  color: #000;
  font-size: 1.8em;
  font-weight: normal;
  line-height: 45px;
  background: none;
}
article section {
  clear: both;
}
article section h1 {
  background: none;
  font-size: 24px;
  font-weight: normal;
  line-height: 22px;
  margin: 30px 0 20px 0;
}
article p {
  font-size: 0.875em;
  line-height: 1.6;
  margin: 10px 14px 0 14px;
}

/* footer */
footer {
  clear: both;
  color: #fff;
  background-color: #005087;
  margin: 25px 0 0 0;
  padding: 8px 0 8px 0; 
}
small {
  font-size: 0.75em;
  font-style: normal;
  text-align: center;
  display: block;
}

/* image */
figure {
  margin: 0;
}
article section:nth-of-type(odd) figure {
  float: right;
  margin: 0 0 15px 15px;
}
article section:nth-of-type(even) figure {
  float: left;
  margin: 0 15px 15px 0;
}
article section figcaption {
  color: #666;
  font-size: 10px;
  display: block;
  margin: 10px 0 0 0;
}
article section:nth-of-type(odd) figcaption {
  text-align: right;
}