今回の見た目はほとんど変わらないリニューアルですが、HTML的にがらっと変えました！
XHTML→HTML5にです！

正直、HTML5は新しい要素に対応していないInternet Explorerなどのブラウザのシェアがもっと減らないと使えないなと思っていたのですが、ちょっとしたJavaScriptを使うだけで対応出来ると言うことが分かったので、さっそく勉強も兼ねてこのサイトを改造してみました。

---

HTML5の要素の使い方

要素の使い方などは一言で説明できないのですが、私は「CSS Nite in OSAKA, Vol.20」で勉強しました。
羽田野 太巳さん著の「徹底解説HTML5マークアップガイドブック」 がこれから勉強する方にはおすすめです。

参考にしたサイト

• 【HTML5.jp】 http://www.html5.jp/
  HTML5の情報が盛りだくさんなサイト
• 【HTML5.jp：HTML5 タグリファレンス > HTML 要素】 http://www.html5.jp/tag/elements/index.html
  HTML5.jpさん内のタグリファレンス
• 【Validator.nu (X)HTML5 Validator】 http://html5.validator.nu/
  正しいHTML5かチェックができます。

イベントで勉強したからと言って、実際に組むときには迷うことがありました。
その場合はHTML5.jpなどHTML5で組まれているということを知っているサイトのソースを覗いて参考にさせていただきました。

IEでもHTML5にしても問題がでなくなるJavaScriptなどは（他にも一緒に書きたいこともあるし）長くなりそうなのでまた、別の機会に書きますね！

---

使用エディタ

Dreamweaver CS5でコーディングしたのですが、素のDreamweaver CS5だとまだHTML5に対応していません。
そこで！こちらの拡張を入れて作業をしました。

• HTML5 Pack for Dreamweaver CS5 http://www.adobe.com/jp/devnet/dreamweaver/articles/html5_update_for_dwcs5.html

---

Dreamweaver CS5のバグ？ 私だけ？？

HTML5＋文字コードUTF-8でDWのテンプレート機能を使ったら、テンプレートを更新すると文字コードがなぜかShift-JISになってしまうのですよ。metaの記述はUTF-8のままですよ。
miで開いてUTF-8に直したりしてるのですが、うっかり文字コードの修正を忘れて連続でテンプレ更新するとそのテンプレを参照しているファイルが腐るので怖いです！！
一度Dreamweaver CS5をインストールをし直してみたのですが治らないです...。いったい何なんでしょうか。
ちなみにMac版です。Windows版では試してないので、そのうち試してみます。

追記：2010/12/27

メタタグの文字コードの記述をHTML5以前の方法にすると、文字コードが保たれるみたいです。
詳しくはこちらのサイトで！→ Dreamweaver CS4 でテンプレートを適用すると文字化けする件。
DW CS5の環境設定で「フォント」をUTF-8にしたり、「新規ドキュメント＞エンコーディング初期設定：エンコーディングが指定されていない〜」をUTF-8にしてチェック入れたりしてるのですが、ダメですよ。
HTML5のメタタグの指定方法は簡単になってよかったのに、DWテンプレの時はXHTML方式とかで書く方がよさげですね...。（残念！！！）

---

HTML5について思うこと

今回、新しい技術に触れ楽しくHTML5と戯れてみましたが、実際の案件でHTML5を使うメリットがあるのかと言う問題とはまた別ですね。
Flashが使えないiPhoneなどで動画を再生したいサイトなどでvideo要素を利用するためにHTML5を使うって言うのはよく聞きます。
Canvasも注目されていますが今はまだ絵を描くのにガリガリJavaScriptを書かなくてはいけないので、一般的なサイトで使うにはまだ現実的ではないと思います。
でも、HTML5でサイトを作成しても害はないし、仕様が決まっていない便利機能が使えるようになったらすぐに取り込めるように、HTML5で作っておくのもいいのではないでしょうか。