コピペでカード形式のコンテンツを作成する方法

CS-Cart for ECモール & マーケットプレイスでは、デザインテンプレートに Tailwind を採用しています。

Tailwind CSSとは

Tailwind CSSとは、ユーティリティファーストのCSSフレームワークです。

CSSを直接記述することなく、HTML要素にTailwindのクラス名を追加するだけでデザインをカスタマイズできます。

そのため、Tailwindベースのデザインコンポーネントを配布している各種サービスから、希望するコンポーネントをコピー＆ペーストするだけで、CS-Cart上で表示することができます。

Tailwind製のコンポーネントを配布・販売しているウエブサイトの例

https://www.hyperui.dev/ https://flyonui.com/ https://flowbite.com/ https://tailgrids.com/components

この記事では、HyperUI（https://www.hyperui.dev/）で無料配布されているコンポーネントを利用して、CS-Cartのトップページにカード形式のコンテンツを表示する方法を解説します。

CS-Cartでは、今回解説したカードコンポーネントだけなく、Tailwindで構成されたあらゆるコンポーネントをコピー＆ペーストするだけで表示できます。また、Tailwindのクラスを変更・追加することによりデザインを自由にカスタマイズできます。