複数列

テキストやコンテンツを複数列で表示します。

効果

列 1
こちらは列 1 のコンテンツです

列 2
こちらは列 2 のコンテンツです

列 3
こちらは列 3 のコンテンツです

コード：

<Columns>
  <Column>
    **列 1**
    こちらは列 1 のコンテンツです
  </Column>
  <Column>
    **列 2**
    こちらは列 2 のコンテンツです
  </Column>
  <Column>
    **列 3**
    こちらは列 3 のコンテンツです
  </Column>
</Columns>

列のコンテンツはMarkdownの記法に従います。

幅の定義

1 列目
これは1列目の内容で、幅は20%です。

2 列目
これは2列目の内容で、幅は20%です。

3 列目
これは3列目の内容で、幅は300pxです。

コード：

<Columns>
  <Column width="20%">
    **1 列目**
    これは1列目の内容で、幅は20%です。
  </Column>
  <Column width="20%">
    **2 列目**
    これは2列目の内容で、幅は20%です。
  </Column>
  <Column width={300}>
    **3 列目**
    これは3列目の内容で、幅は300pxです。
  </Column>
</Columns>

`class` 属性を使用したTailwind CSSスタイルの適用

複数列コンポーネントは、Tailwind CSSを使用したスタイルのカスタマイズをサポートしています。 Columns と Column の両方のコンポーネントで、class 属性を使用してTailwind CSSクラスを追加できます。

Photographs of scenery

This photograph was captured by André Cook

Photographs of scenery

This photograph was captured by André Cook

コード：

<Columns>
    <Column class="bg-gray-100 p-3 rounded">
        <p class="text-lg font-bold text-pink-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
    <Column class="bg-gray-100 p-3 rounded">
        <p class="text-lg font-bold text-orange-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
</Columns>

`style` を使用したスタイルの直接定義

Photographs of scenery

This photograph was captured by André Cook

Photographs of scenery

This photograph was captured by André Cook

代码：

<Columns>
    <Column style="background-color: #f0f0f0; padding: 10px;">
        <p class="text-lg font-bold text-pink-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
    <Column style="background-color: #f0f0f0; padding: 10px;">
        <p class="text-lg font-bold text-orange-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
</Columns>

パラメータ説明

Column

width

number

可選

幅：パーセンテージとピクセル値をサポートし、"30%" や "240" などが使用できます。デフォルトでは、自動的に均等な列に分割されます。

class

string

可選

HTML要素に1つ以上のクラス名を割り当てます。Tailwind CSSがサポートされています。

style

string

可選

インラインスタイル属性を使用すると、CSSスタイルを直接定義できます。

効果#

幅の定義#

class 属性を使用したTailwind CSSスタイルの適用#

style を使用したスタイルの直接定義#

パラメータ説明#

効果

幅の定義

`class` 属性を使用したTailwind CSSスタイルの適用

`style` を使用したスタイルの直接定義

パラメータ説明