Show Menu
トピック×

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

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

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

コンポーネントにインラインスタイルを追加するには:
  1. フォームエディターからフォームを開き、モードをスタイルモードに変更します。To change the mode to styling mode, in the page toolbar, tap > Style .
  2. Select a component in the page, and tap the edit button . サイドバーにスタイルのプロパティが開きます。
    サイドバーのフォーム階層ツリーからコンポーネントを選択することもできます。フォーム階層ツリーは、サイドバーのフォームオブジェクトとして使用できます。
    サイドバーからコンポーネントを選択することもできます。スタイルモードでは、フォームオブジェクトの下にコンポーネントが表示されます。ただし、サイドバーのフォームオブジェクトリストにはフィールドやパネルなどのコンポーネントが表示されます。フィールドとパネルは、テキストボックスやラジオボタンなどのコンポーネントを含めることができる汎用的なコンポーネントです。
    サイドバーからコンポーネントを選択すると、選択したコンポーネントのすべてのサブコンポーネントのリストと選択したコンポーネントのプロパティが表示されます。特定のサブコンポーネントを選択して、そのスタイルを設定できます。
  3. サイドバーのタブをクリックして、CSS プロパティを指定します。次のようなプロパティを指定できます。
    • 寸法と位置(表示設定、パディング、高さ、幅、余白、位置、z インデックス、フロート、クリア、オーバーフロー)
    • テキスト(フォントファミリ、太さ、色、サイズ、行の高さ、整列)
    • 背景(画像とグラデーション、背景色)
    • 境界線(幅、スタイル、色、半径)
    • 効果(シャドウ、透明度)
    • アドバンス(コンポーネントのカスタム CSS を作成できます)
  4. 同様に、コンポーネントの他の部分(ウィジェット、キャプション、ヘルプなど)のスタイルを適用できます。
  5. Tap Done to confirm the changes or Cancel to discard the changes.

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

以下の図は、インラインスタイルが適用される前後のテキストフ​​ィールドを示しています。
インラインスタイルプロパティを適用する前のテキストボックスコンポーネント
次の図に示すように、以下の CSS プロパティを適用した後のテキストボックススタイルの変化に注目してください。
セレクター
CSS プロパティ
効果
フィールド
border
境界線の幅=2px
境界線のスタイル=実線
境界線の色=#1111
フィールドの周囲に黒色の 2px 幅の境界線を作成
テキストボックス
background-color
#6495ED
背景色を CornflowerBlue (#6495ED)に変更
注:値フィールドでは、色の名前やその進数コードを指定することができます。
ラベル
寸法と位置/幅
100px
ラベルの幅を 100px に固定
フィールドヘルプアイコン テキスト/フォントカラー #2ECC40 ヘルプアイコンの表面の色を変更します。
詳細な説明
テキストの整列
中央
長いヘルプ説明を中央揃えにする
インラインスタイルプロパティを適用した後のテキストボックスコンポーネント
上述の手順に従って、他のコンポーネント(パネル、送信ボタン、ラジオボタンなど)を選択し、そのスタイルを設定できます。
スタイルのプロパティは、選択したコンポーネントにより異なります。