Ant Design（Antd）を使用した垂直方向のスペースの使い方

Dividerコンポーネントを使用する方法:

Dividerコンポーネントは、要素を水平または垂直に区切るために使用できます。垂直方向のスペースを作成するには、以下のようにDividerコンポーネントを使用します:

import { Divider } from 'antd';
const MyComponent = () => (
  <div>
    <div>コンテンツ1</div>
    <Divider type="vertical" />
    <div>コンテンツ2</div>
    <Divider type="vertical" />
    <div>コンテンツ3</div>
  </div>
);

この例では、コンテンツの間に垂直なDividerが挿入され、垂直方向のスペースが作成されます。

Spaceコンポーネントを使用する方法:

Spaceコンポーネントは、要素の間にスペースを追加するために使用できます。垂直方向のスペースを作成するには、以下のようにSpaceコンポーネントを使用します:

import { Space } from 'antd';
const MyComponent = () => (
  <Space direction="vertical">
    <div>コンテンツ1</div>
    <div>コンテンツ2</div>
    <div>コンテンツ3</div>
  </Space>
);

Spaceコンポーネントのdirectionプロパティを"vertical"に設定することで、要素間の垂直方向のスペースが作成されます。

CSSを使用する方法:

もしAntdのコンポーネントを使用せずに垂直方向のスペースを作成したい場合は、CSSを使用することもできます。以下は、CSSを使用して垂直方向のスペースを作成する例です:

import React from 'react';
import './MyComponent.css';
const MyComponent = () => (
  <div className="my-component">
    <div>コンテンツ1</div>
    <div>コンテンツ2</div>
    <div>コンテンツ3</div>
  </div>
);

MyComponent.cssファイルには、以下のようなスタイルが含まれている必要があります:

.my-component > div:not(:last-child) {
  margin-bottom: 16px; /* 垂直方向のスペースのサイズを調整 */
}

このCSSスタイルは、最後の子要素以外のdiv要素に16pxの下マージンを追加し、垂直方向のスペースを作成します。

以上の方法を使用することで、Ant Design（Antd）で垂直方向のスペースを作成することができます。コード例とともに、それぞれの方法を説明しました。適切な方法を選択して、目的に合った垂直方向のスペースを実装してください。