項目毎(かつ画面単位)で、さまざまなヘルプメッセージを用意することができます。入力支援として活用できます。

画面例

項目名(ラベル部)の右横にボタンを配置することができます。図1は "Help!" というボタンを置いた例です。

図1 Help!ボタンを配置する

ボタンの上にマウスをのせるとメッセージが表示されます。

図2 ボタンの上にマウスをのせる

定義方法

モデル項目詳細定義の「説明」タブを開きます。登録画面・更新画面・検索画面・詳細画面毎に設定できます。ここでは登録画面を指定します。

「ヘルプボタン」の欄にボタンのラベル(表示文字)を、「内容」の欄にメッセージをそれぞれ記載します。

図3 ヘルプボタンの設定

画面例

項目ラベル部にメッセージを記述することもできます。「項目名」のに表示されます。

図4 項目名の下にメッセージが表示される

定義方法

説明タブ内の「項目ラベル>内容」欄にメッセージを記載します。

図5 項目ラベルの内容

なお、途中の改行は無視されます。(ビルド後は図4と同じようになります。)

図6 改行は無視される

画面例 - スタイル指定

スタイル(文字の大きさや色など)を指定することもできます。(図7)

図7 文字サイズを小さくし、文字色を青に設定した

定義方法

説明タブ内の「項目ラベル>スタイル」欄にCSSを記載します。具体的なCSS文法の説明は割愛します。(CSSに関する他の文献を参照してください。)

図8 スタイルの設定

画面例

図9は入力フィールドにヘルプメッセージを指定した例です。入力フィールドの幅が100%のとき、メッセージは入力フィールドのに表示されます。

図9 入力フィールドの下にメッセージが表示される

定義方法

説明タブ内の「入力フィールド>内容」欄にメッセージを記載します。

図10 入力フィールドの内容

画面例 - スタイル指定

スタイル(文字の大きさや色など)を指定することもできます。(図11)

図11 文字色を青に設定した

定義方法

説明タブ内の「入力フィールド>スタイル」欄にCSSを記載します。具体的なCSS文法の説明は割愛します。(CSSに関する他の文献を参照してください。)

図12 スタイルの設定

画面例

マウスを入力欄にのせる(オーバーラップ)と、メッセージが表示されます。(図13)これをツールチップと呼びます。

図13 ツールチップ

定義方法

説明タブ内の「マウスオーバー時のメッセージ」欄にメッセージを記載します。

図14 マウスオーバー時のメッセージを指定する

画面例

プレースホルダとは、入力欄に値が入力されていない時に表示される文字です。(図15)

図15 プレースホルダ

プレースホルダは「初期値」ではありません。この状態で保存しても、データベースにはプレースホルダの文字は保存されません。(より正確には、何も保存されません。)

この入力欄に一文字でも入力を行なうと、プレースホルダの文字は消えます。

定義方法

図16 プレースホルダのメッセージを指定する

プレースホルダの表示ルールについての補足

  • 本機能は HTML の placeholder 属性を利用して実現しています。そのため本機能に未対応のWebブラウザではご利用になれません。
  • プレースホルダが消えるタイミングは、Web ブラウザによって異なります。
  • テキストエリアには設定できません。