画面デザインガイドライン

画 面 デザインガイドライン Version5.0 初 版 2005 年 6 月 2 日

変 更 年 月 日 2005/06/02 初 版 << 変 更 履 歴 >> 変 更 内 容

目 次 << 目 次 >> 1 はじめに...1 1.1 開 発 環 境 条 件...1 2 ユーザインタフェース ガイドライン...2 2.1 ガイドラインの 全 体 構 成...2 2.1.1 デザイン 性 に 関 するガイドラインについて...2 2.1.2 操 作 性 に 関 する 指 針 について...2 2.2 デザイン 性 に 関 するガイドライン...3 2.2.1 すべてのページにデザインスタイルシートタグを 記 述 する...4 2.2.2 すべてのページに 内 容 を 的 確 に 示 すタイトルバーをつける...5 2.2.3 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク は ツールバー 内 に 配 置 する...6 2.2.4 処 理 リンクは 画 面 共 通 モジュールを 使 用 する...7 2.2.5 一 覧 のヘッダは 画 面 共 通 モジュールを 使 用 する...8 2.2.6 ソート 切 り 替 え ページ 切 り 替 えは 画 面 共 通 モジュールを 使 用 する...9 2.2.7 入 力 項 目 のデザインを 統 一 する...10 2.2.8 処 理 ボタンのデザインを 統 一 する...15 2.2.9 テーブルタグ<TABLE>を 使 用 して 表 を 作 成 するときのクラスを 統 一 する...16 2.2.10 文 字 色 と 背 景 色 のコントラスト( 明 度 差 など)を 充 分 に 取 る...18 2.2.11 画 像 で 文 字 を 使 用 する 時 は 文 字 フォント サイズ コントラストなどを 考 慮 する...19 2.2.12 スタイルシートで 文 字 サイズを 指 定 しない...20 2.2.13 背 景 色 を 統 一 する...21 2.3 操 作 性 に 関 するガイドライン...22 2.3.1 各 画 面 ごとにヘルプ 画 面 を 用 意 する...23 2.3.2 新 たなウィンドウ(ポップアップ 画 面 )を 開 くことは 必 要 最 小 限 にする...24 2.3.3 画 像 には 画 像 の 内 容 を 的 確 に 示 す alt 属 性 をつける...25 2.3.4 コンボボックスで 大 量 データを 表 示 しない...26 2.3.5 フレーム 化 を 廃 止 し ウィザード 形 式 に 変 更 する...27 2.3.6 横 方 向 のスクロールが 発 生 しないようにする...28 3 画 面 共 通 モジュール...29 3.1 画 面 共 通 モジュールの 全 体 構 成...29 3.1.1 ページベース 開 発 モデルについて...29 3.1.2 J2EEベース 開 発 モデルについて...29 3.2 重 要 事 項...30 3.2.1 デザインスタイルシートの 宣 言...30 3.3 ページベース 開 発 モデル...31 3.3.1 デザインスタイルシート...31 3.3.2 タイトルバー...32 3.3.3 ツールバー...33 3.3.4 入 力 項 目...39 3.3.5 リストコントロール...50 3.3.6 リストヘッダ...53 3.4 J2EEベース 開 発 モデル...57 3.4.1 デザインスタイルシート...57 3.4.2 タイトルバー...58 3.4.3 ツールバー...59 3.4.4 入 力 項 目...64 3.4.5 リストコントロール...76 作 成 者 株 式 会 社 NTT データ イントラマート Page i

intra-mart 画 面 デザインガイドライン(Version5.0) 3.4.6 リストヘッダ... 81 4 画 面 デザインサンプル... 87 4.1 検 索 系 画 面... 88 4.1.1 検 索 条 件 入 力 画 面... 88 4.1.2 検 索 結 果 一 覧 画 面... 89 4.2 登 録 系 画 面... 90 4.3 更 新 削 除 系 画 面... 91 4.4 一 覧 系 画 面... 92 4.4.1 ユーザ 一 覧... 92 4.4.2 ロール 一 覧... 94 5 共 通 アイコン... 96 5.1 タイトルバー... 96 5.2 処 理 系... 96 5.3 検 索 種 別... 96 5.4 ページ 切 替... 97 5.5 昇 順 / 降 順 切 替... 97 5.6 選 択 リストボックス... 97 5.7 ツリー 表 示... 97 5.8 ボタン タブ... 98 Page ii Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

目 次 作 成 者 株 式 会 社 NTT データ イントラマート Page iii

1 はじめに 1 はじめに 本 ドキュメントは ユーザインタフェースの 大 幅 な 向 上 を 目 的 とした 画 面 デザインガイドラインです intra-mart 開 発 者 が 本 ドキュメント 内 で 示 す ユーザインタフェース ガイドラインや 画 面 共 通 モジュール を 利 用 することで 製 品 全 体 の 画 面 デザインや 操 作 性 が 統 一 されることを 目 指 します また 操 作 性 とともに 画 面 デザインを 見 直 すことで 見 た 目 といった 製 品 の 格 調 向 上 だけではなく 利 用 者 がわか りやすく 使 いやすい 製 品 を 目 指 します 1.1 開 発 環 境 条 件 以 下 の 環 境 条 件 を 整 えた 上 で 開 発 作 業 を 進 めてください 使 用 するブラウザは 基 本 的 に IE とする 文 字 サイズは ブラウザのメニュー [ 表 示 ]-[ 文 字 サイズ] を 中 とする(IE の 場 合 ) 画 面 の 解 像 度 を 1024 768 とする ブラウザのスクロールバー アドレスバー ツールバー メニューバーなどは 表 示 する 作 成 者 株 式 会 社 NTT データ イントラマート Page 1

intra-mart 画 面 デザインガイドライン(Version5.0) 2 ユーザインタフェース ガイドライン intra-mart 製 品 は バージョンアップ 複 数 ベンダによるアプリケーション 開 発 を 短 期 間 に 繰 り 返 してきたため 確 立 した 画 面 規 約 がありません そのため アプリケーションやページによってデザインが 異 なっていたり 文 字 サイズや 色 も 統 一 されていません ユーザインタフェース ガイドライン では intra-mart 製 品 の 画 面 設 計 時 に 考 慮 すべき 点 を 明 確 にすることで 製 品 全 体 の 画 面 デザインや 操 作 性 を 統 一 させることを 目 的 としています 2.1 ガイドラインの 全 体 構 成 ユーザインタフェース ガイドラインは 2 つのテーマで 構 成 しています デザイン 性 に 関 するガイドライン 操 作 性 に 関 するガイドライン 各 ガイドラインで 取 り 上 げた 内 容 について 現 状 の 問 題 点 や それに 対 する 改 善 対 策 を 記 述 しています intra-mart 開 発 者 は これらのガイドラインを 参 考 に 画 面 設 計 を 行 ってください また 各 ガイドラインには 実 装 方 法 についてより 理 解 しやすいように 具 体 的 な 実 装 例 を 記 述 しています 実 装 を 検 討 するときや ガイドラインの 意 図 が 不 明 確 なときに 参 考 にしてください 2.1.1 デザイン 性 に 関 するガイドラインについて 画 面 構 成 カラー 文 章 ( 文 言 ) アイコンなど 画 面 全 体 で 統 一 していただきたい 要 件 を 記 載 します 詳 細 は 2.2 デザイン 性 に 関 するガイドライン に 示 します 2.1.2 操 作 性 に 関 する 指 針 について 画 面 の 遷 移 や ポップアップ 画 面 フレームの 扱 いなどについて 改 善 する 要 件 を 記 載 します 詳 細 は 2.3 操 作 性 に 関 するガイドライン に 示 します Page 2 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 2.2 デザイン 性 に 関 するガイドライン この 章 では 画 面 全 体 のデザインを 統 一 するために 画 面 を 作 成 する 際 にカラー 文 章 アイコンなどについて 基 準 となる 要 件 を 記 載 します デザイン 性 に 関 する 指 針 について 表 2-1 デザイン 性 に 関 するガイドライン に 示 します 表 2-1 デザイン 性 に 関 するガイドライン 項 番 項 目 ページ 2.2.1 すべてのページにデザインスタイルシートタグを 記 述 する 4 2.2.2 すべてのページに 内 容 を 的 確 に 示 すタイトルバーをつける 5 2.2.3 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク は ツールバー 内 に 配 置 する 6 2.2.4 処 理 リンクは 画 面 共 通 モジュールを 使 用 する 7 2.2.5 一 覧 のヘッダは 画 面 共 通 モジュールを 使 用 する 8 2.2.6 ソート 切 り 替 え ページ 切 り 替 えは 画 面 共 通 モジュールを 使 用 する 9 2.2.7 入 力 項 目 のデザインを 統 一 する 10 2.2.8 処 理 ボタンのデザインを 統 一 する 15 2.2.9 テーブルタグ<TABLE>を 使 用 して 表 を 作 成 するときのクラスを 統 一 する 16 2.2.10 文 字 色 と 背 景 色 のコントラスト( 明 度 差 など)を 充 分 に 取 る 18 2.2.11 画 像 で 文 字 を 使 用 する 時 は 文 字 フォント サイズ コントラストなどを 考 慮 する 19 2.2.12 スタイルシートで 文 字 サイズを 指 定 しない 20 2.2.13 背 景 色 を 統 一 する 21 作 成 者 株 式 会 社 NTT データ イントラマート Page 3

intra-mart 画 面 デザインガイドライン(Version5.0) 2.2.1 すべてのページにデザインスタイルシートタグを 記 述 する 各 ページで 別 々のスタイルシートを 使 用 していると サイト 内 全 体 の 画 面 デザインがバラバラになってしまいます デザインスタイルシートタグ を 使 用 してスタイルシートの 設 定 を 固 定 化 することで サイト 内 全 体 の 画 面 デザイン を 統 一 します デザインスタイルシートタグは 以 下 の 表 2-2 デザインスタイルシートの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください 2.2.1.1 実 装 例 各 ページの<HEAD>タグ 内 には 必 ずデザインスタイルシートタグを 記 述 する デザインスタイルシートタグは 以 下 に 示 す 画 面 共 通 モジュールを 使 用 する 表 2-2 デザインスタイルシートの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imdesigncss"> 3.3.1 デザインスタイルシート J2EE ベース 開 発 <imarttagimartdesigncss> 3.4.1 デザインスタイルシート 良 い 例 デザインスタイルシートタグを 使 用 して スタイルシートを 設 定 ページベース 開 発 の 場 合 (HTML ファイルのサンプル) <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> </BODY> </HTML> J2EE ベース 開 発 の 場 合 (JSP ファイルのサンプル) <%@ page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> <%@ taglib prefix="imarttag" uri="http//www.intra-mart.co.jp/taglib/ " %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> </BODY> </HTML> 悪 い 例 <LINK>タグにより 各 自 でスタイルシートを 設 定 している <HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="css/common.css"> </HEAD> <BODY> Page 4 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 2.2.2 すべてのページに 内 容 を 的 確 に 示 すタイトルバーをつける 現 在 位 置 の 表 示 がないと 利 用 者 はサイト 全 体 もしくはコンテンツ 内 のどこを 参 照 しているか わからなくなること があります 各 画 面 (ページ)の 最 上 部 には ページの 内 容 を 的 確 に 示 したタイトルバーを 表 示 します タイトルバーの 表 示 には 以 下 の 表 2-3 タイトルバーの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください 2.2.2.1 実 装 例 各 画 面 (ページ)の 最 上 部 には タイトルバー を 配 置 する タイトルバーには アイコン+ページタイトル 名 を 表 示 する タイトルバーの 表 示 には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-3 タイトルバーの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imtitlebar"> 3.3.2 タイトルバー J2EE ベース 開 発 <imarttagimarttitlebar> 3.4.2 タイトルバー 良 い 例 ページの 最 上 部 に 内 容 を 的 確 に 示 したタイトルバーを 表 示 している 悪 い 例 タイトルバーの 表 示 がない 作 成 者 株 式 会 社 NTT データ イントラマート Page 5

intra-mart 画 面 デザインガイドライン(Version5.0) 2.2.3 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク は ツールバー 内 に 配 置 する 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク を 画 面 内 のあらゆる 場 所 に 配 置 していると 次 の 処 理 に 戸 惑 うこ とがあります 各 画 面 (ページ)で タイトルバーの 下 部 にツールバーを 表 示 し 各 処 理 リンク はツールバー 内 に 配 置 します ツールバーの 表 示 には 以 下 の 表 2-4 ツールバーの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください また 処 理 リンクの 詳 細 については 次 章 の 2.2.4 処 理 リンクは 画 面 共 通 モジュールを 使 用 する で 説 明 します 2.2.3.1 実 装 例 各 画 面 (ページ)のタイトルバーの 下 部 に ツールバー を 表 示 する ページ 内 で 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク は すべてツールバーに 配 置 する ( 処 理 リンクの 詳 細 については 2.2.4 処 理 リンクは 画 面 共 通 モジュールを 使 用 する を 参 照 ) ツールバーの 表 示 には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-4 ツールバーの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 J2EE ベース 開 発 <IMART type="imtoolbarframe"> <IMART type="imtoolbarleft"> <IMART type="imtoolbarright"> <imarttagimarttoolbarframe> <imarttagimarttoolbarleft> <imarttagimarttoolbarright> 3.3.3 ツールバー 3.4.3 ツールバー 処 理 リンク 配 置 位 置 の 方 針 メイン 処 理 系 ( 登 録 更 新 検 索 )のリンクは ツールバーの 左 側 に 配 置 する サブ 処 理 系 ( 最 新 情 報 ヘルプ)のリンクは ツールバーの 右 側 に 配 置 する [ 参 考 ] よく 使 用 される 処 理 リンクをツールバーの 右 側 / 左 側 に 分 けて 以 下 に 示 す 表 2-5 ツールバー 内 の 処 理 リンク 配 置 位 置 例 使 用 箇 所 アイコン 内 容 ツールバー 左 側 new.gif 新 規 登 録 や 追 加 など メイン 処 理 系 edit.gif 編 集 ( 登 録 更 新 検 索 など) print.gif 印 刷 search.gif 検 索 右 側 arrow_left.gif 戻 る サブ 処 理 系 reload.gif 最 新 の 情 報 ( 戻 る 最 新 情 報 ヘルプ help.gif ヘルプ など) close.gif 閉 じる(ポップアップ 画 面 のみ) その 他 のアイコンは 5 共 通 アイコン を 参 照 すること 良 い 例 各 ページのタイトルバーの 下 部 にツールバーを 表 示 し 処 理 リンクを 配 置 している Page 6 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 2.2.4 処 理 リンクは 画 面 共 通 モジュールを 使 用 する 画 面 内 に 多 数 ある 処 理 リンク を 個 人 で 配 置 するとデザインや 表 示 方 法 がバラバラになってしまいます 処 理 リンクを 配 置 する 場 合 は 以 下 の 表 2-6 処 理 リンクの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュール を 使 用 してください 2.2.4.1 実 装 例 処 理 リンクは 画 面 共 通 モジュールすべてツールバー 内 に 配 置 する (ツールバーの 詳 細 については 2.2.3 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク は ツールバー 内 に 配 置 する を 参 照 ) 処 理 リンクには アイコン+ 処 理 名 を 表 示 する 処 理 リンクの 表 示 には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-6 処 理 リンクの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imicon"> 3.3.3.5.4 <IMART type="imicon"> J2EE ベース 開 発 <imarttagimarticon> 3.4.3.5.4 <imarttagimarticon> 良 い 例 画 面 共 通 モジュールを 使 用 して 処 理 リンク を 作 成 している ページベース 開 発 の 場 合 (HTML のサンプル) <HTML> <HEAD> <IMART type = "imdesigncss"></imart> </HEAD> <BODY> <IMART type = "imicon" name = " 検 索 " icon = "images/standard/serch.gif" href = "javascriptonserch();"> </IMART> </BODY> </HTML> J2EE ベース 開 発 の 場 合 (JSP のサンプル) <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> <imarttagimarticon name = " 検 索 " icon = "/images/standard/serch.gif" href = "javascriptonserch();" /> </BODY> </HTML> 作 成 者 株 式 会 社 NTT データ イントラマート Page 7

intra-mart 画 面 デザインガイドライン(Version5.0) 2.2.5 一 覧 のヘッダは 画 面 共 通 モジュールを 使 用 する 画 面 内 に 一 覧 (リスト)を 表 示 するときの 一 覧 のヘッダ を 個 人 で 作 成 すると デザインや 表 示 方 法 がバラバラ になってしまいます 一 覧 (リスト)を 表 示 するときの 一 覧 ヘッダは 以 下 の 表 2-7 一 覧 ヘッダの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください 2.2.5.1 実 装 例 一 覧 ヘッダの 表 示 には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-7 一 覧 ヘッダの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imlistheader"> 3.3.6 リストヘッダ J2EE ベース 開 発 <imarttagimartlistheader> 3.4.6 リストヘッダ 良 い 例 画 面 共 通 モジュールを 使 用 して 一 覧 ヘッダを 作 成 している Page 8 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 2.2.6 ソート 切 り 替 え ページ 切 り 替 えは 画 面 共 通 モジュールを 使 用 する 画 面 内 に 一 覧 (リスト)を 表 示 するときに 必 要 となる ソート 切 り 替 え および ページ 切 り 替 え のコントロール ( 以 下 リストコントロール) を 個 人 で 作 成 すると デザインや 表 示 方 法 がバラバラになってしまいます 一 覧 表 示 をするときの リストコントロールは 以 下 の 表 2-8 リストコントロールの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください 2.2.6.1 実 装 例 一 覧 表 示 をするときの リストコントロール には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-8 リストコントロールの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imlistcontrol"> 3.3.5 リストコントロール J2EE ベース 開 発 <imarttagimartlistcontrol> 3.4.5 リストコントロール 良 い 例 画 面 共 通 モジュールを 使 用 して リストコントロールを 作 成 している ページベース 開 発 の 場 合 (HTML ファイルのサンプル) <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> <TABLE class="" width="100%"> <TR> <IMART type="imlistcontrol " maxrecord=all_datacnt currentpage=page_num pageline=view_max </IMART> </TR> </TABLE> </BODY> </HTML> sortorder=sort_order> // 全 件 数 // 現 在 のページ 番 号 // 1 ページの 表 示 件 数 // ソート 昇 順 降 順 を 指 定 J2EEベース 開 発 の 場 合 のサンプルは 3.4.5 リストコントロール の 3.4.5.4 使 用 例 を 参 照 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 9

intra-mart 画 面 デザインガイドライン(Version5.0) 2.2.7 入 力 項 目 のデザインを 統 一 する 新 規 登 録 や 更 新 削 除 および 検 索 条 件 入 力 画 面 などで 入 力 項 目 や 項 目 名 称 (ラベル)を 表 示 するときに 個 人 で 作 成 するとデザインや 表 示 方 法 がバラバラになってしまします 入 力 項 目 および 項 目 名 称 のデザインを 統 一 するために これらを 作 成 するときには 2.2.7.1 入 力 項 目 の 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 することを 推 奨 します また 画 面 共 通 モジュールを 使 用 しない 場 合 や 画 面 共 通 モジュールだけでは 賄 えない 入 力 項 目 の 部 品 を 各 自 で 作 成 する 場 合 は 2.2.7.2 入 力 項 目 の 書 式 方 法 に 示 す 書 式 で 作 成 してください 2.2.7.1 入 力 項 目 の 画 面 共 通 モジュール 入 力 項 目 および 項 目 名 称 を 作 成 するときには 以 下 の 表 2-9 入 力 項 目 を 作 成 するために 使 用 する 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください 2.2.7.1.1 実 装 例 入 力 項 目 の 表 示 には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-9 入 力 項 目 を 作 成 するために 使 用 する 画 面 共 通 モジュール 入 力 項 目 部 品 画 面 共 通 モジュール 詳 細 項 目 名 <IMART type="imitemname"> 3.3.4.5.1 項 目 名 称 <imarttagimartitemnametd> 3.4.4.5.1 項 目 名 称 入 力 フィールド <IMART type="iminputtd"> 3.3.4.5.2 入 力 フィールド <imarttagimartinputtd> 3.4.4.5.2 入 力 フィールド 選 択 ボックス <IMART type="imselecttd"> 3.3.4.5.3 選 択 ボックス <imarttagimartselecttd> 3.4.4.5.3 選 択 ボックス 良 い 例 入 力 項 目 および 項 目 名 称 を 画 面 共 通 モジュールで 作 成 ししている 記 述 例 を 次 頁 の 表 2-10 入 力 項 目 を 作 成 する 画 面 共 通 モジュールの 記 述 例 に 示 します Page 10 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 表 2-10 入 力 項 目 を 作 成 する 画 面 共 通 モジュールの 記 述 例 <%@ page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> <%@ taglib prefix="imarttag" uri="http//www.intra-mart.co.jp/taglib/foundation/imarttag" %> <% Vector from = new Vector(); HashMap hashtemp = new HashMap(); // 月 データ String[] fromlist = new String[]{" 東 京 都 ", " 神 奈 川 県 ", " 埼 玉 県 ", " 千 葉 県 "}; String[] fromvalue = new String[]{"Tokyo", "Kanagawa", "Saitama", "Chiba"}; // コンボ 値 ( 月 ) for(int i = 0 ; i < fromlist.length ; i++) { hashtemp = new HashMap(); hashtemp.put("value", fromvalue[i]); hashtemp.put("from", fromlist[i]); from.add(hashtemp); } %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> <!-- 入 力 項 目 表 示 --> <TABLE width="100%" border="0" cellpadding="0" cellspacing="0"> <TR> <TD align="center"> <TABLE class="edit"> <TR> <imarttagimartitemnametd name="ユーザ ID" /> <imarttagimartinputtd type="text" name="userid" size="30" value="user00011" readonly /> </TR> <TR> <imarttagimartitemnametd name="ユーザ 名 " require /> <imarttagimartinputtd type="text" name="userid" size="50" value="ユーザ 00011" /> </TR> <TR> <imarttagimartitemnametd name="パスワード" require /> <imarttagimartinputtd type="password" name="password" size="40" /> </TR> <TR> <imarttagimartitemnametd name=" 出 身 地 " /> <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" /> </TR> <TR> <imarttagimartitemnametd name=" 転 送 ファイル" /> <imarttagimartinputtd type="file" name="forwarfile" size="50" /> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML> 作 成 者 株 式 会 社 NTT データ イントラマート Page 11

intra-mart 画 面 デザインガイドライン(Version5.0) 2.2.7.2 入 力 項 目 の 書 式 方 法 前 章 の 2.2.7.1 入 力 項 目 の 画 面 共 通 モジュール を 使 用 しない 場 合 で 項 目 名 称 (ラベル)や 入 力 項 目 およ び 選 択 項 目 を 各 自 で 作 成 するときには 画 面 デザインを 統 一 するために 各 HTMLタグに 指 定 するクラスや 書 式 方 法 を 必 ず 守 ってください 以 下 に 指 定 するクラスや 書 式 方 法 の 詳 細 を 示 します 2.2.7.2.1 入 力 項 目 項 目 名 称 に 指 定 するクラス 入 力 項 目 を 表 示 する <TABLE> <TD> および <INPUT>タグには 以 下 の 表 2-11 入 力 項 目 の 作 成 時 に 指 定 するタグのクラス に 示 すclassを 必 ず 指 定 してください 表 2-11 入 力 項 目 の 作 成 時 に 指 定 するタグのクラス タグ クラス 用 途 <TABLE> edit 全 体 のデザインを 整 える <TD> bottom アンダーラインを 表 示 する <INPUT> default 入 力 項 目 の 背 景 色 default_right 入 力 項 目 の 背 景 色 (テキスト 右 寄 せ 表 示 ) <SELECT> default 選 択 項 目 の 背 景 色 <FONT> attention 必 須 項 目 名 称 HTML の 記 述 例 <HTML> <BODY> <TABLE class="edit" width="100%"> <TR> <TD class="bottom"> <STRONG>ユーザ ID</STRONG> <FONT class="attention">( 必 須 )</FONT> </TD> <TD class="bottom"><input class="default" type="text" ></TD> </TR> <TR> <TD class="bottom">ソート 番 号 </TD> <TD class="bottom"><input class="default_right" type="text" ></TD> </TR> <TR> <TD class="bottom"> 出 身 地 </TD> <TD class="bottom"><select class="default" ></TD> </TR> </TABLE> </BODY> </HTML> 画 面 表 示 例 Page 12 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 2.2.7.2.2 項 目 名 称 の 書 式 入 力 項 目 および 項 目 名 称 (ラベル) を 表 示 する 場 合 は 以 下 の 書 式 を 必 ず 守 って 作 成 してください 2.2.7.2.2.1 必 須 項 目 の 場 合 項 目 名 称 を 黒 色 の 太 字 で 表 示 し 赤 色 で ( 必 須 ) の 文 字 を 記 述 する (1) 入 力 項 目 を 作 成 する <TABLE>タグに class="edit" を 指 定 する (2) <TD>タグに class="bottom" を 指 定 する (3) <STRONG> </STRONG> タグを 記 述 して 項 目 名 称 を 太 字 にする 必 須 の 文 字 を <FONT class="attention">( 必 須 )</FONT> で 記 述 する <TABLE class="edit"> (1) <TR> <TD class="bottom"> (2) <STRONG>ユーザ 名 </STRONG> <FONT class="attention">( 必 須 )</FONT> (3) </TD> <TD class="bottom"> <INPUT > </TD> </TR> </TABLE> ( 表 示 結 果 ) 2.2.7.2.2.2 通 常 項 目 の 場 合 項 目 名 称 を 黒 色 の 標 準 の 太 さで 表 示 する (1) 入 力 項 目 を 作 成 する <TABLE>タグに class="edit" を 指 定 する (2) <TD>タグに class="bottom" を 指 定 して 項 目 名 称 を 記 述 する <TABLE class="edit"> (1) <TR> <TD class="bottom">ユーザ 名 </TD> (2) <TD class="bottom"> <INPUT > </TD> </TR> </TABLE> ( 表 示 結 果 ) 作 成 者 株 式 会 社 NTT データ イントラマート Page 13

intra-mart 画 面 デザインガイドライン(Version5.0) 2.2.7.2.3 入 力 フィールドの 書 式 入 力 項 目 の 入 力 フィールド を 表 示 する 場 合 は 以 下 の 書 式 を 必 ず 守 って 作 成 してください (1) 入 力 項 目 を 作 成 する <TABLE>タグに class="edit" を 指 定 する (2) 項 目 名 称 を 記 述 する ( 2.2.7.2.2 項 目 名 称 の 書 式 を 参 照 ) (3) <TD>タグに class="bottom" を 指 定 する (4) 作 成 する 入 力 フィールドの <INPUT>タグや <SELECT>タグに class="default" を 指 定 する (5) 数 値 入 力 などで 入 力 文 字 を 右 寄 せ で 表 示 したい 場 合 は <INPUT>タグに class="default_right" を 指 定 する <INPUT> タグで 入 力 項 目 の 作 成 <TABLE class="edit"> (1) <TR> <TD class="bottom"> 項 目 名 称 を 記 述 </TD> (2) <TD class="bottom"> (3) <INPUT class="default" type="text" value="user001" > (4) </TD> </TR> </TABLE> ( 表 示 結 果 ) <INPUT> タグで 入 力 項 目 の 作 成 <TABLE class="edit"> (1) <TR> <TD class="bottom"> 項 目 名 称 を 記 述 </TD> (2) <TD class="bottom"> (3) <INPUT class="default_right" type="text" value="100" > (5) </TD> </TR> </TABLE> ( 表 示 結 果 ) <SELECT> タグで 選 択 項 目 の 作 成 <TABLE class="edit"> (1) <TR> <TD class="bottom"> 項 目 名 称 を 記 述 </TD> (2) <TD class="bottom"> (3) <SELECT class="default" > (4) </TD> </TR> </TABLE> ( 表 示 結 果 ) Page 14 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 2.2.8 処 理 ボタンのデザインを 統 一 する 画 面 内 に 多 数 ある 処 理 ボタン を 個 人 で 配 置 するとデザインや 表 示 方 法 がバラバラになってしまいます 処 理 ボタンのデザインを 統 一 するために 処 理 ボタンを 配 置 する 場 合 は 以 下 の 2.2.8.1 実 装 例 で 示 す 書 式 で 作 成 してください 2.2.8.1 実 装 例 デザインを 統 一 するために 処 理 ボタンを 作 成 するときは 必 ず 以 下 の 書 式 を 使 用 すること 良 い 例 処 理 ボタンを 決 められた 書 式 で 作 成 している [ 処 理 ボタンを 作 成 する HTML 部 分 のサンプル] <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> <!-- 登 録 ボタンの 作 成 --> <TABLE class="button"> <TR> <TD class="button_padding"> <IMG src="images/standard/button_left.gif"> </TD> <TD class="button_bg"> <INPUT name="regist" type="submit" class="button_bg" value=" 登 録 "> </TD> <TD class="button_padding"> <IMG src="images/standard/button_right.gif"> </TD> </TR> </TABLE> </BODY> </HTML> [ 上 記 のサンプルにより 表 示 される 処 理 ボタン] 作 成 者 株 式 会 社 NTT データ イントラマート Page 15

intra-mart 画 面 デザインガイドライン(Version5.0) 2.2.9 テーブルタグ<TABLE>を 使 用 して 表 を 作 成 するときのクラスを 統 一 する <TABLE>タグを 使 用 して 表 (リスト)を 作 成 する 場 合 は テーブルのボーダラインを 統 一 するために <TABLE> タグ および <TD>タグには 以 下 の 表 2-12 表 を 作 成 時 に 指 定 するクラス に 示 す classを 設 定 します <TABLE>タグと<TD>タグに 指 定 する class の 組 み 合 わせによって 表 の 作 成 を 実 現 することができます ( 例 ) <TABLE class="table_border_bg"> + <TD class="list_data_bg"> + = 2.2.9.1 実 装 例 表 を 作 成 する 場 合 は 必 ず <TABLE>タグ および <TD>タグに class の 指 定 を 記 述 する <TABLE>タグの class には list_border_bg または table_border_bg を 使 用 する <TD>タグには 使 用 する 用 途 によって class の 記 述 を 変 更 する 表 2-12 表 を 作 成 時 に 指 定 するクラス タグ クラス 用 途 表 示 例 <TABLE> <TD> class="list_border_bg" 表 全 体 の 枠 横 幅 100% 固 定 class="table_border_bg" 表 全 体 の 枠 横 幅 任 意 指 定 class="list_title_bg" 項 目 名 ( 通 常 ) 表 示 位 置 任 意 class="list_title_bg_center" 項 目 名 ( 通 常 ) 表 示 位 置 中 央 class="list_title_bg_left" 項 目 名 ( 通 常 ) 表 示 位 置 左 寄 せ class="list_title_bg_right" 項 目 名 ( 通 常 ) 表 示 位 置 右 寄 せ class="list_title_sort_bg" 項 目 名 ( 強 調 ) 表 示 位 置 任 意 class="list_title_sort_bg_center" 項 目 名 ( 強 調 ) 表 示 位 置 中 央 class="list_title_sort_bg_left" 項 目 名 ( 強 調 ) 表 示 位 置 左 寄 せ class="list_title_sort_bg_right" 項 目 名 ( 強 調 ) 表 示 位 置 右 寄 せ class="list_data_bg" データ 部 表 示 位 置 中 央 class="list_data_bg_left" データ 部 表 示 位 置 左 寄 せ class="list_data_bg_right" データ 部 表 示 位 置 右 寄 せ Page 16 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 良 い 例 表 を 作 成 する<TABLE>および<TD>タグに 規 定 の class を 指 定 している ページベース 開 発 の 場 合 (HTML ファイルのサンプル) <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> <TABLE class="list_border_bg"> <TR> <TD class="list_title_bg_center"> </TD> </TR> <TR> <TD class="list_data_bg"> </TD> </TR> </TABLE> </BODY> </HTML> 悪 い 例 <TABLE>および<TD>タグに 各 自 で 属 性 を 設 定 している ページベース 開 発 の 場 合 (HTML ファイルのサンプル) <HTML> <BODY> <TABLE border="0" cellpadding="0" cellspacing="2"> <TR> <TD> </TD> </TABLE> 作 成 者 株 式 会 社 NTT データ イントラマート Page 17

intra-mart 画 面 デザインガイドライン(Version5.0) 2.2.10 文 字 色 と 背 景 色 のコントラスト( 明 度 差 など)を 充 分 に 取 る 文 字 色 と 背 景 色 のコントラスト ( 明 度 差 など) が 小 さいほど 文 字 は 読 みにくくなります また ディスプレイやプリンタ OS の 種 類 によって 色 の 再 現 性 が 微 妙 に 異 なるため 明 度 コントラストが 小 さいと 文 字 が 読 みにくくなる 可 能 性 が 高 くなります 文 字 色 と 背 景 色 のコントラストを 充 分 に 取 って 文 字 を 読 みやすくしてください 2.2.10.1 実 装 例 背 景 色 と 文 字 色 の 明 度 の 差 を 充 分 に 確 保 する 特 に 赤 と 緑 白 と 黄 白 と 水 色 青 と 黒 青 紫 と 黒 の 組 み 合 わせになどに 注 意 する 良 い 例 背 景 色 と 文 字 色 に 明 度 差 があるので 文 字 が 読 みやすい 悪 い 例 背 景 色 と 文 字 色 に 明 度 差 がなく 文 字 が 読 みにくい Page 18 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 2.2.11 画 像 で 文 字 を 使 用 する 時 は 文 字 フォント サイズ コントラストなどを 考 慮 する 画 像 内 に 描 かれた 文 字 は ブラウザでサイズや 色 のコントラストを 変 更 できません 無 意 味 に 文 字 を 画 像 にすることは 避 け 画 像 にする 場 合 は サイズや 色 のコントラストに 配 慮 し 読 みやすくしてく ださい 2.2.11.1 実 装 例 文 字 ( 特 に 漢 字 ) の 装 飾 ( 斜 体 など) は 少 なくする 文 字 の 背 景 に 模 様 のある 画 像 や 写 真 などを 使 用 する 時 は 文 字 の 周 りを 縁 取 るなどし 文 字 を 見 やすく する 文 字 のフォントは ゴシック 系 を 使 用 することが 望 ましい ( 画 面 上 では 明 朝 系 よりも ゴシック 系 のフォント のほうが 見 やすいため) 良 い 例 読 みやすい 悪 い 例 いずれも 文 字 が 読 みにくい 作 成 者 株 式 会 社 NTT データ イントラマート Page 19

intra-mart 画 面 デザインガイドライン(Version5.0) 2.2.12 スタイルシートで 文 字 サイズを 指 定 しない スタイルシートを 使 用 して 文 字 サイズを 指 定 する 場 合 絶 対 単 位 (in, cm, mm, pt, pc)を 使 用 すると ブラウザ の 文 字 サイズを 変 更 しても 大 きさが 変 わりません Page 20 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 2.2.13 背 景 色 を 統 一 する 各 ページや 画 面 によって 背 景 色 (バックグランドカラー)が 異 なっています また 同 一 画 面 内 でも フレーム 分 けされた 背 景 色 が 異 なっている 場 合 があります サイト 内 で 背 景 色 を 統 一 してください 2.2.13.1 実 装 例 背 景 色 (バックグランドカラー)を 規 定 し AP 内 で 統 一 する 文 字 や 画 像 の 邪 魔 にならない 背 景 色 を 使 用 する 悪 い 例 同 一 画 面 内 で 背 景 色 が 異 なる 悪 い 例 ページによって 背 景 色 が 異 なる 作 成 者 株 式 会 社 NTT データ イントラマート Page 21

intra-mart 画 面 デザインガイドライン(Version5.0) 2.3 操 作 性 に 関 するガイドライン 操 作 性 に 関 する 指 針 では 画 面 全 体 のデザインを 統 一 するために 画 面 を 作 成 する 際 にカラー 文 章 アイコンな どについて 基 準 となる 要 件 を 記 載 します 操 作 性 に 関 する 指 針 について 表 2-13 操 作 性 に 関 する 指 針 に 示 します 表 2-13 操 作 性 に 関 する 指 針 項 番 項 目 ページ 2.3.1 各 画 面 ごとにヘルプ 画 面 を 用 意 する 23 2.3.2 新 たなウィンドウ(ポップアップ 画 面 )を 開 くことは 必 要 最 小 限 にする 24 2.3.3 画 像 には 画 像 の 内 容 を 的 確 に 示 す alt 属 性 をつける 25 2.3.4 コンボボックスで 大 量 データを 表 示 しない 26 2.3.5 フレーム 化 を 廃 止 し ウィザード 形 式 に 変 更 する 27 2.3.6 横 方 向 のスクロールが 発 生 しないようにする 28 Page 22 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 2.3.1 各 画 面 ごとにヘルプ 画 面 を 用 意 する メインの 画 面 (ページ)に 解 説 やヘルプとなる 文 章 を 記 載 していると 画 面 全 体 がゴチャゴチャし まとまりがなくな ってしまいます ヘルプ 画 面 を 別 途 用 意 することで 入 力 項 目 とヘルプ 解 説 部 分 が 切 り 分 けられ 画 面 全 体 の 見 やすさだけでなく 操 作 性 も 向 上 します 2.3.1.1 実 装 例 各 画 面 ごとに ヘルプ 画 面 を 用 意 する ヘルプ 画 面 はポップアップで 表 示 する 良 い 例 解 説 部 分 が 別 途 ヘルプ 画 面 として 用 意 された [ヘルプ]ボタンを クリック 悪 い 例 メイン 画 面 内 に 解 説 を 書 き 過 ぎていて 見 づらい 作 成 者 株 式 会 社 NTT データ イントラマート Page 23

intra-mart 画 面 デザインガイドライン(Version5.0) 2.3.2 新 たなウィンドウ(ポップアップ 画 面 )を 開 くことは 必 要 最 小 限 にする 必 要 以 上 に 多 くのウィンドウを 開 くと サイトを 表 示 している 機 器 に 負 担 がかかるため コンテンツの 表 示 速 度 が 遅 くなることがあります また 新 しいウィンドウが 開 いたことに 気 づかなかったり どのウィンドウで 作 業 していたのかわからなくなり その 変 化 に 戸 惑 う 場 合 があります さらに 多 くのウィンドウが 開 いた 場 合 不 要 なウィンドウを 閉 じなければならず 余 計 な 操 作 が 発 生 することになり ます 新 たなウィンドウ(ポップアップ 画 面 )を 開 かずに ウィザード 形 式 で 画 面 を 遷 移 するようにしてください 2.3.2.1 実 装 例 新 たなウィンドウ(ポップアップ 画 面 )を 開 かずに ウィザード 形 式 で 画 面 遷 移 をする ポップアップ 画 面 のほうが 内 容 を 参 照 しやすい 場 合 は あらかじめリンク 元 で 新 しいウィンドウが 開 くこと を 明 示 しておくほうが 望 ましい 例 えば ユーザ 検 索 ( 新 しいウィンドウで 表 示 ) などと 表 記 する 悪 い 例 新 しいウィンドウ(ポップアップ 画 面 )がいくつも 表 示 されている Page 24 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 2.3.3 画 像 には 画 像 の 内 容 を 的 確 に 示 す alt 属 性 をつける 利 用 者 は 画 像 に alt 属 性 が 指 定 されていないと 画 像 の 内 容 を 把 握 できない 場 合 があります また リンクのある 画 像 の 場 合 は リンクでの 遷 移 先 が 明 確 でないと 操 作 に 戸 惑 う 場 合 があります 画 像 には alt 属 性 をつけて 画 像 の 内 容 を 的 確 に 示 してください 2.3.3.1 実 装 例 画 像 にリンクがない 場 合 alt 属 性 で 画 像 の 内 容 を 記 述 する 意 味 を 持 たない 画 像 ( 箇 条 書 きのポインタなど) や テキストが 併 記 されている 画 像 には alt=""と 記 述 する ( ""の 中 には 何 も 入 力 しない) 画 像 にリンクがある 場 合 alt 属 性 でリンク 先 を 記 述 する リンク 先 を alt 属 性 として 記 述 することで 画 像 の 説 明 が 不 要 となる 場 合 は 画 像 の 説 明 を 省 略 して よい 画 像 の 内 容 を 詳 細 に 解 説 する 必 要 がある 場 合 は リンク 先 は alt 属 性 に 記 述 し 画 像 の 解 説 は 画 像 と 同 じ HTML 内 にテキストで 記 述 する その 他 画 像 のボタン(image タイプの<input>タグに type="image" を 使 用 する 場 合 )にも alt 属 性 を 指 定 する 良 い 例 alt 属 性 でリンク 先 を 記 述 良 い 例 alt 属 性 で 画 像 を 解 説 悪 い 例 alt 属 性 なし 作 成 者 株 式 会 社 NTT データ イントラマート Page 25

intra-mart 画 面 デザインガイドライン(Version5.0) 2.3.4 コンボボックスで 大 量 データを 表 示 しない 大 量 データをコンボボックスで 表 示 すると 画 面 の 内 容 が 隠 れてしまったり スクロールによってデータを 探 さなけ ればならなため 操 作 に 戸 惑 う 場 合 があります 大 量 データや 可 変 データの 場 合 は コンボボックス 表 示 ではなく リスト 表 示 形 式 にすることで 参 照 や 操 作 性 が 向 上 します 2.3.4.1 実 装 例 大 量 データや 可 変 データは コンボボックスではなくリスト 形 式 で 表 示 する 良 い 例 大 量 データをリスト 形 式 で 表 示 している 悪 い 例 大 量 のデータをコンボボックスで 表 示 している Page 26 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

2 ユーザインタフェース ガイドライン 2.3.5 フレーム 化 を 廃 止 し ウィザード 形 式 に 変 更 する 無 駄 なフレームわけが 多 く ユーザビリティーだけでなく デザイン 性 やレスポンスの 低 下 を 招 く 原 因 となっていま す フレーム 分 けを 廃 止 し ウィザード 形 式 やタブによるページ 切 り 替 えに 変 更 することで 操 作 性 がアップし 見 やす さも 向 上 します 2.3.5.1 実 装 例 フレーム 分 けを 廃 止 する ウィザード 形 式 やタブによるページ 切 り 替 えに 変 更 良 い 例 ウィザード 形 式 に 変 更 し 操 作 性 やデザイン 性 がアップ 対 象 を 選 択 すると 画 面 が 切 り 替 わり [ 更 新 削 除 ] 画 面 が 表 示 される 悪 い 例 フレーム 分 けが 多 く 操 作 がわかりずらい またデザイン 性 も 悪 い 作 成 者 株 式 会 社 NTT データ イントラマート Page 27

intra-mart 画 面 デザインガイドライン(Version5.0) 2.3.6 横 方 向 のスクロールが 発 生 しないようにする ブラウザで 縦 と 横 のスクロールが 表 示 されている 場 合 ページ 全 体 の 把 握 が 困 難 になります スクロールを 縦 方 向 だけにすることで ページを 参 照 しやすくなります 2.3.6.1 実 装 例 画 面 を 作 成 する 際 には 横 方 向 のスクロールが 表 示 されないように 設 計 する 良 い 例 横 方 向 スクロールが 表 示 されないように 画 面 を 設 計 悪 い 例 横 方 向 スクロールと 縦 方 向 スクロールが 混 同 していて 操 作 が 困 難 またデザイン 性 も 悪 い Page 28 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

3 画 面 共 通 モジュール 3 画 面 共 通 モジュール intra-mart 製 品 の 画 面 (ページ) 内 で 共 通 して 使 用 されるコントロール 部 品 を 画 面 共 通 モジュール (ページベ ース 開 発 モデル および J2EE ベース 開 発 モデル) として 用 意 しています 本 章 で 示 す 各 画 面 共 通 モジュール を 利 用 することで 製 品 全 体 の 画 面 デザインや 操 作 性 を 統 一 させること を 目 的 としています 3.1 画 面 共 通 モジュールの 全 体 構 成 画 面 共 通 モジュールは 2 つの 開 発 モデルで 用 意 されています ページベース 開 発 モデル J2EE ベース 開 発 モデル 各 画 面 共 通 モジュールでは 使 用 方 法 についてより 理 解 しやすいように 具 体 的 な 使 用 例 を 記 述 していま す 実 装 する 際 の 参 考 にしてください 3.1.1 ページベース 開 発 モデルについて ページベース 開 発 モデル 用 に 用 意 されている 画 面 共 通 モジュールを 以 下 に 示 します 表 3-1 ページベース 開 発 モデルの 画 面 共 通 モジュール 画 面 共 通 モジュール ページ 3.3.1 デザインスタイルシート 31 3.3.2 タイトルバー 32 3.3.3 ツールバー 33 3.3.4 入 力 項 目 39 3.3.5 リストコントロール 50 3.3.6 リストヘッダ 53 3.1.2 J2EE ベース 開 発 モデルについて J2EE ベース 開 発 モデル 用 に 用 意 されている 画 面 共 通 モジュールを 以 下 に 示 します 表 3-2 J2EE ベース 開 発 モデルの 画 面 共 通 モジュール 画 面 共 通 モジュール ページ 3.4.1 デザインスタイルシート 57 3.4.2 タイトルバー 58 3.4.3 ツールバー 59 3.4.4 入 力 項 目 64 3.4.5 リストコントロール 76 3.4.6 リストヘッダ 81 作 成 者 株 式 会 社 NTT データ イントラマート Page 29

intra-mart 画 面 デザインガイドライン(Version5.0) 3.2 重 要 事 項 3.2.1 デザインスタイルシートの 宣 言 本 章 で 示 す 画 面 共 通 モジュール を 使 用 する 際 は 必 ず 各 画 面 を 構 成 している HTML の<HEAD>タグ 内 に デザインスタイルシート の 宣 言 を 行 ってください デザインスタイルシートは 画 面 共 通 モジュールとして 用 意 されています 詳 細 は 以 下 をご 覧 ください 表 3-3 デザインスタイルシートの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imdesigncss"> 3.3.1 デザインスタイルシート J2EE ベース 開 発 <imarttagimartdesigncss> 3.4.1 デザインスタイルシート 以 下 に デザインスタイルシートの 記 述 例 を 示 します [ 記 述 例 1] ページベース 開 発 モデルの 場 合 (HTML ファイルのサンプル) <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> </BODY> </HTML> [ 記 述 例 2] J2EE ベース 開 発 モデルの 場 合 (JSP ファイルのサンプル) <%@ page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> <%@ taglib prefix="imarttag" uri="http//www.intra-mart.co.jp/taglib/foundation/imarttag" %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> </BODY> </HTML> Page 30 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

3 画 面 共 通 モジュール 3.3 ページベース 開 発 モデル 3.3.1 デザインスタイルシート 3.3.1.1 機 能 詳 細 <IMART type="imdesigncss"> により スタイルシートを 設 定 する 3.3.1.2 制 約 本 タグを 配 置 する 場 所 は HTML の<HEAD> タグ 内 です 3.3.1.3 属 性 <IMART type="imdesigncss"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imdesigncss を 指 定 する 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imdesigncss" 3.3.1.4 使 用 例 デザインスタイルシートを 設 定 するためのサンプルを 以 下 に 示 します HTML のサンプル <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> </BODY> </HTML> 3.3.1.5 注 意 点 各 画 面 (ページ)を 作 成 する htlm ファイルの <HEAD> タグ 内 には 必 ず デザインスタイルシート <IMART type="imdesigncss"></imart> を 記 述 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 31

intra-mart 画 面 デザインガイドライン(Version5.0) 3.3.2 タイトルバー 3.3.2.1 機 能 詳 細 <IMART type="imtitlebar"> により タイトルバーを 表 示 する タイトルバーには アイコン と ページタイトル 名 を 指 定 して 表 示 することができる 3.3.2.2 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です 3.3.2.3 属 性 <IMART type="imtitlebar"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imtitlebar を 指 定 する 属 性 title には ページタイトル 名 を 指 定 する 属 性 icon には アイコン のファイル 名 を ドキュメントルートからの 相 対 パスで 指 定 する 属 性 icon を 未 指 定 にした 場 合 は アイコン (images/standard/title.gif) が 表 示 される 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imtitlebar" title ページタイトル 名 - title=" 新 規 登 録 " icon アイコンのファイル 名 (ドキュメントルートからの 相 対 パス) list.gif icon="images/standard/title.gif" 3.3.2.4 使 用 例 タイトルバーを 表 示 するためのサンプルを 以 下 に 示 します HTML のサンプル <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> <!-- タイトルバー 表 示 --> <IMART type="imtitlebar" title=" 新 規 登 録 " icon="images/standard/title.gif"> </IMART> </BODY> </HTML> 表 示 結 果 Page 32 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

3 画 面 共 通 モジュール 3.3.3 ツールバー 3.3.3.1 機 能 詳 細 <IMART type="imtoolbarfame"> タグにより ツールバーの 外 枠 を 表 示 する (タグの 詳 細 は 3.3.3.5.1 <IMART type ="imtoolbarframe"> を 参 照 ) ツールバーの 中 には 複 数 の 処 理 リンク を 配 置 することができる <IMART type="imtoolbarleft"> タグに 挟 まれた 処 理 リンク は ツールバーの 左 側 に 配 置 される (タグの 詳 細 は 3.3.3.5.2 <IMART type="imtoolbarleft"> を 参 照 ) <IMART type="imtoolbarright"> タグに 挟 まれた 処 理 リンク は ツールバーの 右 側 に 配 置 される (タグの 詳 細 は 3.3.3.5.3 <IMART type="imtoolbarright"> を 参 照 ) <IMART type="imtoolbarfame"> タグに 挟 まれた 範 囲 に <IMART type="imtoolbarright"> タグおよ び <IMART type="imtoolbarleft"> タグがどちらも 存 在 しない 場 合 の 動 作 については 未 定 義 とする <IMART type="imicon"> タグにより アイコン+ 処 理 名 の 処 理 リンクを 表 示 する (タグの 詳 細 は 3.3.3.5.4 <IMART type="imicon"> を 参 照 ) 3.3.3.2 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です 3.3.3.3 手 順 ここでは ツールバーを 作 成 するための 手 順 として HTML ファイルに 記 述 する 内 容 を 簡 単 に 説 明 します ソースコードのサンプルについては 3.3.3.4 使 用 例 を 参 照 してください (1) <IMART type="imdesigncss"> を 記 述 して スタイルシートの 宣 言 を 行 います ( 記 述 方 法 については 3.3.1 デザインスタイルシート を 参 照 ) (2) <IMART type="imtoolbarframe"> タグを 記 述 して ツールバーの 外 枠 を 表 示 します (3) <IMART type="imtoolbarframe"> タグに 挟 まれた 範 囲 に <IMART type="imtoolbarleft"> タグを 記 述 します (ツールバーの 左 側 に 配 置 する 処 理 リンク がない 場 合 は 省 略 可 能 ) (4) <IMART type="imtoolbarframe"> タグに 挟 まれた 範 囲 に <IMART type="imtoolbarright"> タグを 記 述 します (ツールバーの 右 側 に 配 置 する 処 理 リンク がない 場 合 は 省 略 可 能 ) (5) <IMART type="imicon" > タグを <IMART type="imtoolbarleft"> タグ または <IMART type="imtoolbarright"> タグに 挟 まれた 範 囲 に 記 述 して アイコン+ 処 理 名 の 処 理 リンクを 表 示 します (6) 処 理 リンク をツールバーの 左 側 に 表 示 するときは <IMART type="imtoolbarleft"> タグに 挟 まれた 範 囲 に <IMART type="imicon" > タグを 記 述 してください (7) 処 理 リンク をツールバーの 右 側 に 表 示 するときは <IMART type="imtoolbarright"> タグに 挟 まれ た 範 囲 に <IMART type="imicon" > タグを 記 述 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 33

intra-mart 画 面 デザインガイドライン(Version5.0) 3.3.3.4 使 用 例 ツールバーを 表 示 するためのサンプルを 以 下 に 示 します HTML のサンプル <HTML> <HEAD> <IMART type = "imdesigncss"></imart> </HEAD> <BODY> <!-- タイトルバー 表 示 --> ( 省 略 ) <!-- ツールバー 表 示 --> <IMART type = "imtoolbarframe"> <IMART type = "imtoolbarleft"> <IMART type = "imicon" name = " 新 規 登 録 " icon = "images/standard/new.gif" 手 順 (5) (6) href = "javascriptonaddaction();"> </IMART> <IMART type = "imicon" name = " 検 索 条 件 " icon = "images/standard/search.gif" 手 順 (5) (6) href = "javascriptonsearchaction();"> </IMART> </IMART> <IMART type = "imtoolbarright"> <IMART type = "imicon" name = " 戻 る" 手 順 (5) (7) icon = "images/standard/arrow_left.gif" href = "javascriptonbackaction();"> </IMART> <IMART type = "imicon" name = " 最 新 情 報 " icon = "images/standard/refresh.gif" 手 順 (5) (7) href = "javascriptonreloadaction();"> </IMART> </IMART> </IMART> </BODY> </HTML> 手 順 (3) 手 順 (4) 手 順 (1) 手 順 (2) 表 示 結 果 Page 34 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

3 画 面 共 通 モジュール 3.3.3.5 ツールバーを 作 成 するために 必 要 な<IMART>タグ この 章 では ツールバーを 作 成 するために 必 要 な <IMART> タグの 詳 細 を 示 します ツールバーは 以 下 の 表 3-4 ツールバーに 必 要 な 画 面 共 通 モジュール に 示 す <IMART> タグで 構 成 されて います 表 3-4 ツールバーに 必 要 な 画 面 共 通 モジュール 参 照 ページ 3.3.3.5.1 <IMART type ="imtoolbarframe"> 35 3.3.3.5.2 <IMART type="imtoolbarleft"> 36 3.3.3.5.3 <IMART type="imtoolbarright"> 37 3.3.3.5.4 <IMART type="imicon"> 38 3.3.3.5.1 <IMART type ="imtoolbarframe"> 3.3.3.5.1.1 詳 細 ツールバーの 外 枠 を 表 示 する ツールバーの 表 示 色 は テーマによって 自 動 に 設 定 される 3.3.3.5.1.2 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です 3.3.3.5.1.3 属 性 <IMART type="imtoolbarfame"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imtoolbarfame を 指 定 する 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imtoolbarfame" 作 成 者 株 式 会 社 NTT データ イントラマート Page 35

intra-mart 画 面 デザインガイドライン(Version5.0) 3.3.3.5.2 <IMART type="imtoolbarleft"> 3.3.3.5.2.1 詳 細 ツールバー 内 の 左 側 に 処 理 リンク を 表 示 させたいときに 使 用 する ツールバーの 左 側 に 表 示 する 処 理 リンク がないときは 省 略 可 能 である 必 ず <IMART type="imtoolbarframe"> </IMART> に 挟 まれた 範 囲 に 記 述 すること <IMART type="imtoolbarleft"> </IMART> に 挟 まれた 範 囲 に 記 述 された 処 理 リンク は ツールバ ー 内 で 左 寄 せに 表 示 される 本 タグに 挟 まれた 範 囲 には 複 数 の 処 理 リンク を 記 述 することができる 処 理 リンク には <IMART type="imicon"> タグ ( 詳 細 は 3.3.3.5.4 <IMART type="imicon"> を 参 照 ) だけでなく 通 常 のHTMLタグ<A href="xxxx"></a> や <IMART type="link"> なども 記 述 すること が 可 能 である 3.3.3.5.2.2 制 約 本 タグを 単 独 で 利 用 することはできない <IMART type="imtoolbarframe"> タグの 内 部 タグとして 利 用 すること (タグの 詳 細 は 3.3.3.5.1 <IMART type ="imtoolbarframe"> を 参 照 ) 本 タグは<IMART type="imtoolbarright"> </IMART> タグの 前 に 記 述 すること (タグの 詳 細 は 3.3.3.5.3 <IMART type="imtoolbarright"> を 参 照 ) 3.3.3.5.2.3 属 性 <IMART type="imtoolbarleft"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imtoolbarleft を 指 定 する 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imtoolbarleft" Page 36 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

3 画 面 共 通 モジュール 3.3.3.5.3 <IMART type="imtoolbarright"> 3.3.3.5.3.1 詳 細 ツールバー 内 の 右 側 に 処 理 リンク を 表 示 させたいときに 使 用 する ツールバーの 右 側 に 表 示 する 処 理 リンク がないときは 省 略 可 能 である 必 ず <IMART type="imtoolbarframe"> </IMART> に 挟 まれた 範 囲 に 記 述 すること <IMART type="imtoolbarright"> </IMART> に 挟 まれた 範 囲 に 記 述 された 処 理 リンク は ツール バー 内 で 右 寄 せに 表 示 される 本 タグに 挟 まれた 範 囲 には 複 数 の 処 理 リンク を 記 述 することができる 処 理 リンク には <IMART type="im_icon"> タグ ( 詳 細 は 3.3.3.5.4 <IMART type="imicon"> を 参 照 ) だけでなく 通 常 のHTMLタグ<A href="xxxx"></a> や <IMART type="link"> なども 記 述 すること が 可 能 である 3.3.3.5.3.2 制 約 本 タグを 単 独 で 利 用 することはできない <IMART type="imtoolbarframe"> タグの 内 部 タグとして 利 用 すること (タグの 詳 細 は 3.3.3.5.1 <IMART type ="imtoolbarframe"> を 参 照 ) 本 タグは<IMART type="imtoolbarleft"> </IMART> タグの 後 に 記 述 すること (タグの 詳 細 は 3.3.3.5.2 <IMART type="imtoolbarleft"> を 参 照 ) 3.3.3.5.3.3 属 性 <IMART type="imtoolbarright"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imtoolbarright を 指 定 する 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imtoolbarright" 作 成 者 株 式 会 社 NTT データ イントラマート Page 37

intra-mart 画 面 デザインガイドライン(Version5.0) 3.3.3.5.4 <IMART type="imicon"> 3.3.3.5.4.1 詳 細 ツールバー 内 に 処 理 リンク を 表 示 する この <IMART type="imicon"> タグにより アイコン+ 処 理 名 の 処 理 リンクが 表 示 される アイコン のみ または 処 理 名 のみの 表 示 も 可 能 である 属 性 icon により 表 示 するアイコンを 指 定 できる 属 性 name により 表 示 する 処 理 名 を 指 定 できる 処 理 を 選 択 された 時 のリンク 先 として js の 関 数 名 や URL を 指 定 することができる また リンク 先 の 表 示 ウィンドウを 指 定 することができる 本 タグを <IMART type="imtoolbarleft"> タグに 挟 まれた 範 囲 に 記 述 すると ツールバー 内 で 左 寄 せ に 表 示 される 本 タグを <IMART type="imtoolbarright"> タグに 挟 まれた 範 囲 に 記 述 すると ツールバー 内 で 右 寄 せ に 表 示 される 本 タグを 記 述 した 順 番 に ツールバーの 左 から 処 理 リンク が 配 置 される 3.3.3.5.4.2 属 性 <IMART type="imicon"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imicon を 指 定 する 属 性 name には 処 理 名 を 指 定 する 属 性 name を 未 指 定 にした 場 合 は アイコン だけが 表 示 される 属 性 icon には アイコン のファイル 名 を ドキュメントルートから 相 対 パスで 指 定 する 属 性 icon を 未 指 定 にした 場 合 は 処 理 名 だけが 表 示 される 属 性 name および 属 性 icon がどちらも 未 指 定 の 場 合 は 処 理 リンクの 配 置 を 無 視 する 属 性 href には 処 理 を 選 択 された 際 のリンク 先 を 指 定 する 指 定 する 値 は js の 関 数 名 (javascriptxxxxx();)や URL などが 可 能 である 属 性 href を 未 指 定 にした 場 合 は リンク 表 示 ではなく ただのテキスト 表 示 になる 属 性 target にはリンク 先 の 表 示 ウィンドウを 指 定 する 指 定 する 値 は HTML の target 属 性 に 従 う 属 性 target を 未 指 定 にした 場 合 は 同 ウィンドウに 表 示 される 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imicon" name 処 理 名 - name=" 新 規 登 録 " icon アイコンのファイル 名 (ドキュメントルートからの 相 対 パ - icon= "images/standard/new_item.gif" ス) href 処 理 選 択 時 のジャンプ 先 (js 実 行 関 数 名 や URL など) - href="javascriptonaddaction()" href="http//www.intra-mart.co. jp" target 表 示 ウィンドウ - target="_top" Page 38 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

3 画 面 共 通 モジュール 3.3.4 入 力 項 目 ここでは 登 録 系 画 面 や 更 新 削 除 系 画 面 などで 頻 繁 に 使 用 される 項 目 名 称 + 入 力 フィールド をまとめて 入 力 項 目 として 説 明 しています 3.3.4.1 機 能 詳 細 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 を 作 成 する 際 に 使 用 するタグである <IMART type=" imitemname"> により 項 目 名 称 を 表 示 する (タグの 詳 細 は 3.3.4.5.1 項 目 名 称 を 参 照 ) <IMART type="iminputtd"> により 入 力 フィールドを 表 示 する (タグの 詳 細 は 3.3.4.5.2 入 力 フィールド を 参 照 ) <IMART type="imselecttd"> により 選 択 部 品 (セレクトボックス) を 表 示 する (タグの 詳 細 は 3.3.4.5.3 選 択 ボックス を 参 照 ) 3.3.4.2 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 3.3.4.4 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 3.3.4.3 手 順 ここでは 入 力 項 目 を 作 成 するための 手 順 として HTML ファイルに 記 述 する 内 容 を 簡 単 に 説 明 します (1) <IMART type="imdesigncss"> を 記 述 して スタイルシートの 宣 言 を 行 います ( 記 述 方 法 については 3.3.1 デザインスタイルシート を 参 照 ) (2) デザインを 統 一 するため <TABLE><TR>~</TR></TABLE> を 記 述 します (3) <IMART type="imitemname"> タグを (2) に 挟 まれた 範 囲 に 記 述 して 項 目 名 称 を 表 示 します (4) <IMART type="iminputtd"> タグを (2) に 挟 まれた 範 囲 に 記 述 して 入 力 フィールドを 表 示 します (5) 選 択 ボックスに 設 定 する 表 示 データ を ファンクション コンテナ(.js ファイル)の init() 関 数 内 で 構 築 します (6) <IMART type="imselecttd"> タグを (2) に 挟 まれた 範 囲 に 記 述 して 選 択 ボックスを 表 示 します ソースコードのサンプルについては 3.3.4.4 使 用 例 を 参 照 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 39

intra-mart 画 面 デザインガイドライン(Version5.0) 3.3.4.4 使 用 例 入 力 項 目 を 表 示 するためのサンプルを 以 下 に 示 します HTML のサンプル <HTML> <HEAD> <IMART type = "imdesigncss"></imart> 手 順 (1) </HEAD> <BODY> <!-- 入 力 項 目 表 示 --> <TABLE width="100%" border="0" cellpadding="0" cellspacing="0"> <TR> <TD align="center"> <TABLE class="edit"> <TR> <IMART type = "imitemname" name = "ユーザ ID"></IMART> 手 順 (3) <IMART type = "iminputtd" style = "text" name = "userid" size = "30" 手 順 (4) value = "User00011" readonly></imart> </TR> <TR> <IMART type = "imitemname" name = "ユーザ 名 " require></imart> 手 順 (3) <IMART type = "iminputtd" style = "text" name = "username" 手 順 (4) size = "50" value = "ユーザ 00011"></IMART> </TR> <TR> <IMART type = "imitemname" name = "パスワード" require></imart> 手 順 (3) <IMART type = "iminputtd" style = "password" 手 順 (4) name = "password" size = "40"></IMART> </TR> <TR> <IMART type = "imitemname" name = " 出 身 地 "></IMART> 手 順 (3) <IMART type = "imselecttd" list = listdata 次 ページの js のサンプル 参 照 手 順 (6) name = "hometown" size = "1"></IMART> </TR> <TR> <IMART type="imitemname" name=" 転 送 ファイル"></IMART> 手 順 (3) <IMART type = "iminputtd" style = "file" 手 順 (4) name = "forwarfile" size = "50"></IMART> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML> 手 順 (2) Page 40 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

3 画 面 共 通 モジュール js のサンプル // バインド 変 数 宣 言 var listdata; // 選 択 ボックスの 表 示 データ // ページの 初 期 化 関 数 function init() { listdata = new Object(); listdata["tokyo"] = " 東 京 都 "; listdata["kanagawa"] = " 神 奈 川 県 "; listdata["saitama"] = " 埼 玉 県 "; listdata["chiba"] = " 千 葉 県 "; 手 順 (5) } もしくは // バインド 変 数 宣 言 var listdata; // 選 択 ボックスの 表 示 データ // ページの 初 期 化 関 数 function init() { listdata = new Object(); listdata.tokyo = " 東 京 都 "; listdata.kanagawa = " 神 奈 川 県 "; listdata.saitama = " 埼 玉 県 "; listdata.chiba = " 千 葉 県 "; 手 順 (5) } 表 示 結 果 作 成 者 株 式 会 社 NTT データ イントラマート Page 41

intra-mart 画 面 デザインガイドライン(Version5.0) 3.3.4.5 入 力 項 目 を 作 成 するために 使 用 する<IMART>タグ 3.3.4.5.1 項 目 名 称 3.3.4.5.1.1 詳 細 <IMART type="imitemname"> により 入 力 項 目 の 項 目 名 称 を 表 示 する 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 の 項 目 名 称 を 記 述 する 際 に 使 用 する 属 性 name に 指 定 した 値 が 項 目 名 称 として 表 示 される 属 性 require を 指 定 すると 必 須 項 目 として 表 示 される 必 須 項 目 の 場 合 は 項 目 名 称 が 太 字 で 表 示 され 赤 色 で ( 必 須 ) の 文 字 が 記 述 される 属 性 require が 未 指 定 の 場 合 は 通 常 項 目 として 表 示 される 3.3.4.5.1.2 制 約 HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 3.3.4.4 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 3.3.4.5.1.3 属 性 <IMART type="imitemname"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imitemname を 指 定 する 属 性 name には 項 目 名 称 を 指 定 する 属 性 require を 指 定 すると 必 須 項 目 として 表 示 される 属 性 require を 未 指 定 にした 場 合 は 通 常 項 目 として 表 示 される その 他 <TD> タグに 設 定 する 各 属 性 値 が 指 定 できる 指 定 する 値 は HTML の <TD>タグ 属 性 に 従 う 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imitemname" name 項 目 名 称 - name="ユーザ 名 " require 必 須 項 目 の 指 定 - require その 他 <TD>タグに 設 定 する 各 属 性 値 width="150" colspan="2" [ 記 述 例 1] 属 性 require を 指 定 して 必 須 項 目 にした 場 合 <IAMRT type="imitemname" name="ユーザ 名 " require></imart> [ 記 述 例 2] 属 性 require を 未 指 定 して 通 常 項 目 にした 場 合 <IMART type="imitemname" name="ユーザ 名 "></IMART> Page 42 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

3 画 面 共 通 モジュール 3.3.4.5.2 入 力 フィールド 3.3.4.5.2.1 詳 細 <IMART type="iminputtd"> により 入 力 項 目 の 入 力 フィールドを 表 示 する 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 の 入 力 フィールドを 記 述 する 際 に 使 用 する 属 性 style に 指 定 した 値 によって 異 なる 入 力 フィールドを 表 示 することができる 属 性 style="text" を 指 定 した 場 合 は テキスト 入 力 フィールドが 表 示 される 属 性 style="password" を 指 定 した 場 合 は パスワード 入 力 フィールドが 表 示 される 属 性 style="file" を 指 定 した 場 合 は ファイル 入 力 フィールドが 表 示 される 属 性 style="textarea" を 指 定 した 場 合 は テキストエリア 入 力 フィールドが 表 示 される (HTML の<TEXTAREA>タグとして 作 成 される) 属 性 style="textarea" 以 外 は HTML の<INPUT>タグとして 作 成 される 3.3.4.5.2.2 制 約 HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 3.3.4.4 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 43

intra-mart 画 面 デザインガイドライン(Version5.0) 3.3.4.5.2.3 属 性 <IMART type="iminputtd"> に 指 定 する 属 性 を 以 下 に 示 します 共 通 属 性 属 性 type には IMART タグ 名 iminputtd を 指 定 する 属 性 style には 表 示 する 部 品 の 種 類 を 指 定 する ( 属 性 style="textarea" 以 外 は HTML の<INPUT>タグの type 属 性 同 様 ) 属 性 name には 名 前 を 指 定 する (HTML の<INPUT> および <TEXTAREA>タグの name 属 性 同 様 ) 属 性 colspan には <TD>タグに 設 定 する colspan 属 性 を 指 定 する 属 性 rowspan には <TD>タグに 設 定 する rowspan 属 性 を 指 定 する 属 性 align には <TD>タグに 設 定 する align 属 性 を 指 定 する 属 性 tdclass には <TD>タグに 設 定 する class 属 性 を 指 定 する 属 性 class には <INPUT> および <TEXTAREA> タグに 設 定 する class 属 性 を 指 定 する 属 性 type="text" の 場 合 この 属 性 class に class="default_right" を 指 定 すると テキスト 入 力 フィールドの 入 力 文 字 が 右 寄 せで 表 示 される その 他 <TD> タグに 設 定 する 各 属 性 値 が 指 定 できる 指 定 する 値 は HTML の <TD>タグ 属 性 に 従 う 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="iminputtd" style 部 品 の 種 類 textテキスト 入 力 フィールド passwordパスワード 入 力 フィールド fileファイル 入 力 フィールド textareaテキストエリア 入 力 フィールド - style="text" style="password" style="file" style="textarea" name 名 前 - name="userid" colspan <TD>タグの colspan 属 性 - colspan="2" rowspan <TD>タグの rowspan 属 性 - rowspan="4" align <TD>タグの align 属 性 ( 横 方 向 表 示 位 置 ) canter 中 央 表 示 right 右 寄 せ left 左 寄 せ tdclass <TD>タグの class 属 性 class その 他 <INPUT>タグおよび <TEXTAREA>の class 属 性 <TD>タグに 設 定 する 各 属 性 値 - default default aligh="center" tdclass ="default_right" class ="default_right" width="150" colspan="2" Page 44 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

3 画 面 共 通 モジュール style="text" の 属 性 テキスト 入 力 フィールド 属 性 size には 入 力 フィールドの 大 きさ を 指 定 する (HTML の<INPUT>タグの size 属 性 同 様 ) 属 性 value には 入 力 フィールドの 初 期 値 を 指 定 する (HTML の<INPUT>タグの value 属 性 同 様 ) 属 性 readonly を 指 定 した 場 合 は 入 力 フィールドへの 入 力 が 不 可 になります (HTML の<INPUT>タグの readonly 属 性 同 様 ) 属 性 readonly を 未 指 定 にした 場 合 は デフォルト 値 入 力 可 能 が 設 定 される 属 性 説 明 必 須 デフォルト 値 書 式 size 大 きさ - size="50" value 初 期 値 value="user00011" - readonly 入 力 不 可 の 指 定 - readonly [ 記 述 例 1] 属 性 readonly を 未 指 定 して 入 力 可 能 にした 場 合 <IMART type="iminputtd" style="text" name="userid" size="30" value="user00011"></imart> [ 記 述 例 2] 属 性 readonly を 指 定 して 入 力 不 可 にした 場 合 <IMART type="iminputtd" style="text" name="userid" size="30" value="user00011" readonly></imart> [ 記 述 例 3] 属 性 class に "default_right" を 指 定 した 場 合 <IMART type="iminputt d" style="text" class="default_right" name="sort_no" size="10" value="200"></imart> 作 成 者 株 式 会 社 NTT データ イントラマート Page 45

intra-mart 画 面 デザインガイドライン(Version5.0) style="password" の 属 性 パスワード 入 力 フィールド 属 性 size には 入 力 フィールドの 大 きさ を 指 定 する (HTML の<INPUT>タグの size 属 性 同 様 ) 属 性 value には 入 力 フィールドの 初 期 値 を 指 定 する (HTML の<INPUT>タグの value 属 性 同 様 ) 属 性 属 性 readonly を 指 定 した 場 合 は 入 力 フィールドへの 入 力 が 不 可 になります (HTML の<INPUT>タグの readonly 属 性 同 様 ) 属 性 readonly を 未 指 定 にした 場 合 は デフォルト 値 入 力 可 能 が 設 定 される 属 性 説 明 必 須 デフォルト 値 書 式 size 大 きさ - size="40" value 初 期 値 value="password00001" - readonly 入 力 不 可 の 指 定 - readonly [ 記 述 例 1] 属 性 readonly を 未 指 定 して 入 力 可 能 にした 場 合 <IMART type="iminputtd" style="password" name="pass" size="40" value="pass00011"></imart> [ 記 述 例 2] 属 性 readonly を 指 定 して 入 力 不 可 にした 場 合 <IMART type="iminputtd" style="password" name="pass" size="40" value="pass00011" readonly></imart> style="file" の 属 性 ファイル 入 力 フィールド 属 性 size には 入 力 フィールドの 大 きさ を 指 定 する (HTML の<INPUT>タグの size 属 性 同 様 ) 属 性 説 明 必 須 デフォルト 値 書 式 size 大 きさ - size="50" [ 記 述 例 ] 属 性 size="50" を 指 定 して 表 示 <IMART type="iminputtd" style="file" name="forward_file" size="50"></imart> Page 46 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

3 画 面 共 通 モジュール style="textarea" の 属 性 テキストエリア 表 示 属 性 value には 表 示 する 文 字 列 を 指 定 する 属 性 cols には テキストエリアの 横 幅 を 指 定 する (HTML の<TEXTAREA>タグの cols 属 性 同 様 ) 属 性 rows には テキストエリアの 縦 幅 ( 行 数 ) を 指 定 する (HTML の<TEXTAREA>タグの rows 属 性 同 様 ) 属 性 属 性 readonly を 指 定 した 場 合 は 入 力 フィールドへの 入 力 が 不 可 になります (HTML の<TEXTAREA>タグの readonly 属 性 同 様 ) 属 性 readonly を 未 指 定 にした 場 合 は デフォルト 値 入 力 可 能 が 設 定 される 属 性 説 明 必 須 デフォルト 値 書 式 value 表 示 する 文 字 列 - value=" ここに 長 い " cols テキストエリアの 横 幅 (<TEXTAREA>の cols 属 性 ) rows テキストエリアの 縦 幅 ( 行 数 ) (<TEXTAREA>の rows 属 性 ) readonly 入 力 不 可 の 指 定 - - - cols="40" rows="5" readonly [ 記 述 例 ] 属 性 cols="40" 属 性 rows="5" を 指 定 して 表 示 <IMART type="iminputtd" style="textarea" name="comment" cols="40" rows="5" value="ここに 長 い 文 章 が 書 けます "></IMART> 作 成 者 株 式 会 社 NTT データ イントラマート Page 47

intra-mart 画 面 デザインガイドライン(Version5.0) 3.3.4.5.3 選 択 ボックス 3.3.4.5.3.1 詳 細 <IMART type="imselecttd"> により 入 力 項 目 の 選 択 ボックスを 表 示 する 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 の 選 択 ボックスを 記 述 する 際 に 使 用 する 既 存 の 画 面 共 通 モジュール <IMART type="select"> とほぼ 同 じ 機 能 であり 画 面 デザインを 統 一 する ためにデザインが 変 更 されている 3.3.4.5.3.2 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 3.3.4.4 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 3.3.4.5.3.3 属 性 <IMART type="imselecttd"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imselecttd を 指 定 する 属 性 list には 表 示 リスト をオブジェクトで 指 定 する 属 性 list に 指 定 されたオブジェクトの プロパティ 名 が コンボボックス 内 の 各 要 素 (<OPTION>タグ) のvalue 値 になり 該 当 するプロパティに 格 納 されている 値 が コンボボックス 内 の 要 素 の 画 面 上 での 表 示 名 になる (オブジェクトに 格 納 されている 値 が 文 字 列 以 外 の 場 合 の 動 作 は 保 障 外 である ) 属 性 list に 指 定 したオブジェクトに 格 納 されているすべての 値 が コンボボックス 内 の 表 示 要 素 になる [ 属 性 list に 指 定 するオブジェクトの 例 ] listdata["tokyo"] = " 東 京 都 "; listdata.tokyo = " 東 京 都 "; value 値 表 示 名 value 値 表 示 名 属 性 selected には コンボボックスの 初 期 選 択 ( 初 期 表 示 ) 値 を 指 定 する 初 期 選 択 状 態 にする 値 のキー( 属 性 list に 指 定 したオブジェクトに 該 当 するプロパティ 名 )を 指 定 するこ とで 初 期 選 択 状 態 にすることができる 属 性 selected に 指 定 した 値 に 該 当 するキーが 属 性 list に 存 在 しない 場 合 は どの 値 も 選 択 状 態 に はならない また 初 期 選 択 状 態 とするキーを 同 時 に 複 数 個 指 定 する 場 合 は 属 性 selected に 対 して 配 列 を 指 定 す ることで 可 能 となる その 際 配 列 内 の 各 要 素 の 値 として 初 期 選 択 状 態 にするキー( 属 性 list に 格 納 したオブジェクトの 該 当 するプロパティ 名 )を 格 納 すること 属 性 blank には コンボボックス 内 に 空 データを 表 示 させる 位 置 を 指 定 する 属 性 blank に"top" を 指 定 した 場 合 は ボックス 内 の 先 頭 位 置 に 空 データが 表 示 される 属 性 blank に"bottom" を 指 定 した 場 合 は ボックス 内 の 最 後 尾 位 置 に 空 データが 表 示 される 属 性 size には 一 度 に 表 示 する 選 択 肢 の 行 数 を 指 定 する (HTML の<SELECT>タグの size 属 性 同 様 ) 属 性 size を 未 指 定 にした 場 合 は デフォルト 値 1 が 設 定 される 属 性 multiple を 指 定 した 場 合 は 複 数 行 選 択 が 可 能 になる (HTML の<SELECT>タグの multiple 属 性 が 付 加 される) 属 性 multiple を 未 指 定 にした 場 合 は 複 数 行 選 択 が 不 可 になる その 他 <TD> タグに 設 定 する 各 属 性 値 が 指 定 できる 指 定 する 値 は HTML の <TD>タグ 属 性 に 従 う Page 48 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

3 画 面 共 通 モジュール 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imselecttd" list 表 示 リスト - list=listdata selected 初 期 選 択 値 の 設 定 selected - =selectedata blank 空 データを 表 示 する 位 置 blank="top" top 先 頭 位 置 に 空 データ - bottom 最 後 尾 位 置 に 空 データ name 名 前 - name="hometown" size 表 示 する 行 数 1 size="5" multiple 複 数 行 選 択 の 可 否 multiple - その 他 <TD>タグに 設 定 する 各 属 性 値 width="150" colspan="2" [ 記 述 例 1] listdataの 設 定 方 法 については 3.3.4.4 使 用 例 を 参 照 <IMART type="imselecttd" list=listdata name="hometown"></imart> [ 記 述 例 2] 属 性 blank="top" に 指 定 した 場 合 先 頭 に 空 データが 挿 入 <IMART type="imselecttd" list=listdata name="hometown" blank="bottom"></imart> [ 記 述 例 3] 属 性 blank="bottom" に 指 定 した 場 合 最 後 尾 に 空 データが 挿 入 <IMART type="imselecttd" list=listdata name="hometown" blank="bottom"></imart> [ 記 述 例 4] 属 性 size="3" に 指 定 した 場 合 <IMART type="imselecttd" list=listdata name="hometown" size="3"></imart> 作 成 者 株 式 会 社 NTT データ イントラマート Page 49

intra-mart 画 面 デザインガイドライン(Version5.0) 3.3.5 リストコントロール 3.3.5.1 機 能 詳 細 <IMART type="imlistcontrol"> により 各 種 一 覧 に 対 する ソート 切 り 替 えコントロールと ページ 切 り 替 えコントロールを 表 示 する ソート および ページ 切 り 替 えコントロールはリンク 表 示 となっている 各 コントロールのリンクがクリックされると JavaScript 関 数 が 呼 び 出 されるため 本 タグを 使 用 した 場 合 は 各 コントロールに 対 してJavaScript 関 数 の 処 理 を 記 述 する 必 要 がある ( 詳 細 は 3.3.5.5 必 須 のJavaScript 関 数 を 参 照 ) ソート 切 り 替 えコントロールは 属 性 の 指 定 により 表 示 非 表 示 を 設 定 することができる ページ 切 り 替 えコントロールには 次 ページ 前 ページ 最 初 のページ 最 後 のページ の 矢 印 リンクが 用 意 されている 一 覧 表 示 が 最 後 のページの 場 合 は 次 ページ および 最 後 のページ リンクは 非 表 示 になる 一 覧 表 示 が 最 初 のページの 場 合 は 前 ページ および 最 初 のページ リンクは 非 表 示 になる 一 覧 の 表 示 件 数 が [ 全 件 数 <1ページの 表 示 数 ] の 場 合 は ページ 切 り 替 えコントロールは 表 示 されな い (ページ 件 数 の 表 示 のみ) 3.3.5.2 制 約 本 タグは HTML の<TABLE>タグとして 作 成 されます 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です 3.3.5.3 属 性 <IMART type="imlistcontrol"> に 指 定 する 属 性 を 以 下 に 示 す 属 性 type には IMART タグ 名 imlistcontrol を 指 定 する 属 性 maxrecord には 一 覧 に 表 示 するデータの 全 件 数 を 指 定 する 属 性 currentpage には 表 示 するページ 番 号 を 指 定 する 属 性 currentpage を 未 指 定 にした 場 合 は 1 ページ 目 が 表 示 される 属 性 pageline には 1ページの 表 示 数 を 指 定 することができる 属 性 pageline を 未 指 定 にした 場 合 は 1 ページに 表 示 される 件 数 は 10 件 となる 昇 順 / 降 順 切 り 替 えコントロールは 表 示 または 非 表 示 を 指 定 することができる 属 性 sortdisplay に true を 指 定 した 場 合 は 表 示 false を 指 定 した 場 合 は 非 表 示 になる 属 性 sortdisplay が 未 指 定 の 場 合 は 昇 順 / 降 順 切 り 替 えコントロールが 表 示 される 属 性 sortorder には ソート 基 準 方 向 を 指 定 する 現 在 のソート 方 向 が 昇 順 の 場 合 は asc 降 順 の 場 合 は desc を 指 定 する 属 性 sortorder を 未 指 定 にした 場 合 は デフォルト 値 の asc ( 昇 順 ) となる 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imlistcontrol" maxrecord 全 件 数 - maxrecord="50" currentpage 表 示 するページ 番 号 1 currentpage="1" pageline 1 ページの 表 示 数 10 pageline="20" sortdisplay 昇 順 / 降 順 の 有 無 sortdisplay="true" true (true 表 示 /false 非 表 示 ) sortorder ソート 基 準 方 向 sortorder="desc" asc (asc 昇 順 /desc 降 順 ) Page 50 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.