Skip to main content

​
1. 概要

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

​
2. 機能詳細

​
2.1 ソースコード編集

設定パネルから設定できないCSSスタイルがある場合は、ソースコード編集機能を使ってCSSコードを記述し、カスタムスタイルを定義します。 ソースコード編集と右側の設定パネルは完全に同期しており、変更は即座に反映されます。どちらで編集しても、もう一方に反映されます。 参考：一行テキストコンポーネントのスタイルとサイズを変更する方法

​
2.2 デフォルト状態

​
2.3 レイアウト

​
2.3.2 CSS paddingプロパティ

​
2.3.3 CSS marginプロパティ

​
2.3.4 CSS borderプロパティ

​
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までお問い合わせください。