ヘルプメッセージ

最終更新日: 2021年6月11日
R8 | R9

ヘルプボタン

画面例

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

Help!ボタンを配置する

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

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

定義方法

モデル項目詳細定義の「説明」タブを開きます。
登録画面・更新画面・検索画面・詳細画面それぞれ個別に設定できます。
ここでは、登録画面の設定を行ないます。

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

ヘルプボタンの設定

仕様

  • 日付・時刻・郵便番号型の項目に「ヘルプボタン」を設定した場合、標準のヘルプメッセージに代わって、開発者が設定したヘルプボタンの内容が表示されます。
  • 日付・時刻・郵便番号型の項目の「ヘルプボタン」を設定し、内容部(メッセージ)を書き換える場合、「日付・時刻・郵便番号型 > ヘルプボタンを表示する」も有効としてください。

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

画面例

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

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

定義方法

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

項目ラベルの内容

画面例 - スタイル指定

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

文字サイズを小さく、文字色を青に設定

定義方法

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

スタイルの設定

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

画面例

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

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

定義方法

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

入力フィールドの内容

画面例 - スタイル指定

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

文字色を青に設定した

定義方法

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

スタイルの設定

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

画面例

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

ツールチップ

定義方法

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

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

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

画面例

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

プレースホルダ

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

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

定義方法

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

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

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

改行の扱い

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

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

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

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