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

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

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

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

A. キャプション:コンポーネントのキャプション

B. フィールド:コンポーネントのすべての部分を含むエリア

C. ウィジェット:ユーザーがフィールドに値を指定または値を選択したエリア

D. ヘルプ:コンポーネントの短い説明、長い説明、およびヘルプインジケータ

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

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

  1. アダプティブフォームのコンポーネントを右クリックし、「編集」をクリックします。「コンポーネントの編集」ダイアログが開きます。

  2. スタイル設定」タブをクリックして開きます。

    「コンポーネントの編集」ダイアログ内の「スタイル設定」タブ
  3. インライン CSS プロパティセクションでタブをクリックし、CSS プロパティを指定します。例えば、次のように指定します。

    1. 「フィールド」タブで、「アイテムの追加」をクリックします。2 つのフィールドを持った行が追加されます。
    2. 左から最初のフィールドで、適用したい CSS3 プロパティを指定します。例:border など。また、下矢印をクリックしてプロパティを選択することもできます。注意:ドロップダウンリストに含まれているプロパティは一部であり、サポートされている CSS3 プロパティであればこのフィールドでどれでも指定することができます。
    3. 隣接するフィールドには、指定された CSS3 プロパティに対して有効な値を指定します。例:3px solid black など。
    4. アイテムの追加」をクリックし、次のプロパティとその値を追加します。

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

  5. OK」をクリックして変更を確認するか、または「キャンセル」をクリックして変更せずにダイアログを閉じます。

例:インラインスタイル

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

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

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

タブ

CSS プロパティ

エフェクト

フィールド

border

2px solid black

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

ウィジェット

background-color

#6495ED

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

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

キャプション

width

100px

キャプションのために、幅を 100px に修正

ヘルプ:疑問符

color

green

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

ヘルプ:疑問符

content

"\e086"

ヘルプインジケータの疑問符を、指定された CSS ルールと共にブートストラップの glyphicon に変更します。
:CSSルールは、重引用符内部で囲む必要があります。ブートストラップの glyphicons とそれに対応する CSS ルールのリストについては、『Bootstrap 3 Glyphicons cheatsheet(ブートストラップ 3 の Glyphicons チートシート)』を参照してください。 

ヘルプ:長い説明

text-align

center

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

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

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

法律上の注意   |   プライバシーポリシー