アダプティブフォームコンポーネントのインラインスタイル設定

アダプティブフォームの全体的な外観とスタイルは、テーマエディターでスタイルを指定して定義できます。また、アダプティブフォームの個々のコンポーネントにインライン CSS スタイルを適用し、即座に変更をプレビューすることもできます。インラインスタイルは、テーマで設定されたスタイルよりも優先されます。

インライン CSS プロパティを適用

コンポーネントにインラインスタイルを追加するには、次の手順を実行します。

フォームエディターでフォームを開き、モードをスタイルモードに変更します。モードをスタイルモードに変更するには、ページツールバーで／スタイルをタップします。
ページ内のコンポーネントを選択し、編集ボタンをタップします。スタイル設定プロパティがサイドバーに開きます。

サイドバーのフォーム階層ツリーからコンポーネントを選択することもできます。フォーム階層ツリーは、サイドバーでフォームオブジェクトとして使用できます。

スタイルモードでは、フォームオブジェクトの下にコンポーネントが表示されます。ただし、サイドバーのフォームオブジェクトリストには、フィールドやパネルなどのコンポーネントが一覧表示されます。フィールドとパネルは、テキストボックスやラジオボタンなどのコンポーネントを含むことができる汎用コンポーネントです。

サイドバーからコンポーネントを選択すると、選択したコンポーネントのすべてのサブコンポーネントのリストと選択したコンポーネントのプロパティが表示されます。特定のサブコンポーネントを選択して、そのスタイルを設定できます。
サイドバーのタブをクリックして、CSS プロパティを指定します。次のようなプロパティを指定できます。
- 寸法と位置（表示設定、パディング、高さ、幅、余白、位置、z インデックス、フロート、クリア、オーバーフロー）
- テキスト（フォントファミリー、太さ、色、サイズ、行の高さ、整列）
- 背景（画像とグラデーション、背景色）
- 境界線（幅、スタイル、色、半径）
- 効果（シャドウ、不透明度）
- 詳細（コンポーネントのカスタム CSS を作成できます）
同様に、コンポーネントの他の部分（ウィジェット、キャプション、ヘルプなど）のスタイルを適用できます。
「完了」をクリックして変更を確定するか、または「キャンセル」をクリックして変更を破棄します。

例：フィールドコンポーネントのインラインスタイル

以下の図は、インラインスタイルが適用される前後のテキストフィールドを示しています。

インラインスタイルが適用される前のテキストボックスコンポーネント

インラインスタイルプロパティを適用する前のテキストボックスコンポーネント

次の画像に示すように、次の CSS プロパティを適用した後のテキストボックススタイルの変更に注意してください。

セレクター	CSS プロパティ	値	効果
フィールド	境界線	境界線の幅=2px 境界線のスタイル=実線境界線のカラー=#1111	フィールドの周囲に黒色の 2px 幅の境界線を作成
テキストボックス	背景色	#6495ED	背景色を CornflowerBlue (#6495ED) に変更します。注：値フィールドには、カラーの名前または 16 進数コードを指定できます。
ラベル	寸法と位置／幅	100 px	ラベルの幅を 100 px に固定します
フィールドヘルプアイコン	テキスト/フォントカラー	#2ECC40	ヘルプアイコンの色を変更します。
詳細な説明	text-align	中央	ヘルプの長い説明を中央に揃えます