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を読み込む前に記述してください^^

  • このエントリーをはてなブックマークに追加



rss
上矢印
ページTOPへ