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

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

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

コンポーネントにインラインスタイルを追加するには:

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

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

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

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

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

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

    • 寸法と位置(表示設定、パディング、高さ、幅、余白、位置、z インデックス、フロート、クリア、オーバーフロー)
    • テキスト(フォントファミリ、太さ、色、サイズ、行の高さ、整列)
    • 背景(画像とグラデーション、背景色)
    • 境界線(幅、スタイル、色、半径)
    • 効果(シャドウ、透明度)
    • アドバンス(コンポーネントのカスタム CSS を作成できます)
  4. 同様に、コンポーネントの他の部分(ウィジェット、キャプション、ヘルプなど)のスタイルを適用できます。

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

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

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

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

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

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

セレクター

CSS プロパティ

効果

フィールド

border

境界線の幅=2px

境界線のスタイル=実線

境界線の色=#1111

フィールドの周囲に黒色の 2px 幅の境界線を作成

テキストボックス

background-color

#6495ED

背景色を CornflowerBlue (#6495ED)に変更

注:値フィールドでは、色の名前やその進数コードを指定することができます。

ラベル

寸法と位置/幅

100px

ラベルの幅を 100px に固定

フィールドヘルプアイコン テキスト/フォントカラー #2ECC40 ヘルプアイコンの表面の色を変更します。

詳細な説明

テキストの整列

中央

長いヘルプ説明を中央揃えにする

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

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

メモ

スタイルのプロパティは、選択したコンポーネントにより異なります。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now