商用でも完全に無料! プレーンなHTMLとCSSで実装された、ランディングページ用のテンプレート -Uisual
Post on:2022年2月2日
JavaScriptはなし、プレーンなHTMLとCSSで実装されたランディングページ用のテンプレートを紹介します。
テンプレートはスマホ・タブレット・デスクトップのレスポンシブ対応。ワイヤーフレームのような白黒のシンプルなデザインなので、カスタマイズも簡単です。
Uisual -Free Landing Page Templates
Uisual -GitHub
UisualはプレーンなHTMLとCSSで実装された、ランディングページ用のテンプレートです。他のCSSフレームワークやJavaScriptなどは一切必要ありません。
MITライセンスで、商用プロジェクトでも無料で利用できます。
Uisual -Free Landing Page Templates
ダウンロードできるテンプレートは8種類あり、さまざまなプロジェクトですぐに利用できます。デザインが白黒なのは、簡単にカスタマイズできるようにしたためです。画像の変更、フォントやコピー、背景色、グラデーション、ボックスシャドウなどを簡単に変更・追加できます。
テンプレートは8種類
すべてレスポンシブ対応で、ブレイクポイントは320px、768px、1024px、1200pxに設定されています。
さっそくテンプレートをダウンロードしてみました。
ファイル構成は、シンプルです。
テンプレートのファイル構成
HTMLはこんな感じ。
テンプレートのHTMLの一部
CSSは最初に目次(TOC)があるので、簡単に把握できると思います。カラーやフォントサイズやマージンなどはCSSの変数(カスタムプロパティ)で定義されているので、カスタマイズも簡単です。
テンプレートのCSSの一部
ランディングページのデモをいくつか紹介します。
まずは、Alignのデモページ。
続いて、Layerのデモページ。
sponsors