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

次のテキストコンポーネントの画像を参考に、スタイルを適用することができる、アダプティブフォームコンポーネントの各部について学びましょう。

アダプティブフォームコンポーネントの各部

上の画像で呼び出されている、アダプティブフォームコンポーネントの各部は、以下のとおりです。

A. ラベル: コンポーネントのキャプション.
B. フィールド: コンポーネントのすべての部分を含むエリア
C. ウィジェット: ユーザーがフィールドに値を指定または値を選択したエリア
D. ヘルプ: コンポーネントの短い説明、長い説明、およびヘルプインジケータ

注意:

ラベルのスタイルのみを指定できます。ラベルのテキストを変更するには、編集モードでテキストボックスのタイトルプロパティを使用します。詳しくは、「ページツールバー」を参照してください。

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

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

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

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

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

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

     

  4. 同様に、ウィジェット、キャプション、ヘルプのスタイルを適用することもできます。

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

例:インラインスタイル

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

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

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

タブ

CSS プロパティ

エフェクト

フィールド

border

境界線の幅=2px

境界線の色=黒ベタ

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

ウィジェット

background-color

#6495ED

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

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

ラベル

寸法と位置/幅

100px

ラベルの幅を 100px に固定

ヘルプ:疑問符

color

ヘルプインジケータの色を緑に変更

ヘルプ:長い説明

テキストの整列

中央

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー