2010/05/17

xhtml1.0をHTML5にしてみる

まずは手始めに、手元にあるxhtml1.0をhtml5っぽくしようと思います。

1.DOCTYPE宣言やhead周りの変更

主に宣言文の変更ですが、

に変更。

xhtml1.0に比べると、あまりにも記述する量が少ないので心配になるが、ひとまずこれで。

2、html5専用のタグを使ってみる

一番やってみたかったのがこれ。
headerやnav、footerなど今まで任意で名前を付けてidやclassにしていたものが、
専用のタグとして利用できるようになった。
<div id="header"> ~ </div>

<header> ~ </header>
に。
<div id="footer"> ~ </div>

<footer> ~ </footer>
に、
他にもナビゲーション部分に<nav>を使ってみたりする。
これだけでも、だいぶhtml5っぽくなった気がする。

あとは、既存のcssの調整。
headerやfooterはidやclassではなく、タグの扱いになるので、
#header{ }

header{ } 、
#footer{ }

footer{ } などに修正。

3.IEに対応させる

IEはHTML5の新要素に対応していないため、
ie9.jsというJavascriptを使用する。
使い方は<head>内に下記ソースコードを追加し、該当するフォルダにie9.jsを配置するだけ。

それで何ができるかというと、

  • ・擬似クラス対応
  • ・属性セレクタ対応
  • ・透過PNG対応
  • ・position:fixed対応
  • ・margin:0 auto;対応
  • ・max-height,width対応
  • ・min-height,width対応
  • ・E5/6のバグを修正

といった機能が適応されるようです。

ie9.jsはこちらから

以上で作業は完了!

個人的に気になっている個所は、
section、article、asideなどのセクショニンングのタグをどの場面で使うかが 微妙ということ。
これは引き続き他のサイトを見て勉強しようと思う。

サンプルサイトStandard
以前実案件で作成した 岩手のスポーツ雑誌「Standard」を上記の手順をもとにhtml5化してみました。

この記事に関するお問い合せ

株式会社クーシー 担当:三上
TEL:019-656-0003 E-mail:mikami@coosy.co.jp

HTML5の研究活動一覧へ戻る
COOSY Inc. Head Office : F Nissei Ebisu Bldg.7F 3-16-3 Higashi Shibuya-ku,Tokyo,Japan Laboratory : IPU Innovation Center 2-7, 152-409 Sugo Takizawa-shi,Iwate,Japan

Top of Page