HTML5やCSS3を駆使した「次世代の可能性」を感じるサイト

ここ2～3年の間で、HTML5／CSS3に関連するブログ記事のエントリーやセミナーなども増えて、これらのキーワードもすっかり定着してきました。
このブログをご覧いただいている方も、各々抱えられているweb系の業務案件で、大なり小なりHTML5やCSS3などの技術を取り入れている方、その可能性を体験している方がほとんどではないでしょうか？

今回のエントリーでは、HTML5／CSS3／jQueryなどを組み合わせることによってどんどん変化していっている"webサイトの表現"について、事例をご紹介したいと思いますが、まず始めに少しだけおさらいを書かせてもらいます。

HTML5とは？

今さらなのであまり詳しい説明は書きませんが、過去に弊社HP内で私が書いたコラム『次世代を担う技術「HTML5」について』から引用しますと、

"現在のwebコンテンツで、最も一般的に使われているHTMLの標準仕様は「HTML4（4.01）」ですが、この仕様は、W3C（World Wide Web Consortium）が1997年に勧告を出し、その後10年以上もの間使用されています。途中、XMLをベースとした「XHTML」が導入され、現在ではそちらが主流になっているものの、10年以上使用されている「HTML4（4.01）」では、アプリケーションなどが台頭することで大きく変化している「webの使われ方」の新しい潮流に対応しきれなくなってきた"

"InternetExplorerやMozilla FireFox、Safari、Chrome、Operaなど、現在様々なwebブラウザがリリースされていて、ユーザーそれぞれが好みに合わせて使用し、必要に応じてプラグインをインストールして。。。というような利用をしていますが、「あるブラウザでは問題なく表示・動作していたレイアウトやプログラムが、別のブラウザでは正常に表示・動作しない」といったwebブラウザ間での互換性が低いことも問題点"

「アプリケーション機能の強化（拡張）」と「プラットフォームの安定性向上」を大きな目的とし、webが抱える様々な問題点を克服することで、次のステージへ進めようとしている新しい仕様のことです。

CSS3とは？

従来のCSS2に新しい要素や便利な機能が追加され、装飾・表現できることがパワーアップしたCSSです。

具体的には、

従来の「RGB」などの色指定に加え、アルファ「A」（透明度）の指定が可能に。
従来の単色指定に加え、グラデーションの色指定が可能に。
背景画像の複数指定が可能に。
テキストやボックスにドロップシャドウ効果が追加。
ボックスを角丸にすることが可能に。
アニメーション効果の付加・制御することが可能に。

などが代表として挙げられます。

例えば、今まではボタン一つ一つを画像で作成し、管理が大変だったものが、CSSで制御・管理することが可能になったり、専門的な知識が必要だったFlashで表現しなければいけなかったアニメーションをCSSで制御することが可能になったり、CSSで表現できることが格段にパワーアップしました。

特に、最後に挙げた「アニメーション効果」については、
どんな種類があるのか、以下のサイトによくまとまっていました。

Animatable：http://leaverou.github.com/animatable/

事例

上述のHTML5／CSS3や、jQueryなどを駆使した、次世代の可能性を感じるwebサイトの事例をいくつか集めたのでご紹介します。

20 Things I Learned About Browsers and the Web：http://www.20thingsilearned.com/ja-JP/home

Google Chromeチームが提供する「20 Things I Learned About Browsers and the Web（ブラウザやウェブについて知っておきたい 20 のこと）」のwebサイト。HTMLの進化についても書かれていて、参考になります。
コンテンツは絵本形式になっていて、絵本の中のかわいいイラストが動きながらナビゲーションしてくれます。

Nike Better World：http://www.nikebetterworld.com/