アクティビティ

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

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

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

[テキストフィールド] コンポーネントを含むデータグリッドがあるフォームを実行します。
フォーム内を右クリックし、[検証] を選択します。
CSS スタイルを適用する正確な要素にフォーカスするには、を選択するか、Ctrl + Shift + C を押します。[テキストフィールド] コンポーネントのタイトルを選択できるようになります。
開発者ツールの [Style] セクションでは、さまざまな CSS クラスを確認できます。この例では、.table クラスの [color] プロパティを「violet」に変更します。
この色をデータグリッドに永続的に適用してみましょう。フォームの [プロパティ] パネルで、[カスタム CSS] フィールドに次の CSS クラスを入力します。
```
.color-change {
    color: violet
    }.color-change {
    color: violet
    }
```
フォーム内の [テキストフィールド] を編集し、[表示] タブに移動します。
[カスタム CSS クラス] に、手順 5 で追加したカスタム CSS クラスを入力します。

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