フォームで開発者ツールを使用する

開発者ツールを使用して、フォームの外観やレイアウトの変更を試すことができます。フォームの実行時にそのフォームを右クリックして [検証] を選択すると、開発者ツールが開きます。このチュートリアルでは、開発者ツールを使用して CSS スタイルの変更を試す方法について説明します。この例では、データ グリッド内のすべての [テキスト フィールド] のタイトルの色を変更する方法を説明します。

メモ： 開発ツールで適用する変更は一時的なものです。変更をフォームに永続的に適用するには、フォームの [カスタム CSS] プロパティ フィールドにカスタム CSS コードを入力し、コンポーネントの [カスタム CSS クラス] プロパティを使用して、スタイルを設定する各コンポーネントに適用する必要があります。

1. [テキスト フィールド] コンポーネントを含むデータ グリッドがあるフォームを実行します。
2. フォーム内を右クリックし、[検証] を選択します。
3. CSS スタイルを適用する正確な要素にフォーカスするには、 を選択するか、Ctrl + Shift + C を押します。[テキスト フィールド] コンポーネントのタイトルを選択できるようになります。
4. 開発者ツールの [Style] セクションでは、さまざまな CSS クラスを確認できます。この例では、.table クラスの [color] プロパティを「violet」に変更します。
   
   

   

   
   
5. この色をデータ グリッドに永続的に適用してみましょう。フォームの [プロパティ] パネルで、[カスタム CSS] フィールドに次の CSS クラスを入力します。

   .color-change {
       color: violet
       }

6. フォーム内の [テキスト フィールド] を編集し、[表示] タブに移動します。
7. [カスタム CSS クラス] に、手順 5 で追加したカスタム CSS クラスを入力します。
   
   

   

   
   
   コンポーネントを保存し、結果を確認します。