Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ
Post on:2015年7月6日
Bootstrapなどのフレームワークは無し、HTML5とCSS3のシンプルなコードをベースに、jQueryなどでいろいろなインタラクションやアイコンフォントなどを使ったレスポンシブ対応のテンプレートをTemplatedから紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070601.png)
ここで紹介しているテンプレートはすべて、個人・商用ともに無料で利用できます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-01.png)
オフキャンバスメニューを備えたランディングページ用のテンプレート。
コードを一つだけ紹介。
基本的にこんな感じで、レスポンシブ対応・IE8も配慮されています。
![コードのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070603.png)
Retrospectのindex.htmlのコード
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-02.png)
ヘッダに大きめのカバーイメージを備えたミニマルなデザインのテンプレート。
デモページの上だけのキャプチャだと、違いが分かりにくいですね。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-03.png)
プロダクトをアピールしやすいようデザインされたミニマルなスタートアップ用のテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-04.png)
多目的用のレスポンシブ対応のシンプルなテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-05.png)
ビジネス用にぱりっとした清潔感をデザインしたテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-06.png)
クリーンでミニマルなレスポンシブ対応のテンプレートで、さまざまな企業に向いています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-07.png)
フレキシブルなグリッドを使ったレスポンシブ対応のテンプレート、デザインは明るめです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-08.png)
ヘッダに大きめのカバーイメージとドロップダウンを備えたニュートラルなテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-09.png)
中間色のカラースキームを使ったミニマルなテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-10.png)
オレンジ・グレー・ホワイトのカラースキームとマルチページレイアウトに対応したテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-11.png)
十分は空白スペースと色鮮やかなグリーンが特徴的なテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-12.png)
写真をメインにしたギャラリーなどにぴったりなテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-13.png)
広めのスペースを使ったサイドバーが特徴的なテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-14.png)
明るめのカラーをたくさん使ったカラフルなテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015070602-15.png)
企業サイトにあうようデザインされたモダンでフラットなテンプレート。
sponsors