アクティビティ

開発ツール

[フォームを作成] アクティビティの [開発ツール] プロパティを使用して、フォームをデバッグしたり、CSS スタイルを試したりできます。有効化すると、実行時に開発者ツールである開発ツールが開きます。

このチュートリアルでは、開発ツールで CSS スタイルを試す方法について説明します。

重要: 開発ツールで追加したカスタマイズは一時的なものです。CSS スタイルをフォームに永続的に適用するには、HTML 要素コンポーネントにカスタム CSS クラスを作成し、そこに、開発ツールで試すコードを入力する必要があります。

チュートリアル

開発ツールを使用するには、以下の手順を実行します。

[フォームを作成] アクティビティの [プロパティ] パネルで、以下をオンにします。
1. 開発ツール
2. サニタイズを無効化。このプロパティを指定すると、フォームのパフォーマンスが向上します。
フォームコンポーネントをフォームデザイナーに追加します。この例では、 HTML 要素 コンポーネントをドラッグアンドドロップします。このコンポーネントを使用して、他のフォームコンポーネントの外観をカスタマイズします。
1. HTML 要素コンポーネントの [表示] タブで、[コンテンツ] セクションに移動します。
2. 他のコンポーネントの外観を変更する CSS <style> クラスを入力します。<style> タグを記述し、クラスの名前を入力します。
  
  この CSS クラスの名前を覚えておいてください。この名前は、CSS スタイルを他のフォームコンポーネントに適用するときに使用します。
3. 2.3. ユースケースに一致するプロパティを CSS クラスに追加します。この例では、background-color プロパティを追加し、green に設定します。以下の CSS コードをご覧ください。
```
<style> .customclass{background-color: green;} </style><style> .customclass{background-color: green;} </style>
```
4. 2.4. コンポーネントを保存します。
テキストフィールド コンポーネントをフォームデザイナーにドラッグアンドドロップします。
1. [表示] タブの [カスタム CSS クラス] フィールドに移動し、HTML 要素で作成した CSS クラスの名前を入力します。この例では、「customclass」と入力します。
2. コンポーネントとフォームを保存します。
ファイルを実行します。[開発ツール] ウィンドウが開きます。
1. 次のアイコンをクリックして、フォームレンダラーでテキストフィールド コンポーネントを選択します。作成した CSS クラスが開発ツールの [ スタイル] タブに表示されます。この例では、 customclass が表示されます。
2. 開発ツールで、作成した CSS クラスに移動して CSS スタイルをリアルタイムで試します。この例では、customclass 内に border-style プロパティを追加し、solid に設定します。
3. 別の border-color プロパティを追加し、deeppink に設定します。
CSS スタイルを試したら、フォームに永続的に適用できます。HTML 要素コンポーネントの [コンテンツ] セクションに移動し、試してみたプロパティを CSS クラスに追加します。

この例では、customclass に border-style プロパティと border-color プロパティを追加します。
```
<style> .customclass{background-color: green;
  border-style: solid;
  border-color: deeppink;}
</style><style> .customclass{background-color: green;
  border-style: solid;
  border-color: deeppink;}
</style>
```
コンポーネントとフォームを保存します。