構造化タグを用ぁEソースコーチE/h3>
sample.html
<!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の構造化タグを使った練習Eージ、Elt;/p>
</article>
<article class="post">
<h2>記事タイトルEElt;/h2>
<p>ブログのトップEージの構造になります、Elt;/p>
</article>
<footer id="foot"><a href="./">サイト名</a></footer>
</div>
</body>
</html>
style.css
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;
}
IE対筁EソースコーチE/h3>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if lte IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
の部刁EE、IEだとhtml5を裁EしてぁEぁEEで、html5のタグを認識してくれません、Ebr />
なので、これをぁEなぁE
のように表示されてしまぁEす、Ebr />
※body,divタグのwrapは判別されてます、Ebr />
とぁE事で、E刁Eソースをダウンロードして斁E変更したりarticleを足したりしてみましょぁEEbr />
手を動かすとぐっとhtml5が身近な存在になります、Ebr />
あとは、このサイトにあるコードを付け足して色、Eしてみてください、Ebr />