HTML5
HTML5の宣言の書き方
2011.09.03
ではでは実際にHTML5を書いてみましょ〜！わくわく♪
html5宣言の書き方
今までは
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head>
↓
HTML5
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <title>無題ドキュメント</title>
え！？これだけで！？
って思いますよね〜＾＾今まではコピペで済ませてきたのも、これからは手打ちで出来そうです！
シンプルISベストです！！
body以下の記述
ここからが本番。
いつもどおりマークアップをし、CSSでスタイリングを行いたいのですが
新要素に関しては期待通りのスタイリングをしてくれません。
HTML5を理解していないブラウザは道の要素としてインラインとしてレタリングされてしまいます。
そのため、HTML5のブロックとしてレタリングしたい新要素にはCSSで定義しておく必要があります！
selection,argicle,aside,nav,hgroup,header,footer{display:block;}
ちょっとまった！その前にIE対策を！
IE8以下では未知の要素に遭遇すると期待通りの要素を解釈してくれません。
その為、jsを使って新要素を生成する必要があります。
- タグ内に以下を記述し
<script src="html5.js" type="text/javascript"></script>
- jsもいれましょう！
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(',');for(var i=0;i<e.length;i++){document.createElement(e[i])}})()
ただ・・・
HTML5用にJavascriptを用意するのは面倒！
色々探してたら以下を発見しました。
このライブラリを
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
cssを読み込む前に記述してください＾＾
