ワークフローのアクティビティ

最終更新日時 2026年2月25日

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

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