基本的な考え方

基本的に「HTML5、CSS3を積極的に使うのは、まだ問題がある」と考えています。一番のネックは非対応ブラウザのシェアが多いことです。非対応ブラウザの主なものとしては、InternetExplorerの8以下のバージョン。今のところ、これらがInternetExplorer9にバージョンアップするか、他のブラウザに換えるのを待つしかありません。対応ブラウザが普及して大部分を占めるようになるまでには、もうしばらく時間がかかるでしょう。

非対応ブラウザではHTML5、CSS3のメリットが十分に活かされません。使い方によっては、アクセシビリティ、ユーザビリティ、メンテナンス性を損なうことにもなります。

しかし、サイトの内容、閲覧者の特性によっては、HTML5、CSS3を使ったほうがよい場合もあります。スマートフォンに特化したサイト（スマートフォンに搭載されたブラウザの多くはHTML5、CSS3に対応している）や、閲覧者の多くが最新のブラウザを使用しているサイトなどでは、HTML5、CSS3を使っていくほうがよいでしょう。

数年後にはHTML5、CSS3への移行が大々的に行われることは間違いありません。検索エンジンやソーシャルメディアとの親和性、動画や画像の組み込み、操作性の向上など、大きなメリットがあるからです。そのとき、スムーズにローコストでHTML5、CSS3に移行できるように、今から配慮していくことが重要です。

HTML5

HTML5はまだ策定中の段階で、今後仕様が変更・追加される可能性もあります。HTML5対応のブラウザと謳っていても、HTML5の全ての要素・属性に対応しているわけではありません。ブラウザによって、対応していない要素・属性もあります。

それぞれの要素・属性ごとに、各ブラウザの対応状況を見て、使用の是非を判断する必要があります。

• HTML5非対応ブラウザのユーザーが半数を超えている間はHTML5を用いない。
• HTML5を用いなかった場合でも、HTML5への移行（書き換え）作業が容易にできるよう配慮する。将来的にHTML5の新要素でマークアップできる部分は、HTML要素に適当なidまたはclassをふり、規則性をもって新要素に置換できるようにしておく。
• HTML5対応ブラウザのユーザーが大部分を占めるサイト、HTML5対応ブラウザに特定したサイトでは、必要に応じてHTML5を用いる。
• HTML5を用いる場合、非対応ブラウザに対しては、Javascriptなどで大きな支障がないように処置する。

CSS3

CSSへの対応はブラウザによってまちまちです。CSS3だけでなく、CSS2.1にも、ブラウザによって未対応のプロパティや疑似要素、疑似クラスなどがあります。CSSはバージョンを問わず、各ブラウザの対応状況を見て、使用の是非を判断する必要があります。

• 必須の要件でないならば、角丸の囲み、背景のグラデーション、ドロップシャドウなどの視覚的デザインは、非対応ブラウザで適用されなくても支障がないようにしたうえで、追加的にCSS3のプロパティを用いる。（CSSのプログレッシブ・エンハンスメント）
• 非対応ブラウザでの視覚的デザインを施すために、本来不要なdiv、span要素やclass属性を加えることは避け、疑似要素、疑似クラスに対応したブラウザの普及に備える。例えば、表の一行おきに異なる背景色入れるために、各tr要素にclassをふるようなことはせず、:nth-child() を用いる…など。それまでの代替方法として、状況に応じてJavascript（jQueryなど）を用いる。