+ E-SHIFT WEB DESIGN - イーシフトウェブデザイン

ホームページをHTML5化

検証、勉強を目的として、当ホームページのHTML5化を行いました。

当ホームページは、WordPress（ワードプレス）のテーマ方式で制作しています。よって、既存テーマ（XHTMLバージョン）を複製して必要な箇所を書き換え、新たなHTML5バージョンのテーマセットとする形で進めました。この方法であれば、テーマセットの差し替えのみでほぼ作業完了となりますし、不具合を見つけた場合もすぐ元に戻せるので、運用中のホームページでも低リスクで移行できます。

元々、ホームページを現行デザインにリニューアルする際に、HTML5化を意識してXHTMLの構造を設計していたため、移行作業は想像以上に少なくて済みました。

具体的には、以下のような作業を行っています。

1. head要素内の省略可能な部分を削除
2. IEでHTML5の新要素を使えるように、JavaScriptを設置（オープンソースのライブラリを使用）

   <!--[if lt IE 9]>
   <script
    src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
   </script>
   <![endif]-->
   

3. XHTMLのマークアップをHTML5用に修正

   <div id="header">...</div>
   を
   <header>...</header>
   
   <div id="sidebar">...</div>
   を
   <nav id="sidebar">...</nav>
   
   <div class="section">...</div>
   を
   <section>...</section>
   などに変更
   
   シングルページについては
   <div class="section">...</div>
   を
   <article>...</article>
   に変更
   

4. これらに応じてCSS（スタイルシート）を修正

   article, aside, dialog, figure,
   　footer, header, hgroup, nav, section { display:block; }
   

5. WordPressでHTML5バージョンのテーマに差し替え

その他、WordPress（ワードプレス）のページ機能で制作しているページについては、一部コンテンツ側でタグの変更を行いました。

ざっとこんな感じです。特に問題なく移行できました。

現在、HTML5についても、W3C Markup Validation Serviceのページから正しい記述であるかのチェックができるようです。

* 当ホームページ右下のリンク（ Valid HTML5 ）からの場合、IEだとうまくチェックできないようです。

Category: topics | Posted: 2010.08.28 13:52