アダプティブフォームの全体的な外観とスタイルは、テーマエディターでスタイルを指定して定義できます。また、アダプティブフォームの個々のコンポーネントにインライン CSS スタイルを適用し、即座に変更をプレビューすることもできます。インラインスタイルは、テーマで設定されたスタイルよりも優先されます。
コンポーネントにインラインスタイルを追加するには、次の手順を実行します。
フォームエディターでフォームを開き、モードをスタイルモードに変更します。 モードをスタイルモードに変更するには、ページツールバーで /スタイルをタップします。
ページ内のコンポーネントを選択し、編集ボタン をタップします。スタイル設定プロパティがサイドバーに開きます。
サイドバーのフォーム階層ツリーからコンポーネントを選択することもできます。 フォーム階層ツリーは、サイドバーでフォームオブジェクトとして使用できます。
スタイルモードでは、フォームオブジェクトの下にコンポーネントが表示されます。ただし、サイドバーのフォームオブジェクトリストには、フィールドやパネルなどのコンポーネントが一覧表示されます。 フィールドとパネルは、テキストボックスやラジオボタンなどのコンポーネントを含むことができる汎用コンポーネントです。
サイドバーからコンポーネントを選択すると、選択したコンポーネントのすべてのサブコンポーネントのリストと選択したコンポーネントのプロパティが表示されます。特定のサブコンポーネントを選択して、そのスタイルを設定できます。
サイドバーのタブをクリックして、CSS プロパティを指定します。 次のようなプロパティを指定できます。
同様に、コンポーネントの他の部分(ウィジェット、キャプション、ヘルプなど)のスタイルを適用できます。
「完了」をクリックして変更を確定するか、または「キャンセル」をクリックして変更を破棄します。
以下の図は、インラインスタイルが適用される前後のテキストフィールドを示しています。
インラインスタイルプロパティを適用する前のテキストボックスコンポーネント
次の画像に示すように、次の CSS プロパティを適用した後のテキストボックススタイルの変更に注意してください。
セレクター |
CSS プロパティ |
値 |
効果 |
フィールド |
境界線 |
境界線の幅=2px 境界線のスタイル=実線 境界線のカラー=#1111 |
フィールドの周囲に黒色の 2px 幅の境界線を作成 |
テキストボックス |
背景色 |
#6495ED |
背景色を CornflowerBlue (#6495ED) に変更します。 注:値フィールドには、カラーの名前または 16 進数コードを指定できます。 |
ラベル |
寸法と位置/幅 |
100 px |
ラベルの幅を 100 px に固定します |
フィールドヘルプアイコン | テキスト/フォントカラー | #2ECC40 | ヘルプアイコンの色を変更します。 |
詳細な説明 |
text-align |
中央 |
ヘルプの長い説明を中央に揃えます |
インラインスタイルプロパティを適用した後のテキストボックスコンポーネント
上記の手順に従って、パネル、送信ボタン、ラジオボタンなど、他のコンポーネントを選択してスタイルを設定できます。
スタイルのプロパティは、選択したコンポーネントにより異なります。
アダプティブフォーム内のあるコンポーネントから別のコンポーネントにスタイルをコピーして貼り付けることもできます。スタイルモードで、コンポーネントをタップし、コピーアイコンをタップします。
同じ種類の別のコンポーネントをタップし、貼り付けアイコンをタップして、コピーしたスタイルを貼り付けます。スタイルを消去アイコン
をタップして、適用したスタイルを消去することもできます。
コンポーネントタイプの状態ごとにスタイルを設定できます。状態には、フォーカス、無効、ホバー、エラー、成功、必須が含まれます。
コンポーネントの状態のスタイル設定を定義するには、次の手順を実行します。
スタイルモードで、コンポーネントをタップし、編集アイコンをタップします。
「状態」ドロップダウンリストを使用して、コンポーネントの状態を選択します。
コンポーネントの選択した状態のスタイル設定を定義し、「」をタップしてプロパティを保存します。
成功状態とエラー状態をシミュレートすることもできます。展開アイコンをタップして、「成功をシミュレート」および「エラーをシミュレート」表示を選択します。