スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HTML5について調べてみた

そろそろHTML5について調べておいた方がいいかなと思い、練習してみました。

HTML5については、「html5doctor - HTML5.JP」が参考になります。このサイトを見ながら、簡単にHTML5を使ったサンプルを作ってみました。

HTML5のサンプル

まず、HTML5のDOCTYPEは、
<!DOCTYPE html>
たったこれだけ!めっちゃシンプルですね。これならコピペしなくてもすぐに手書きできそうです。

文字コードの設定は、
<meta charset="UTF-8">
これまたシンプル。HTML5はシンプルというか、より直感的に記述できるようになっているようですね。


新しく追加された要素も従来の記述方に比べて直感的で意味づけされたマークアップが可能になっているように感じます。

例えば、header部分を見てみると、従来は、
<div id="header">
  <h1>見出し</h1>
</div>
といった記述が多かったのに対して、HTML5では、
<h1>見出し</h1>
というように、要素における意味合いが強まっています。nav要素やfooter要素についても同様ですね。


これらの新しい要素にスタイルを設定する際に、気をつけなければいけないことがひとつ。それは、このままだとブラウザによってはスタイルが適用されない場合があるということ。IE以外の主要ブラウザにスタイルを適用させるために、各要素に display: block; を設定する必要があります。

これは reset.css に追記しておくと便利なようです。(新しい要素は他にもあります。下記はあくまでサンプルで使用した要素のみ)
header, nav, footer, article, aside, section {
	display: block;
}
しかし、これだけではIEでスタイルが適用されません。要素として認識されていないためです。その対策として、次のようにJavaScriptを使うとIEでもスタイルが適用されます。



ひとまずこれでサンプルを作成してみました。article、aside、section の使い方がまだ曖昧なので、間違っているところがあればコメントなどでご指摘いただけると助かります。


HTML5は今からでも使うことはできますが、W3Cに勧告されるのは2022年という話もあるようで、今後の情報はしっかりと追い続けたいですね。あと、HTML5とXHTMLの関係も気になります。



- 2009/10/13 追記 -

Canvas要素で線形、矩形、円形を描くサンプルを追加しました。

Canvas要素については、「Canvas - HTML5.JP」が参考になります。


新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。