更新日: 2023 / 12 / 14

LP-UIKIT HTMLテンプレートの使い方

LP-UIKITに含まれているHTMLテンプレートの使い方を解説します。

LP-UIKITで使用しているBootstrap5について

LP-UIKITではBootstrap5のテーマをカスタマイズして使用しています。

ダウンロードフォルダ内にある「ui」や「templates」内の「assets」フォルダにCSSファイルがあります。

lp_uikit
  - templates/assets/design1.css
  - templates/assets/design2.css
  - templates/assets/design3.css
  - templates/assets/design4.css
  - templates/assets/design5.css
  - templates/assets/design6.css
  - templates/assets/wire.css
  - ui/assets/style.css

デザインテンプレートのスタイルはテンプレートごとに異なるCSSファイルがあります。

ワイヤーテンプレートは1つのCSSファイルを共有しています。

Bootstrap5のJavascriptファイルについてはCDNからリンクしています。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>

UIテンプレートの使い方

ダウンロードフォルダの「ui/index.html」からUI一覧を開くことができます。

デモページはこちら

ボタンをクリックするとボタンに対応したコンテンツのUIページが開きます。

LP-UIKITの特徴 UIテンプレートの使い方

UIページの上部にあるドロップダウンナビゲーションからも各ページに移動することができます。

HTMLファイルをコードエディターで開く場合は「ui/contents」や「ui/elements」フォルダ内にあるHTMLファイルを開いてください。

ワイヤー・デザインテンプレートの使い方

UIテンプレートと同様、Figmaファイルにあるワイヤーテンプレートやデザインテンプレートも「templates」フォルダに含まれています。

デモページはこちら

コードエディタなどで開いてカスタマイズしていただけます。