omas/sample_a.css

## sample_a.css
a {
color: #017acd;
}

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

header	{
background-color: #017acd;
background-image: url(sky.jpg);
padding: 28px 20px 98px;
}

div#header h1	{
margin: 0;
}

div#header p	{
color: #ffffff;
font-size: 0.75em;
margin: 0;
}

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

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

ul#menu 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;
}

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

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

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

div#content h3	{
background-color: #ffffff;
background-image: url(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;
}

div#content 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;
}


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

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

## sample_a.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>森の工房 [Forest Studio] - 森の工房について</title>
	<link rel="stylesheet" href="sample_a.css">
</head>
<body>

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

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

		<!-- メニュー -->
		<ul id="menu">
			<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>


		<!-- コンテンツ -->
		<div id="content">
			<h2>森の工房について</h2>

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


			<h3>森の中にある工房</h3>

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

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

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

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

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

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

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

		</div>

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

	</div>

</body>
</html>
	a {
	color: #017acd;
	}

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

	header {
	background-color: #017acd;
	background-image: url(sky.jpg);
	padding: 28px 20px 98px;
	}

	div#header h1 {
	margin: 0;
	}

	div#header p {
	color: #ffffff;
	font-size: 0.75em;
	margin: 0;
	}

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

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

	ul#menu 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;
	}

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

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

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

	div#content h3 {
	background-color: #ffffff;
	background-image: url(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;
	}

	div#content 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;
	}


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

	img.photo-even {
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>森の工房 [Forest Studio] - 森の工房について</title>
	<link rel="stylesheet" href="sample_a.css">
	</head>
	<body>

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

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

	<!-- メニュー -->
	<ul id="menu">
	<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>


	<!-- コンテンツ -->
	<div id="content">
	<h2>森の工房について</h2>

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


	<h3>森の中にある工房</h3>

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

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

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

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

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

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

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

	</div>

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

	</div>

	</body>
	</html>