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

> Documentation Index
> Fetch the complete documentation index at: https://manual-admin.cs-cart.jp/llms.txt
> Use this file to discover all available pages before exploring further.

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

![](/assets/image-131.png)

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

> **Note**
>
> **Tailwind CSSとは**
>
> Tailwind CSSとは、ユーティリティファーストのCSSフレームワークです。
>
> CSSを直接記述することなく、HTML要素にTailwindの**クラス名を追加するだけでデザインをカスタマイズ**できます。

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

> **Note**
>
> **Tailwind製のコンポーネントを配布・販売しているウエブサイトの例**
>
> [https://www.hyperui.dev/\
> https://flyonui.com/\
> https://flowbite.com/\
> https://tailgrids.com/components](https://www.hyperui.dev/https://flyonui.com/https://flowbite.com/https://tailgrids.com/components)

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

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

Source: https://manual-admin.cs-cart.jp/tips/copy_paste_components/index.mdx