ヘルプメッセージ最終更新日: 2021年3月1日
R8 | R9

ヘルプボタン

画面例

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

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

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

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

定義方法

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

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

図3 ヘルプボタンの設定

項目ラベルへのメッセージ

画面例

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

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

定義方法

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

図5 項目ラベルの内容

画面例 - スタイル指定

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

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

定義方法

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

図8 スタイルの設定

入力フィールドへのメッセージ

画面例

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

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

定義方法

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

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

画面例 - スタイル指定

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

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

定義方法

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

図12 スタイルの設定

マウスオーバー時のメッセージ(ツールチップ)

画面例

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

図13 ツールチップ

定義方法

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

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

プレースホルダのメッセージ

画面例

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

図15 プレースホルダ

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

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

定義方法

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

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

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

改行の扱い

「ヘルプボタンの内容」「項目ラベルの内容」「入力フィールドの内容」「マウスオーバー時のメッセージ」は改行を行うことができます。

図17 改行を含むメッセージの設定

アプリケーションでは改行された箇所が有効になります。

図18 改行を含むメッセージが表示される