html5縺ｧ譖ｸ縺・※縺ｿ繧医≧

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>繧ｵ繧､繝亥錐</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="wrap">
<header id="head"><h1>繧ｵ繧､繝亥錐</h1></header>
<nav id="navi"><ul><li><a href="./">Home</a></li></ul></nav>
<article class="post">
<h2>險倅ｺ九ち繧､繝医Ν</h2>
<p>html5縺ｮ讒矩��蛹悶ち繧ｰ繧剃ｽｿ縺｣縺溽ｷｴ鄙偵・繝ｼ繧ｸ縲・lt;/p>
</article>
<article class="post">
<h2>險倅ｺ九ち繧､繝医Ν・・lt;/h2>
<p>繝悶Ο繧ｰ縺ｮ繝医ャ繝励・繝ｼ繧ｸ縺ｮ讒矩��縺ｫ縺ｪ繧翫∪縺吶�・lt;/p>
</article>
<footer id="foot"><a href="./">繧ｵ繧､繝亥錐</a></footer>
</div>
</body>
</html>

body{
text-align:center;
}

#wrap{
width:500px;
margin:0 auto;
text-align:left;
border:solid 1px #333;
}

#head {
padding:10px;
border-bottom:solid 1px #333;
}

#navi {
border-bottom:solid 1px #333;
}

.post {
padding:10px;
}

#foot {
border-top:solid 1px #333;
text-align:center;
padding:10px;
}