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

開発者ツールを使用して、フォームの外観やレイアウトの変更を試すことができます。フォームの実行時にそのフォームを右クリックして [検証] を選択すると、開発者ツールが開きます。このチュートリアルでは、開発者ツールを使用して 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 クラスを入力します。

   

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