5.3.1. プロパティの詳細と設定¶

エレメントの見た目や大きさ、各エレメントごとに設定するべき情報を「プロパティ」といいます。 エレメントごとに設定できるプロパティは異なります。

プロパティの設定手順は以下の通りです。設定の流れは全エレメント共通です。

1. プロパティを設定したいエレメントをクリックします。コンテナ全体に対するプロパティを設定したい場合、エレメントまたはコンテナの選択状態を解除してください。選択状態の解除方法は「アプリケーション画面で利用するエレメントを配置する」を参照してください。

2. 「プロパティ」をクリックし、エレメントのプロパティ設定欄を表示します。

   

3. プロパティ名をクリックすると、プロパティの詳細が表示されます。

   

4. 「プロパティ」種別からプロパティを選択してクリックします。

   

5. ヘルプを参照し、設定内容を確認します。

   

6. ヘルプの内容を確認し、プロパティの値を入力します。

   

コンテナのプロパティを設定する場合、エレメントの選択状態を解除する必要があります。

ユーザの操作しているPCのOSがWindowsの場合、「Ctl」キーを押しながらエレメント、 またはコンテナをクリックするとエレメントの選択状態を解除できます。 Macintoshの場合「command/control」キーを押しながらエレメント、 またはコンテナをクリックするとエレメントの選択状態を解除できます。

コンテナに設定できるプロパティ種別は以下の通りです。

1. コンテナ設定

   アプリケーション画面のメインページやページタイトルを設定するプロパティです。

2. イベント

   アプリケーション画面の読み込み時、または離脱時に発生させる動作を設定するプロパティです。

エレメントに設定できるプロパティ種別は以下の通りです。

1. エレメント固有

   各エレメントごとに内容は異なります。詳しくはプロパティのヘルプを参照してください。

   コラム

   入力系のエレメントに入力規則を設けたい場合、変数の入力規則を利用してください。 入力規則の設定方法は「変数の設定方法」の「変数の設定」を参照してください。

2. 共通

   設定できるプロパティは以下の通りです。

   • エレメントのID
   • エレメントの表示/非表示
   • ツールチップ

3. イベント

   アクションタブで設定したアクションを実行するきっかけとなる動作を設定するプロパティです。

   例えば「クリック時」にアクションを設定すると、設定対象のエレメントをクリックしたときに設定したアクションが動作します。

   アクションの設定方法は「アクションエディタ画面の操作方法」を参照してください。

4. クラス

   エレメントに独自のクラスを付与できます。クラスを付与することで、クラスに対してCSSを設定できます。

5. 文字色・背景色

   エレメントの色に関する事項を設定するプロパティです。

6. フォント

   エレメントのフォントに関する事項を設定するプロパティです。

7. テキストスタイル

   エレメントのテキストに関する事項を設定するプロパティです。

8. 幅・高さ

   エレメントの幅・高さに関する事項を設定するプロパティです。

9. 余白

   エレメントの余白に関する事項を設定するプロパティです。

   コラム

   CSSエディタを利用すると、エレメントに対し直接CSSを設定することも可能です。

   以下の事例に当てはまる場合、CSSエディタを利用してください。

   • エレメントに対しCSSを詳細に設定したい場合
   • 複数のエレメントに対し、まとめて同じプロパティを設定したい場合