creatersnest131

HTML5&CSS3で作られた無料の美しいテンプレート30選


デザインやコーディングをしていると、一から作るのはちょっと大変…と思う時があると思います。
そんな時に役立つのhtml5+css3で作られた無料のテンプレートをご紹介します。

ソースも素材も使用できるので、html5やcss3のスキルアップ用の勉強ツールとしても役立ちます。
勿論、そのまま使って生産性を上げ、効率アップすることもできます。
発想次第で色んなことに役立つこと、間違いなしです。

Type & Grids

Type & Grids レスポンシブ対応のhtml5+css3テンプレート
デモ
ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
ホバーで表示されるタイトルなど、ポートフォリオにむいています。
文字が左からすっと現れるところなど、シンプルながらスタイリッシュなテンプレートです。

 

Flat Theme

Flat Theme html5+css3テンプレート
デモ
ダウンロード
使いやすいレスポンシブ対応のhtml5+css3テンプレートの一つです。
エフォクトや各種ページなど揃ってますので、汎用的に使えます。
トップページだけでなく、その他ページも使いやすいですし、勉強用に使ってみても良い素材です。

 

Caprice

Caprice レスポンシブ対応のhtml5+css3テンプレート
デモ
ダウンロード
レスポンシブ対応はしていませんが、左ナビゲーションが固定テンプレートです。
簡単なコーポレートサイトにも適しています。
また、下層リンクへのナビゲーションの現れ方もエフェクト使用していて、お洒落な作りです。

 

Woo

Woo レスポンシブ対応のhtml5+css3テンプレート
デモ
ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
結構動きがあるので、インパクトがありランディングページで何度か使用させて頂きました。
使いやすいレイアウトでさまざまなジャンルに対応できます。

 

Twenty

Twenty レスポンシブ対応のhtml5+css3テンプレート
デモ
ダウンロード
カスタマイズしやすいレスポンシブ対応のhtml5+css3テンプレート。
シンプルですので、癖がなく、様々なサイトやランディングページで使えます。

 

Madison

Madison レスポンシブ対応のhtml5+css3テンプレート
デモ
ダウンロード
色々な用途が期待できるレスポンシブ対応のhtml5+css3テンプレート。
色々な機能がついているので、使ってみた方が内容が理解しやすいテンプレートです。

 

Big Picture

Big Picture レスポンシブ対応のhtml5+css3テンプレート
デモ
ダウンロード
大きい写真画像を使ったテンプレート。
エフェクトつきですので、さまざまな用途で使いやすいです。
個人的にお気に入りです。

 

Aerial

Aerial レスポンシブ対応のhtml5+css3テンプレート
デモ
ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
画面いっぱいに広がるデザインが印象的です。

 

Personal vCard One Page Template
Personal vCard One Page Template レスポンシブ対応のhtml5+css3テンプレート
デモ
ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
タブ切り替えがデフォルトで機能します。

 

Tessellate
Tessellate レスポンシブ対応のhtml5+css3テンプレート
デモ

ダウンロード
PC、タブレット、モバイルと3パターン対応しているhtml5+css3テンプレート。
写真も全画面で迫力があります。

 

Freebix

Freebix レスポンシブ対応のhtml5+css3テンプレート
デモ

ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
ブログであれば、これ一つである程度対応できます。

 

Elegant vCard


Elegant vCard レスポンシブ対応のhtml5+css3テンプレート
デモ

ダウンロード
一風変わったhtml5+css3テンプレート。
個人ポートフォリオなどにいいかもしれません。

 

Parallelism

Prologue html5+css3テンプレート
デモ

ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
ホイールで右にスクロールするので便利です。
ポートフォリオに是非。

 

Prologue

Prologue html5+css3テンプレート
デモ

ダウンロード
左メニュー固定のレスポンシブ対応のhtml5+css3テンプレート。
一度は使ってみたいテンプレートです。

 

Overflow

Overflow html5+css3テンプレート
デモ

ダウンロード
シンプルながら、センスが光るレスポンシブ対応のhtml5+css3テンプレート。
見せ方が素敵なので、ポートフォリオなどに使ってみたいテンプレートです。

 

Fertile

Fertile html5+css3テンプレート
デモ

ダウンロード
スタンダードな形でさっと作りたいときに便利なテンプレート。

 

EasyPortfolio

EasyPortfolio html5+css3テンプレート
デモ

ダウンロード
ポートフォリオ向けレスポンシブ対応のhtml5+css3テンプレート。
飾りっ気は少ないですが、上部に設置されているボタンクリックで説明文が表示されるのは面白い作りです。

 

Obscura

Obscura html5+css3テンプレート
デモ

ダウンロード
ブログ向けのレスポンシブ対応のhtml5+css3テンプレート。
典型的なブログテンプレートですが、その分、汎用的に使えるでしょう。

 

AmazingBiz

AmazingBiz html5+css3テンプレート
デモ

ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
上から降ってくるようなエフェクトは見ているだけでも楽しいです。

Crafty

Crafty html5+css3テンプレート
デモ

ダウンロード
使いやすい形のレスポンシブ対応のhtml5+css3テンプレート。
凝る必要がない場合はこれで十分なテンプレートです。

 

Initio

Initio html5+css3テンプレート
デモ

ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
目立った特徴はないですが、シンプルで使いやすいテンプレートです。

 

Early Bird

Early Bird html5+css3テンプレート
デモ

ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
Lightbox使用のポートフォリオに使えそうです。

 

Starnight

Starnight html5+css3テンプレート
デモ

ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
随所に凝ったcss3が配置されています。

 

Socialike

Socialike html5+css3テンプレート
デモ

ダウンロード
残念ながら、レスポンシブ対応はしてません。
ギャラリーやブログを備えているので、使い勝手は良いテンプレートです。

 

All4One

All4One html5+css3テンプレート
デモ

ダウンロード
ポートフォリオ向けレスポンシブ対応のhtml5+css3テンプレート。
迫力がありますので、デモサイトと同じような、大きな画像やインパクトのある写真などと使用すると良いでしょう。

 

One

One html5+css3テンプレート
デモ

ダウンロード
シンプルな形なので、色々なサイトに利用できます。
ページ内リンクがゆっくり動きますので、落ち着いた印象です。

 

Delphic

Delphic html5+css3テンプレート
デモ

ダウンロード
ギャラリーの種類が豊富なテンプレートです。
トグル切り替えのページもあり、よく見ていくと面白い作りをしています。

 

Counter

Counter html5+css3テンプレート
デモ

ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
なかなか使う機械は少ないですが、カミングスーンページに使えます。

 

Corlate

Corlate html5+css3テンプレート

デモ

ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
エフェクトも備え、ページの作りも基本的なものは揃えています。
一つ手元にあっれば、応用次第で使えるテンプレートです。

 

Timber

Timber html5+css3テンプレート
デモ

ダウンロード
レスポンシブ対応のhtml5+css3テンプレート。
背景が斜めにカットされているものはなかなか見かけないので、印象的です。
ランディングページで使用させて頂いたことがあります。

 

まとめ

レスポンシブ対応、エフェクトを備えたものまで、html5+css3で作られた無料のテンプレートもたくさん見つけることができます。
現在はクオリティーの高いhtml5+css3テンプレートも増えてきて、見ているだけでも楽しくなりますね。

フラットなものが多くなりますが、応用次第でデザインやコーディングの幅はどんどん広がります。
是非使ってみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Articleこんなの作りたい!CSS3で実装するキレイなボタンチュートリアルまとめ