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