HTML5 + CSS3 sample page

Showcase

HTML5とCSS3によるサンプルページです。

画像を使用せず、1ファイルに収められたHTML(CSS、JavaScriptを含む)で全てを表現しています。

サンプルページを表示

HTML4.x、CSS2に実装されていなかったものとしては、

  • canvasタグの使用・・3枚のメモを留めているピン部分
  • CSS animationの使用・・タイトルやメモなど、動きのある箇所
  • CSS gradationの使用・・背景全般
  • CSS dropshadowの使用・・ブロック要素全般
  • CSS columnの使用・・ページ下部の4段組

などが使用されています。

webkit用のCSSを中心に記述してありますので、Apple Safari、Google Chromeなどで正しく表示されます。実用上では、Mozilla向けのCSSを併記することで、FireFoxなどについても同様の機能を実現することができます。

デザイン面や、アニメーションについての要件をマークアップとスタイル記述、スクリプト記述で制御できることは、CMSを含むさまざまなWebサービスを利用しつつ、ヴィジュアル面でも妥協のないサイトを構築することができるようになったことを意味します。

また、このサンプルに含まれていない重要なアップデートである、ローカルストレージの実装が進めば、Webサービスと同様なページ生成をローカルで行うこともできるようになります。マッシュアップはますます水平方向から垂直方向を併せた、レイヤードスタイルになっていくと予想されます。

Leave a Reply