HTML5でデザインのカスタマイズ

サイト制作「Green Leaf」

最新機能に未対応なブラウザへの対応は、「プログレッシブ・エンハンスメント」や「グレースフル・グラデーション」と呼ばれる考え方に従い、表示が崩れ、閲覧に問題が出る場合にのみおこないます

DEMO

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>森の工房について</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<!-- コンテナ -->
<div id="container">

<!-- ヘッダー -->
<header id="pageheader">
<hgroup>
<h1><img src="images/logo.gif" alt="Green Leaf" /></h1>
<h2>生活を楽しくする情報をもっと身近にお届けします</h2>
</hgroup>

<!-- メニュー -->
<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>
</header>

<!-- コンテンツ -->
<article itemscope itemtype="http://schema.org/Article">
<header id="postheader">
<h1 itemprop="name">森の工房について</h1>

<p id="summary" itemprop="description">Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。</p>
</header>

<div itemprop="articleBody">
<section>
<h1>森の中にある工房</h1>

<p><img src="images/photo01.jpg" alt="森の中の様子" width="250" height="165" class="photo-odd" />
森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。</p>

<p>この丘はちょうど森の中央に位置しており、森の中を散歩したり、自然の中で遊んだりするときにも、ちょうどいい拠点になります。森全体を見渡すことも可能で、夜は満点の星空を満喫できます。</p>
</section>

<section>
<h1>四季を楽しむことができる場所</h1>

<p><img src="images/photo02.jpg" alt="冬の風景" width="250" height="165" class="photo-even" />
森の工房では、春、夏、秋、冬と、四季折々の自然を楽しむことができます。<br />
春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな緑。夏には、緑濃く茂った木々の間を吹き抜けるさわやかな風に、川の清流での水遊び。秋には、森全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、冬になると、ここは雪に覆われて一面の銀世界になります。</p>
</section>

<section>
<h1>工房のまわりにいる動物たち</h1>

<p><img src="images/photo03.jpg" alt="キツネさん" width="250" height="165" class="photo-odd" itemprop="image" />
工房のまわりにはいろいろな動物たちが棲んでいます。キツネ、タヌキ、イタチ、ウサギ、リス、シカ、イノシシ…。森の中で出会うこともあれば、ひょこっと工房に顔を出すこともあります。土や雪の上に残った足跡から、正体を探るのも楽しみです。</p>

<p>ただし、森の工房では彼らに餌をやることはしていません。自然にあるがままの姿で、いっしょに生活していきたいと考えているからです。彼らに出会ったときには、びっくりさせないように遠くからそっと眺めてあげてください。</p>
</section>
</div>

</article>

<!-- フッター -->
<footer>
<small>Copyright (C) Green Leaf, All rights reserved.</small>
</footer>

</div>

</body>
</html>

@charset "utf-8";
a	{
  color: #017acd;
}

/* コンテナ */
div#container	{
  width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ヘッダー */
header#pageheader	{
  background-color: #017acd;
	background-image: url(../images/sky.jpg);
	padding: 28px 0 0;
}

header#pageheader h1 {
  margin: 0 0 0 20px;
}

header#pageheader h2 {
  color: #ffffff;
	font-size: 0.75em;
	margin: 0 0 98px 20px;
}

/* メニュー */
nav ul {
  font-size: 0.75em;
	margin-top: 0;
	margin-bottom: 30px;
	margin-left: 0;
	padding-left: 0;
	height: 30px;
	background-color: #005087}

nav ul li	{list-style-type: none;
	float: left}

nav ul li a	{display: block;
	width: 120px;
	line-height: 30px;
	text-decoration: none;
	text-align: center;
	color: #ffffff;
	background-color: #005087;
	border-right: solid 1px #ffffff}

nav ul li a:hover	{
  background-color: #017acd;
}

/* コンテンツ */
article	{
  width: 564px;
	margin-left: auto;
	margin-right: auto;
}

article header h1	{
  background-color: #014471;
	background-image: url(../images/bar-darkblue.png);
	background-repeat: no-repeat;
	font-size: 1em;
	color: #ffffff;
	line-height: 45px;
	padding-left: 12px;
	margin-bottom: 0; 
}

article section h1 {
  background-color: #ffffff;
	background-image: url(../images/maru-skyblue.png);
	background-repeat: no-repeat;
	background-position: 0px 2px;
	font-size: 0.875em;
	line-height: 22px;
	padding-left: 26px;
	margin-top: 30px;
	margin-bottom: 0;
	margin-left: 12px;
	margin-right: 12px;
}

article p	{
  font-size: 0.75em;
	line-height: 1.6;
	margin-top: 10px;
	margin-left: 12px;
	margin-right: 12px;
}

/* フッター */
footer {
  color: #ffffff;
	background-color: #005087;
	margin-top: 25px;
	padding-top: 8px;
	padding-bottom: 8px;
}

small	{
  font-size: 0.75em;
	font-style: normal;
	text-align: center;
	display: block;
}


/* 画像の配置 */
img.photo-odd	{
  float: right;
	margin-left: 15px;
	margin-bottom: 15px;
}

img.photo-even {
  float: left;
	margin-right: 15px;
	margin-bottom: 15px;
}

HTML5のテンプレートを生成できるジェネレーター

HTML5テンプレートジェネレーター

見城さんのお話は興味深かったです。幻冬舎ですら、もう15年近く経ちますね。