DesignWalker

現在、徐々に各ブラウザの対応が進められているHTML5。動画やオーディオ再生、アニメーションなどの要素が実装されていて、iPhoneやiPadがこのままFlashを採用しないままなのであれば、今後、HTML5が普及してしまえば、Flashは必要なくなる！？なんて意見もあるほどです。

ウェブデザインに関わる方々は、今のうちからちょっとした概要だけでも見ておいて損は無いのではないでしょうか。

というわけで、今回はHTML5で構築されているテンプレートやフレームワークなどをまとめてみました。

HTML5でコーディングされたサイトを見て、実際にどのように構築されているのか勉強してみてくださいね。

Coding A HTML 5 Layout From Scratch

おなじみSmashing Magazineさんから提供されている、スクラッチからコーディングするHTML5のチュートリアル。各ブラウザへの配慮などかなり詳しく解説されています。

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

HTML5とCSS3で構成されたテンプレートを構築するチュートリアル。CSSもしっかり解説してくれています。

52Framework – first ever html5 and css3 framework

52Frameworkは、HTML5とCSS3で構成されたフレームワーク。このファイルをもとにデザインを組み込んでもよさげですね。

Less Framework

こちらもHTML5で構築されたCSSフレームワーク。こちらのフレームワークもシンプルで使いやすそう。

Free HTML5 Templates | Bringing modern web standards to everyone

HTML5とCSS3のテンプレートをたくさん集めて掲載してくれているまとめサイト。ブラウザでそのまま確認できるデモとファイルのダウンロードが用意されています。

Design & Code a Cool iPhone App Website in HTML5

こちらはPhotoshopのデザイン作業からHTML5のコーディング作業までを紹介してくれているチュートリアル。初心者の方にはとても参考になるのではないでしょうか。

Build a HTML5/CSS3 Website Layout Without Images

画像を一切使わずに、HTML5とCSS3で構築されたレイアウトサンプル。こちらは、ファイルもまとめてダウンロードできるので、興味のある方はダウンロードして、コードの中身を研究してみてくださいね。

HTML5 Starter Pack – a sick freebie

HTML5のスターターパックとして公開されています。こちらのファイルをもとにデザインを進めてみてください。

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

とっても洗練されたデザインのHTML5のファイルを無料でダウンロードできます。

Coding a CSS3 & HTML5 One-Page Website Template

メニューをクリックするとコンテンツまでスライドしてくれるエフェクトも備えたHTML5とCSS3のテンプレートです。

Gotta’ love HTML5 & CSS3

HTML5とCSS3で構築されたギャラリーページのテンプレートです。画像にマウスオーバーすると半透明のレイヤーで画像の説明文が表示されます。

A free HTML5 and CSS3 theme

ちょっぴりポップなHTML5とCSS3のテンプレート。こちらもファイルをまとめてダウンロードできます。

Free HTML5 template | Web design London

2カラムと3カラムバージョンの2種類のテンプレートが公開されています。

OWMX 1 – Free 2 Column HTML5 & CSS3 Website Template

一通りの要素を並べてくれているHTML5とCSS3のテンプレート。シンプルで、使いやすそうです。

HTML 5 Templates, HTML 5 canvas, HTML5 video, HTML 5 XHTML, HTML 5 tag

シンプルなデザインで、テンプレートが公開されています。