# コピペで外部のデザインコンポーネントを表示

CS-Cart for ECモール & マーケットプレイスでは、フロントエンドのデザインに [Tailwind CSS](https://tailwindcss.com/) を採用しています。

{% hint style="info" %}
**Tailwind CSSとは**

Tailwind CSSは、ウェブサイトやアプリケーションのデザインを効率的に構築するためのユーティリティファーストのCSSフレームワークです。従来のCSSフレームワークとは異なり、Tailwindは事前に定義されたクラスを提供し、それらを組み合わせることでデザインを作り上げることができます。

[CS-Cart for ECモール & マーケットプレイスのデザインにTailwindを採用した理由](https://cs-cart.jp/news/why-tailwind/)
{% endhint %}

Tailwindは多くのプロジェクトで採用されており、<mark style="background-color:orange;">多種多様なデザインコンポーネントが多くのウェブサイトで無料・有料で公開</mark>されています。

{% hint style="info" %}
**Taiwindベースのデザインコンポーネントを配布しているウェブサイトの例**

* [Tailwind UI](https://tailwindcss.com/plus)
* [Meraki UI](https://merakiui.com/)
* [Flowbite](https://flowbite.com/)
* [TW Elements](https://tw-elements.com/)
* [Tailblocks](https://tailblocks.cc/)
* [Shuffle](https://shuffle.dev/)
  {% endhint %}

これらのウェブサイトで提供されているデザインコンポーネントをコピーし、文言やリンク先などを調整することにより、自身のECモールに簡単に導入することができます。

***

### 外部サービスのデザインコンポーネントをCS-Cartに導入する方法

一例として、[Meraki UI](https://merakiui.com/) で公開されている「価格表」をECモールのトップページに表示させる方法を解説します。

{% @supademo/embed demoId="cm8i12dtg05kr20v292itpt77" url="<https://app.supademo.com/demo/cm8i12dtg05kr20v292itpt77>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://manual-admin.cs-cart.jp/tips/copy_external_components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.