HTML5が話題になっているので試しに書いてみた。

01月25日（金）15:45

category: （X）HTML

HTML5公開草案初版 (First Public Working Draft) がリリースしたりで、色んなトコロで見かける今日この頃。

HTML5関連適当にリンク。

とりあえず、ボクが一つだけ言えることは、英語は分からんって事です。
えぇ。

日本語訳が充実する日を心待ちにしていようっと。

---- こっから続き

で、まぁ何を思ったか、HTML5って現状のブラウザ相手にどんくらい組めるの？
って思ったので、なんか作ってみました。（こんなの参考にもならない感じですが）

HTML5で書いてみたページ（Fxだとちゃんと見れないと思う）
HTML5で書いてみたページのダウンロード(zip:8kb)

そもそも書き方が正しいのかも分からずに書いてたので、こーじゃねーよ！っていう指摘があるとうれしいなーとか思ったりしております。

全部載せるとながったらしいので、要素のみだと以下のような感じになってます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link href="" rel="stylesheet" type="text/css" media="all">
<script src="" type="text/javascript"></script>
</head>
<body>
 
<header>
<h1></h1>
<p><b></b></p>
</header>
 
<nav>
<ul>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
</ul>
</nav>
 
<div>
 
<article>
<section>
<h2></h2>
<time></time>
<p></p>
<hr>
<figure>
<a href=""><img src="" alt="" width="" height="" /></a>
<legend></legend>
</figure>
<hr>
<ul>
<li></li>
</ul>
<p><small></small></p>
<nav>
<ul>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
</ul>
</nav>
</section>
</article>
 
<aside>
<menu>
<li><a href="" title=""></a>
   <menu>
   <li><a href="" title=""></a></li>
   <li><a href="" title=""></a></li>
   </menu>
</li>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
</menu>
</aside>
 
</div>
 
<footer>
<p></p>
</footer>
 
</body>
</html>

div要素を1ヶ所使ってるんですけど、こういう2カラムを包含する要素ってどうなるんでしょうか。
secition要素とか？

一度、dialog要素も書いてみたんだけど、IE7で変な感じになってしまったので消してます。
figure要素もlegend要素の指定が出来ないけど、使えそうな気がしないでもないような。
代わりにp要素とかでいいんかしら。

さすがに、試すには気が早すぎたのでアレですけど、あんまり複雑なデザインでもない限り、divやらclassが殆ど必要なく行けるかも。

でも、思った以上に組めたので、ちょっとワクワク。
IE6、IE7の場合は新要素にはCSSが適用出来ないんですが、JavaScriptでちょこっと書くことで、新要素にCSSが適用出来るっぽいです。

こんな感じで。

//HTML5の新要素にCSSを適用する
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("dialog");
document.createElement("figure");
document.createElement("audio");
document.createElement("video");
document.createElement("embed");
document.createElement("m");
document.createElement("meter");
document.createElement("time");
document.createElement("canvas");
document.createElement("command");
document.createElement("datagrid");
document.createElement("details");
document.createElement("datalist");
document.createElement("datatemplate");
document.createElement("rule");
document.createElement("nest");
document.createElement("event-source");
document.createElement("output");
document.createElement("progress");

今回の実験ではコレ使ってます。

まー、何はともあれ、今後が楽しみなような不安なようなそんな感じです。
普通にHTML5使って組むような時代までにはちゃんと覚えないとなー。

各種SBMに追加