HTML5で構築されたテンプレート・フレームワークいろいろ

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

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

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

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

Coding A HTML 5 Layout From Scratch

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


Coding A HTML 5 Layout From Scratch

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

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


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

52Framework – first ever html5 and css3 framework

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


52Framework - first ever html5 and css3 framework

Less Framework

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


Less Framework

Free HTML5 Templates | Bringing modern web standards to everyone

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


Free HTML5 Templates | Bringing modern web standards to everyone

Design & Code a Cool iPhone App Website in HTML5

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


Design & Code a Cool iPhone App Website in HTML5

Build a HTML5/CSS3 Website Layout Without Images

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


Build a HTML5/CSS3 Website Layout Without Images

HTML5 Starter Pack – a sick freebie

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


HTML5 Starter Pack – a sick freebie

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

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


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

Coding a CSS3 & HTML5 One-Page Website Template

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


Coding a CSS3 & HTML5 One-Page Website Template

Gotta’ love HTML5 & CSS3

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


Gotta’ love HTML5 & CSS3

A free HTML5 and CSS3 theme

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


A free HTML5 and CSS3 theme

Free HTML5 template | Web design London

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


Free HTML5 template | Web design London

OWMX 1 – Free 2 Column HTML5 & CSS3 Website Template

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


OWMX 1 - Free 2 Column HTML5 & CSS3 Website Template

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

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


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

デザインblogランキング

コメント 1 Comment »   はてなブックマーク   del.icio.us

この記事に関連する記事



One Response to “HTML5で構築されたテンプレート・フレームワークいろいろ”

  1. freewebdev.jp Says:

    HTML5で構築されたテンプレート・フレームワークいろいろ

    現在、徐々に各ブラウザの対応が進められているHTML5。動画やオーディオ再生、アニメーションなどの要素が実装されていて、iPhoneやiPadがこのままFlashを採用しないままなのであれば、今…

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ