クリスマスに考えるHTML5とCSS3

こんにちは！WebデザイナーのMihoです。
クリスマス前のこの時季、Advent Calendarの扉を開くのが、毎日の楽しみです。
12月1日からクリスマスまで、毎日ひとつずつ扉を開いていくカレンダーで、
扉の中には、カワイイ絵が書かれていたり、チョコレートが入っていたり、
様々なタイプのものが売られています。
最近「HTML5 & CSS3を紹介するAdvent Calendar」を見つけました。
扉を開くと「HTML5 & CSS3」に関する様々なテクニックが紹介されています。
今回は、このAdvent Calendarを元に、
「HTML5 & CSS3」について触れてみたいと思います。

HTML5 & CSS3の導入は、
ユーザ環境を考慮する必要がある

「HTML5 & CSS3」を使用すると、様々な視覚効果が実現可能ですが、
ユーザ環境（OSやブラウザ）によって、見え方が異なります。
例えば、今回ご紹介したAdvent Calendarは、
Safariで見ると、「扉が開く効果」が綺麗に現れるのですが、
ChromeやFirefoxで見ると、「扉が開く効果」を見ることが出来ません。
IE6に至っては、かなり崩れて見えます。
「ブラウザ別HTML5・CSS3対応状況」や
「全世界ブラウザシェア」を考慮すると、現時点では、
未対応ブラウザで見た場合でも、ユーザビリティに影響が出ないよう、
十分配慮して「HTML5 & CSS3」を導入する必要があります。

HTML5 & CSS3だけで、
様々な視覚効果が実現できる

上述のAdvent Calendarのサイト上で、12月1日を開いてみてください。
車の画像にカーソルを載せると、様々な効果が現れます。
これは、今までは、FLASHなどを使用しないと出来なかったことです。

次に、12月12日を開いてみてください。
「斜め」「3D」「ネオンサイン風」など、様々なタイプのテキストが並んでいます。
これは、今までは、グラフィックソフトを使用して、
テキストを”画像化”しなければ、実現出来なかったことです。

HTML5 & CSS3で、
更新作業が楽になる

上述のように「HTML5 & CSS3」を使用すれば、
グラフィックソフトを使用しなくても、コードをちょっと修正するだけで、
様々な要素（色・動き等）を変更できます。
ですので、更新作業の工数を減らすことが出来ます。

HTML5 & CSS3は、
スマートフォンに最適

通常、スマフォのアプリは、他のデバイスでは動きません。
例えば、iPhoneアプリは、AndroidやWindows Phone 7では動作しません。
しかし、HTML5で開発されたアプリであれば、どのデバイスでも動きます。
人気のあるアプリが、デバイスを選ばずに使えるということは、
開発者側とユーザー側、双方のメリットになります。
元々、歴史の浅いスマートフォンは、
最初からHTML5対応のブラウザが搭載されていることが多いので、
HTML5の使用を前提にした開発がしやすいのです。
尚、Adobeが、2011年11月9日、
「モバイル版Flashの開発を中止し、モバイル分野では、
HTML5に注力する」と正式発表しました。
　
　
「HTML5」自体は、2014年までの正式勧告が予定されている段階なので、
導入にあたっては、様々な側面を考慮する必要がありますが、
「HTML5 & CSS3」を使用したサイトは、どんどん増えてきているので、
またの機会に、具体的な事例をご紹介したいと思います。