Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ

Bootstrapなどのフレームワークは無し、HTML5とCSS3のシンプルなコードをベースに、jQueryなどでいろいろなインタラクションやアイコンフォントなどを使ったレスポンシブ対応のテンプレートをTemplatedから紹介します。

サイトのキャプチャ

Templated

ここで紹介しているテンプレートはすべて、個人・商用ともに無料で利用できます。

デモのキャプチャ

Retrospect

オフキャンバスメニューを備えたランディングページ用のテンプレート。

コードを一つだけ紹介。
基本的にこんな感じで、レスポンシブ対応・IE8も配慮されています。

コードのキャプチャ

Retrospectのindex.htmlのコード

デモのキャプチャ

Spatial

ヘッダに大きめのカバーイメージを備えたミニマルなデザインのテンプレート。
デモページの上だけのキャプチャだと、違いが分かりにくいですね。

デモのキャプチャ

Transit

プロダクトをアピールしやすいようデザインされたミニマルなスタートアップ用のテンプレート。

デモのキャプチャ

Interphase

多目的用のレスポンシブ対応のシンプルなテンプレート。

デモのキャプチャ

Ion

ビジネス用にぱりっとした清潔感をデザインしたテンプレート。

デモのキャプチャ

Solarize

クリーンでミニマルなレスポンシブ対応のテンプレートで、さまざまな企業に向いています。

デモのキャプチャ

Phaseshift

フレキシブルなグリッドを使ったレスポンシブ対応のテンプレート、デザインは明るめです。

デモのキャプチャ

Horizons

ヘッダに大きめのカバーイメージとドロップダウンを備えたニュートラルなテンプレート。

デモのキャプチャ

Linear

中間色のカラースキームを使ったミニマルなテンプレート。

デモのキャプチャ

Ex Machina

オレンジ・グレー・ホワイトのカラースキームとマルチページレイアウトに対応したテンプレート。

デモのキャプチャ

Grassygrass

十分は空白スペースと色鮮やかなグリーンが特徴的なテンプレート。

デモのキャプチャ

Autonomy

写真をメインにしたギャラリーなどにぴったりなテンプレート。

デモのキャプチャ

Privy

広めのスペースを使ったサイドバーが特徴的なテンプレート。

デモのキャプチャ

Colorized

明るめのカラーをたくさん使ったカラフルなテンプレート。

デモのキャプチャ

Megacorp

企業サイトにあうようデザインされたモダンでフラットなテンプレート。

top of page

©2017 coliss