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使って組むような時代までにはちゃんと覚えないとなー。