■

HTML５課題


HTML5の練習
html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5練習</title>
<link rel="stylesheet"href="style.css">
<!--[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>
</[endif]-->
<style>
article,aside,dialog,figure,footer,header,
hgroup,menu,nav,section{display:block;}
</style>


</head>

<body>

<header><!--▼ヘッダー-->
<h1><img src="images/logo.gif" alt="Green Leaf" ></h1>
<p>生活を楽しくする情報をもっと身近にお届けします</p>
<!--メニュ-->
<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>
<section>
<h1>森の工房について</h1>
<p><img src="images/photo01.jpg"alt="森の中の様子"width="250"height="165">
<p>Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。</p>
</section>
</section>
<h1>森の中にある工房</h1>
<p>森の中の様子 森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。</p>

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

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


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

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

<footer>
<small>Copyright (C) Green Leaf, All rights reserved.</smalll>
</footer>
</body>
</html>


style.css

@charset "utf-8";
/* CSS Document */
header{
	background-color:#017acd;
	background-image:url(image/sky.jpg);
	padding:28px 20px 98px;
	
	}
header h1{
		margin:0 0 0 20px;
		
		}
		
header h2{
	 color:#fff;
	 font-size:0.75em;
	 margin:0 0 98px 20px;
	}		
header p{
    color:#fff;	
		font-size:0.75em;
	}
nav ul{
	font-size:0.75em;
	margin:0 0 30px 0;
	padding-left:0;
	height:30px;
	background-color:#005087;
	}	
nav ul li{
	list-style-type:none;
	flaot:left;	
		}
nav ul li a{
	display:block;
	width:120px;
	line-height:30px;
	text-decoration:none;	
	text-aline:center;
	color:#fff;	
	background-color:#005087;
	border-right:solid 1px #fff;
		}	
		nav ul li a:hover {
	background-color: #017acd;
}
footer{
	 color:#fff;	
		background-color:#005087;
	  margin-top:25px;
		padding-bottom:8px;	
	}	
	small{
		font-size:0.75em;
		font-style:normal;
		text-align:center;
		display:block;
		
		}