高品質でしかも無料!すごい使えるレスポンシブ対応のHTML5/CSS3のテンプレートのまとめ
Post on:2016年4月4日
今時のトレンドがうまく取り入れられ、高品質にデザインされたレスポンシブ対応のランディングページ、プロダクトページ、縦長ページ、ポートフォリオ、ブログなど、HTML5/CSS3で作成された商用利用無料のテンプレートを紹介します。
レスポンシブ時のレイアウトの変化、気持ちいい繊細なアニメーションなど勉強にもなりますね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-01.gif)
色分けされたカードはホバー時にズーム・フェード・スライドを組み合わせたアニメーションで情報を表示。色分けはカテゴリに使ってもよいですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-02.png)
画像や動画など、ギャラリー用のテンプレート。スライドショー機能も備えています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-03.gif)
デスクトップ時は左サイドバー、スマホ時は上部固定のナビゲーションで、リストやテーブルをつかったレスポンシブ対応のコンポーネントが使用されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-04.png)
ブログ用のテンプレートで、アイキャッチ画像のホバーにはズームが使用されています。上部メニューの右2つのアイコンは省スペースを効果的に使うアイデアですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-05.png)
コンテンツ間を斜めのラインで区切ったレイアウトが面白いテンプレート。背景は固定表示で、ベタ塗りと組み合わせることで面白い効果を生み出しています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-06.png)
カルーセル、動画、パララックス、アプリ用スライダーなど、5種類のヘッダが用意されたポートフォリオ用のテンプレート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-07.png)
シンプルなコンポーネントが組み合わされたポートフォリオ用のテンプレート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-08.png)
背景に固定配置とベタ塗りを組み合わせて、スクロールするとカーテンを引き上げるような効果が楽しいテンプレート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-09.png)
美容室用のテンプレートで、追従するパララックスのエフェクトが非常に快適です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-10.png)
Bootstrapのテンプレートで、リスト・テーブル・カルーセル・タイムライン・料金表など、さまざまなコンポーネントが用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-11.png)
ランディングページ用の動画背景のシンプルなテンプレート。動画は静止画に変えることもできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-12.png)
5種類の人気が高いヘッダのエフェクトが用意されたテンプレート。パーティクルが用意されたテンプレートは珍しいですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-13.png)
シンプルな縦長ページ用のテンプレートで、気持ちいいスクロールエフェクトが洗練さを演出しています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-14.png)
すべてのアイテムがカード状にデザインされた個人ブログ・ポートフォリオ用のテンプレート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-15.png)
ギャラリーサイト用のテンプレート。ガラス板のようなキャプション、かっこいいですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-16.png)
レスポンシブ対応のシンプルなテンプレート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016040402-17.png)
空白スペースをたっぷり使ったシンプルなテンプレート。
sponsors