> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# カスタムスタイルの概要

> YiDAの各エディション（Freeプラン、ベーシック版、プロフェッショナル版、専用版）で利用可能なカスタムページスタイル機能を比較。padding、margin、borderなど、CSSレイアウトプロパティの設定方法を詳しく解説します。

| **機能**      | **Freeプラン** | **ベーシック版** | **プロフェッショナル版** | **専用版** |
| ----------- | ----------- | ---------- | -------------- | ------- |
| カスタムページスタイル | 非対応         | 非対応        | 対応             | 対応      |

## 1. 概要

現在、**リッチテキスト表示**、**レイアウトコンテナ**、**グループ分けコンポーネント**のみスタイル設定に対応しています。これらを活用してフォームコンポーネントをレイアウトすることで、より洗練された見た目を実現できます。

## 2. 機能詳細

### 2.1 ソースコード編集

設定パネルから設定できないCSSスタイルがある場合は、ソースコード編集機能を使ってCSSコードを記述し、カスタムスタイルを定義します。

ソースコード編集と右側の設定パネルは完全に同期しており、変更は即座に反映されます。どちらで編集しても、もう一方に反映されます。

参考：一行テキストコンポーネントのスタイルとサイズを変更する方法

### 2.2 デフォルト状態

| **属性**  | **説明**                           |
| ------- | -------------------------------- |
| :active | 要素がアクティブ化されたときにスタイルを追加します。       |
| :focus  | 要素がキーボード入力フォーカスを持つときにスタイルを追加します。 |
| :hover  | マウスカーソルが要素上にホバーしたときにスタイルを追加します。  |

### 2.3 レイアウト

#### 2.3.2 CSS paddingプロパティ

| **プロパティ**                                                                 | **説明**                                         |
| ------------------------------------------------------------------------- | ---------------------------------------------- |
| [padding](http://www.w3school.com.cn/cssref/pr_padding.asp)               | 一括指定プロパティ。要素のすべてのpaddingプロパティを1つの宣言でまとめて設定します。 |
| [padding-bottom](http://www.w3school.com.cn/cssref/pr_padding-bottom.asp) | 要素の下側paddingを設定します。                            |
| [padding-left](http://www.w3school.com.cn/cssref/pr_padding-left.asp)     | 要素の左側paddingを設定します。                            |
| [padding-right](http://www.w3school.com.cn/cssref/pr_padding-right.asp)   | 要素の右側paddingを設定します。                            |
| [padding-top](http://www.w3school.com.cn/cssref/pr_padding-top.asp)       | 要素の上側paddingを設定します。                            |

#### 2.3.3 CSS marginプロパティ

| **プロパティ**                                                               | **説明**                                     |
| ----------------------------------------------------------------------- | ------------------------------------------ |
| [margin](http://www.w3school.com.cn/cssref/pr_margin.asp)               | 一括指定プロパティ。すべてのmarginプロパティを1つの宣言でまとめて設定します。 |
| [margin-bottom](http://www.w3school.com.cn/cssref/pr_margin-bottom.asp) | 要素の下側marginを設定します。                         |
| [margin-left](http://www.w3school.com.cn/cssref/pr_margin-left.asp)     | 要素の左側marginを設定します。                         |
| [margin-right](http://www.w3school.com.cn/cssref/pr_margin-right.asp)   | 要素の右側marginを設定します。                         |
| [margin-top](http://www.w3school.com.cn/cssref/pr_margin-top.asp)       | 要素の上側marginを設定します。                         |

#### 2.3.4 CSS borderプロパティ

| **プロパティ**                                                                           | 説明                                               |
| ----------------------------------------------------------------------------------- | ------------------------------------------------ |
| [border](http://www.w3school.com.cn/cssref/pr_border.asp)                           | 一括指定プロパティ。4辺すべての境界線プロパティを1つの宣言でまとめて設定します。        |
| [border-style](http://www.w3school.com.cn/cssref/pr_border-style.asp)               | 要素のすべての境界線スタイルを一括で設定するか、各辺の境界線スタイルを個別に設定します。     |
| [border-width](http://www.w3school.com.cn/cssref/pr_border-width.asp)               | 一括指定プロパティ。要素のすべての境界線の幅を設定するか、各辺の境界線幅を個別に設定します。   |
| [border-color](http://www.w3school.com.cn/cssref/pr_border-color.asp)               | 一括指定プロパティ。要素のすべての境界線の可視部分の色を設定するか、4辺の色を個別に設定します。 |
| [border-bottom](http://www.w3school.com.cn/cssref/pr_border-bottom.asp)             | 一括指定プロパティ。下辺境界線のすべてのプロパティを1つの宣言でまとめて設定します。       |
| [border-bottom-color](http://www.w3school.com.cn/cssref/pr_border-bottom_color.asp) | 要素の下辺境界線の色を設定します。                                |
| [border-bottom-style](http://www.w3school.com.cn/cssref/pr_border-bottom_style.asp) | 要素の下辺境界線のスタイルを設定します。                             |
| [border-bottom-width](http://www.w3school.com.cn/cssref/pr_border-bottom_width.asp) | 要素の下辺境界線の幅を設定します。                                |
| [border-left](http://www.w3school.com.cn/cssref/pr_border-left.asp)                 | 一括指定プロパティ。左辺境界線のすべてのプロパティを1つの宣言でまとめて設定します。       |
| [border-left-color](http://www.w3school.com.cn/cssref/pr_border-left_color.asp)     | 要素の左辺境界線の色を設定します。                                |
| [border-left-style](http://www.w3school.com.cn/cssref/pr_border-left_style.asp)     | 要素の左辺境界線のスタイルを設定します。                             |
| [border-left-width](http://www.w3school.com.cn/cssref/pr_border-left_width.asp)     | 要素の左辺境界線の幅を設定します。                                |
| [border-right](http://www.w3school.com.cn/cssref/pr_border-right.asp)               | 一括指定プロパティ。右辺境界線のすべてのプロパティを1つの宣言でまとめて設定します。       |
| [border-right-color](http://www.w3school.com.cn/cssref/pr_border-right_color.asp)   | 要素の右辺境界線の色を設定します。                                |
| [border-right-style](http://www.w3school.com.cn/cssref/pr_border-right_style.asp)   | 要素の右辺境界線のスタイルを設定します。                             |
| [border-right-width](http://www.w3school.com.cn/cssref/pr_border-right_width.asp)   | 要素の右辺境界線の幅を設定します。                                |
| [border-top](http://www.w3school.com.cn/cssref/pr_border-top.asp)                   | 一括指定プロパティ。上辺境界線のすべてのプロパティを1つの宣言でまとめて設定します。       |
| [border-top-color](http://www.w3school.com.cn/cssref/pr_border-top_color.asp)       | 要素の上辺境界線の色を設定します。                                |
| [border-top-style](http://www.w3school.com.cn/cssref/pr_border-top_style.asp)       | 要素の上辺境界線のスタイルを設定します。                             |
| [border-top-width](http://www.w3school.com.cn/cssref/pr_border-top_width.asp)       | 要素の上辺境界線の幅を設定します。                                |

### 2.4 表示

#### 2.4.1 block

ブロックレベル要素は常に1行を占有します。新しい行から始まり、後続の要素も新しい行から始まります。

幅（**width**）、高さ（**height**）、padding（**padding**）、margin（**margin**）はすべて制御可能です。

#### 2.4.2 inline-block

インラインブロック要素は、隣接するインライン要素と同じ行に表示されます。

幅（**width**）、高さ（**height**）、padding（**padding**）、margin（**margin**）はすべて制御可能です。

#### 2.4.3 inline

インライン要素は、隣接するインライン要素と同じ行に表示されます。

幅（**width**）、高さ（**height**）、上下padding（**padding-top / padding-bottom**）、上下margin（**margin-top / margin-bottom**）は変更できません。サイズは含まれるテキストまたは画像によって決まります。

#### 2.4.4 flex（技術者以外の方にはカラムレイアウトの使用を推奨）

Flexレイアウトは、多様なページレイアウトを構築するためのシンプルかつ完全なレスポンシブレイアウト手法です。

Flexレイアウトを使用する要素はflexコンテナと呼ばれます。デフォルトでは、コンテナには水平方向のメイン軸と垂直方向のクロス軸の2つの軸があります。

**Direction: row** — メイン軸は水平方向で、左から始まります（デフォルト）。

**Direction: column** — メイン軸は水平方向で、右から始まります。

**Direction: row-reverse** — メイン軸は垂直方向で、上から始まります。

**Direction: column-reverse** — メイン軸は垂直方向で、下から始まります。

**Align: flex-start** — アイテムをクロス軸の始点に揃えます。

**Align: flex-end** — アイテムをクロス軸の終点に揃えます。

**Align: center** — アイテムをクロス軸の中央に揃えます。

**Align: baseline** — アイテムを最初の行のテキストのベースラインに沿って揃えます。

**Align: stretch** — 高さが設定されていない、または autoに設定されているアイテムは、コンテナの全高までストレッチされます（デフォルト）。

**Justify: flex-start** — 左揃え（デフォルト）。

**Justify: flex-end** — 右揃え。

**Justify: center** — 中央揃え。

**Justify: space-between** — アイテムを両端に揃え、アイテム間の間隔を均等にします。

**Justify: space-around** — 各アイテムの両側に均等な間隔を設けます。

注：詳細なチュートリアルは、**Flexレイアウト構文チュートリアル**を参照してください。

### 2.5 テキスト

**(1) Font**：テキストのフォント。

**(2) Weight**：テキストの太さ。

**(3) Style**：テキストのスタイル（normal または斜体）。

**(4) Color**：テキストの色。

**(5) Size**：テキストのサイズ。

**(6) Line height**：テキストを含む行の高さ。

**(7) Align**：テキストの揃え（左揃え、中央揃え、右揃え、または均等割付）。

**(8) Decoration**：テキストの装飾（normal、下線、または取り消し線）。

### 2.6 背景

**(1) Fill color**：背景色。

**(2) Image**：画像を背景として使用します。

### 2.7 境界線

**(1) Line style**：境界線のスタイル（solid、dotted、または dashed）。

**(2) Width**：境界線の幅。

**(3) Color**：境界線の色。

**(4) Corner radius**：境界線の角丸の大きさ。

### 2.8 エフェクト

**(1) Opacity**：要素の透明度。値が小さいほど透明になります。

**(2) Cursor**：要素にホバーしたときに表示されるカーソルスタイル（pointer または hand）。

### 2.9 シャドウ

**(1) Color**：シャドウの色。

**(2) X**：シャドウの水平方向のオフセット。

**(3) Y**：シャドウの垂直方向のオフセット。

**(4) Blur**：シャドウのぼかし距離。値が大きいほどシャドウの端が柔らかくなります。

**(5) Spread**：シャドウの拡散半径。正の値はシャドウ全体を拡大し、負の値は縮小します。

> 上記のヘルプドキュメントで問題が解決しない場合は、Xingfudemianhuatangまでお問い合わせください。