html5入門
html5で書ぁEみよう
「習うより慣れろE」とぁE言葉がありますが、まずE自刁EE手でもhtml5を書ぁEみましょぁEE
しかし、「html5で書く」とぁEても難しい事Eなく、ソースコードE出だし(宣言部Eを
<!DOCTYPE html>
<html lang="ja">
で、書けだせE、それEhtml5のコードとなります、Ebr /> 既にhtml4で書ぁEあるコードも、この宣言部を変えれE一応html5のコードとぁE事になります、Ebr /> しかし、それではhtml5にしても意味がなぁEEで、構造化タグと少しCSSを加えたモノを用意しました、Ebr /> ダウンロードするかソースをコピEして保存して使用してください、Ebr />

チE画面とダウンロードファイル

IEScript.gif
チE画面E別ウインドウ表示EE/a>
ダウンロードファイルEhtml5_sample1.zip(1KBEE/a>

構造化タグを用ぁ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
noIEScript.gif
のように表示されてしまぁEす、Ebr /> ※body,divタグのwrapは判別されてます、Ebr />
とぁE事で、E刁Eソースをダウンロードして斁E変更したりarticleを足したりしてみましょぁEEbr /> 手を動かすとぐっとhtml5が身近な存在になります、Ebr /> あとは、このサイトにあるコードを付け足して色、Eしてみてください、Ebr />
Copyright html5入門
All Rights Reserved.
html5入門

html5で書ぁEみよう

「習うより慣れろE」とぁE言葉がありますが、まずE自刁EE手でもhtml5を書ぁEみましょぁEE
しかし、「html5で書く」とぁEても難しい事Eなく、ソースコードE出だし(宣言部Eを
<!DOCTYPE html>
<html lang="ja">
で、書けだせE、それEhtml5のコードとなります、Ebr /> 既にhtml4で書ぁEあるコードも、この宣言部を変えれE一応html5のコードとぁE事になります、Ebr /> しかし、それではhtml5にしても意味がなぁEEで、構造化タグと少しCSSを加えたモノを用意しました、Ebr /> ダウンロードするかソースをコピEして保存して使用してください、Ebr />

チE画面とダウンロードファイル

IEScript.gif
チE画面E別ウインドウ表示EE/a>
ダウンロードファイルEhtml5_sample1.zip(1KBEE/a>

構造化タグを用ぁ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
noIEScript.gif
のように表示されてしまぁEす、Ebr /> ※body,divタグのwrapは判別されてます、Ebr />
とぁE事で、E刁Eソースをダウンロードして斁E変更したりarticleを足したりしてみましょぁEEbr /> 手を動かすとぐっとhtml5が身近な存在になります、Ebr /> あとは、このサイトにあるコードを付け足して色、Eしてみてください、Ebr /> html5で書ぁEみようEhtml5の特徴