無料でしかも高品質!レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ
Post on:2015年5月15日
レスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。
単に使うだけでなく、デザインやHTML5/CSS3の勉強としてスキルアップにもいいですね。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-01.png)
背景画像が固定の美しいスクロールエフェクトを採用した縦長ページで、ランディングページやポートフォリオなどに適しています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-02.png)
Photonと同シリーズで、こちらも背景固定のスクロールエフェクトですが、背景をどこで見せるかで印象ががらっと変わります。ロードに合わせたSVGのアニメーションが美しいです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-03.png)
固定ヘッダ、オフキャンバス、スクロールと連動したちょっとしたアニメーション、コンテンツスライダーなど、最近よく見かけるトレンドを巧みに取り入れたレスポンシブ対応の縦長ページ。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-04.png)
コンポーネントの随所にanimate.cssを使ったアニメーションを採用した縦長ページ用のテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-05.png)
Grid Item Animation Layout
デモページ
カード状に配置したコンテンツのグリッドをアニメーションで変化させるテンプレート。デモは2種類あり、demo 2の方が好みです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-06.png)
大きい背景画像をつかったヘッダ、カード型のレイアウト、サークルを使ったエレメント、パララックススクロール、スクロールをトリガーにしたエフェクトなど、最近人気のあるさまざまなコンポーネント・エフェクトが用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-07.png)
Foundationをベースにしたミニマルデザインのテンプレートで、各エレメントは遊び心に溢れたかわいいデザインです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-08.png)
不動産関係のランディングページ用のテンプレートで、ゆったりとした上質なデザインです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-09.png)
6ページで構成された中小企業のコーポレートサイトやデザイナーのポートフォリオとしても利用できるテンプレート。ネガティブスペースを使ったグリッドは新鮮です。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-10.png)
エレガントでモダンなデザインの縦長ページのテンプレート。ポートフォリオや代理店のページによさそうです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-11.png)
その名の通り、飲食店・レストラン向けのテンプレートで、メニューやお勧め料理などを備えています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-12.png)
白を基調にした美しいデザインで、画像スライダーと動画スライダーの2つのバージョンが用意されています。使用されているエフェクトも白にあっててとても繊細です。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-13.png)
中央2分割でレイアウトされたコンテンツを3Dのカーテンを開くように次々に表示するテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-14.png)
スクロールすると、表示されているアイコンにカラーがみたされていくエフェクト備えたテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015051502-15.png)
Mobile App Introduction Template
デモページ
スマホアプリの紹介ページ用のテンプレート。アニメーションを使って、アプリの使い方や見所を紹介します。
sponsors