html5で書いてみよう

まずは自分の手でもhtml5を書いてみましょう。
しかし、「html5で書く」といっても難しい事はなく、ソースコードの出だし(宣言部)を

<!DOCTYPE html>
<html lang="ja">

で、書けだせば、それはhtml5のコードとなります。
既にhtml4で書いてあるコードも、この宣言部を変えれば一応html5のコードという事になります。
しかし、それではhtml5にしても意味がないので、構造化タグと少しCSSを加えたモノを用意しました。
ダウンロードするかソースをコピペして保存して使用してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>HTML5 練習</title>
<link rel="stylesheet"
 type="text/css" 
media="screen" 
href="style3.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>HTML5 練習</h1></header>
<nav id="navi"><ul>
<li><a href="./">
Home</a></li></ul></nav>
<article class="post">
<h2>記事のタイトル</h2>
<p>html5の構造化タグを使った練習ページです。</p>
</article>
<article class="post">
<h2>記事タイトル2</h2>
<p>ブログのトップページの構造になります。</p>
</article>
<footer id="foot"><a 
href="./">サイト名</a></footer>
</div>
</body>
</html>
</html>

CSSの例

@charset "utf-8";
/* CSS Document */

body{
	text-align:center;
	font-family: "メイリオ";
	font-size: 14px;
}

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

表示はこんな感じです
html5prac

広島 ホームページ制作 フィズコミュニケーションズ