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

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

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

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

1. フォームエディターからフォームを開き、モードをスタイルモードに変更します。モードをスタイルモードに変更するには、ページツールバーで ／スタイル​をタップします。

2. ページ内のコンポーネントを選択し、編集ボタン をタップします。サイドバーにスタイルのプロパティが開きます。

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

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

   サイドバーからコンポーネントを選択すると、選択したコンポーネントのすべてのサブコンポーネントのリストと選択したコンポーネントのプロパティが表示されます。特定のサブコンポーネントを選択して、そのスタイルを設定できます。

3. サイドバーのタブをクリックして、CSS プロパティを指定します。次のようなプロパティを指定できます。

   • 寸法と位置（表示設定、パディング、高さ、幅、余白、位置、z インデックス、フロート、クリア、オーバーフロー）
   • テキスト（フォントファミリー、太さ、色、サイズ、行の高さ、整列）
   • 背景（画像とグラデーション、背景色）
   • 境界線（幅、スタイル、色、半径）
   • 効果（シャドウ、透明度）
   • 詳細（コンポーネントのカスタム CSS を作成できます）

4. 同様に、コンポーネントの他の部分（ウィジェット、キャプション、ヘルプなど）のスタイルを適用できます。

5. 「完了」をクリックして変更を確定するか、または「キャンセル」をクリックして変更を破棄します。

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

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

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

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

図： インラインスタイルプロパティを適用した後のテキストボックスコンポーネント

上述の手順に従って、他のコンポーネント（パネル、送信ボタン、ラジオボタンなど）を選択し、そのスタイルを設定できます。

Business.Adobe.com リソース

Multichannel Communication Content Insights Auto Form Fill Personalized Communications Responsive Forms Dynamic Forms