画面デザインガイドライン
|
|
|
- よりお ながおか
- 5 years ago
- Views:
Transcription
1 画面デザインガイドライン Version6.1 第二版 2009 年 09 月 30 日
2
3 << 変更履歴 >> 変更年月日変更内容 2007/07/31 初版 2009/09/30 第二版 5.3 検索種別 の誤字を修正しました
4
5 1 はじめに << 目次 >> 1 はじめに 開発環境条件 ユーザインタフェース ガイドライン ガイドラインの全体構成 デザイン性に関するガイドラインについて 操作性に関する指針について デザイン性に関するガイドライン すべてのページにデザインスタイルシートタグを記述する すべてのページに内容を的確に示すタイトルバーをつける 処理や画面を切り替えるための 処理リンク は ツールバー内に配置する 処理リンクは画面デザイン共通モジュールを使用する 一覧のヘッダは画面デザイン共通モジュールを使用する ソート切り替え ページ切り替えは画面デザイン共通モジュールを使用する 入力項目のデザインを統一する 処理ボタンのデザインを統一する テーブルタグ <TABLE> を使用して表を作成するときのクラスを統一する 文字色と背景色のコントラスト ( 明度差など ) を充分に取る 画像で文字を使用する時は 文字フォント サイズ コントラストなどを考慮する スタイルシートで文字サイズを指定しない 背景色を統一する 操作性に関するガイドライン 各画面ごとにヘルプ画面を用意する 新たなウィンドウ ( ポップアップ画面 ) を開くことは 必要最小限にする 画像には 画像の内容を的確に示す alt 属性をつける コンボボックスで大量データを表示しない フレーム化を廃止し ウィザード形式に変更する 横方向のスクロールが発生しないようにする 画面デザイン共通モジュール 画面デザイン共通モジュールの全体構成 スクリプト開発モデルについて JavaEE 開発モデルについて 重要事項 デザインスタイルシートの宣言 スクリプト開発モデル デザインスタイルシート タイトルバー ツールバー 入力項目 リストコントロール リストヘッダ JavaEE 開発モデル デザインスタイルシート タイトルバー ツールバー 入力項目 リストコントロール...85 作成者 株式会社 NTT データイントラマート Page i
6 intra-mart 画面デザインガイドライン (Version6.1) リストヘッダ 画面デザインサンプル 検索系画面 検索条件入力画面 検索結果一覧画面 登録系画面 更新 削除系画面 一覧系画面 ユーザ一覧 ロール一覧 共通アイコン タイトルバー 処理系 検索種別 ページ切替 昇順 / 降順切替 選択リストボックス ツリー表示 ボタン タブ Page ii Copyright ( 株 )NTT データイントラマート All rights Reserved.
7 1 はじめに 作成者 株式会社 NTT データイントラマート Page iii
8
9 1 はじめに 1 はじめに 本ドキュメントは ユーザインタフェースの大幅な向上を目的とした 画面デザインガイドラインです intra-mart 開発者が 本ドキュメント内で示す ユーザインタフェース ガイドラインや 画面デザイン共通モジュールを利用することで 製品全体の画面デザインや 操作性が統一されることを目指します また 操作性とともに画面デザインを見直すことで 見た目といった製品の格調向上だけではなく 利用者がわかりやすく 使いやすい製品を目指します 1.1 開発環境条件 以下の環境条件を整えた上で 開発作業を進めてください 画面の解像度は基本的に とする ブラウザのスクロールバー アドレスバー ツールバー メニューバーなどは表示する 文字サイズは ブラウザのメニュー [ 表示 ]-[ 文字サイズ ] を 中 とする (IE の場合 ) 本ドキュメントは IE を基にして作成されています 他のブラウザを使用した場合 表示内容が異なる場合が有ります 作成者 株式会社 NTT データイントラマート Page 1
10 intra-mart 画面デザインガイドライン (Version6.1) 2 ユーザインタフェース ガイドライン ユーザインタフェース ガイドラインは intra-mart 製品の画面設計時に考慮すべき点を明確にすることで 製品 全体の画面デザインや 操作性を統一させることを目的としています 2.1 ガイドラインの全体構成 ユーザインタフェース ガイドラインは 2 つのテーマで構成しています デザイン性に関するガイドライン 操作性に関するガイドライン 各ガイドラインで取り上げた内容について 現状の問題点 や それに対する 改善対策 を記述しています intra-mart 開発者は これらのガイドラインを参考に画面設計を行ってください また 各ガイドラインには実装方法についてより理解しやすいように 具体的な 実装例 を記述しています 実装を検討するときや ガイドラインの意図が不明確なときに 参考にしてください デザイン性に関するガイドラインについて 画面構成 カラー 文章 ( 文言 ) アイコンなど 画面全体で統一していただきたい要件を記載します 詳細は 2.2 デザイン性に関するガイドライン に示します 操作性に関する指針について 画面の遷移や ポップアップ画面 フレームの扱いなどについて 改善する要件を記載します 詳細は 2.3 操作性に関するガイドライン に示します Page 2 Copyright ( 株 )NTT データイントラマート All rights Reserved.
11 2 ユーザインタフェース ガイドライン 2.2 デザイン性に関するガイドライン この章では 画面作成時における 全体のデザインを統一するためのカラー 文章 アイコンなどについて基準となる要件を記載します デザイン性に関する指針について 表 2-1 デザイン性に関するガイドライン に示します 表 2-1 デザイン性に関するガイドライン 項番 項目 ページ すべてのページにデザインスタイルシートタグを記述する すべてのページに内容を的確に示すタイトルバーをつける 処理や画面を切り替えるための 処理リンク は ツールバー内に配置する 処理リンクは画面デザイン共通モジュールを使用する 一覧のヘッダは画面デザイン共通モジュールを使用する ソート切り替え ページ切り替えは画面デザイン共通モジュールを使用する 入力項目のデザインを統一する 処理ボタンのデザインを統一する テーブルタグ <TABLE> を使用して表を作成するときのクラスを統一する 文字色と背景色のコントラスト ( 明度差など ) を充分に取る 画像で文字を使用する時は 文字フォント サイズ コントラストなどを考慮する スタイルシートで文字サイズを指定しない 背景色を統一する 22 作成者 株式会社 NTT データイントラマート Page 3
12 intra-mart 画面デザインガイドライン (Version6.1) すべてのページにデザインスタイルシートタグを記述する 各ページで別々のスタイルシートを使用していると サイト内全体の画面デザインに統一感が無くなる場合があります デザインスタイルシートタグ を使用してスタイルシートの設定を固定化することで サイト内全体の画面デザインを統一します デザインスタイルシートタグは 以下の 表 2-2 デザインスタイルシートの画面デザイン共通モジュール に示す画面デザイン共通モジュールを使用してください 実装例 各ページの <HEAD> タグ内には 必ずデザインスタイルシートタグを記述する デザインスタイルシートタグは 以下に示す画面デザイン共通モジュールを使用する 表 2-2 デザインスタイルシートの画面デザイン共通モジュール 開発モデル画面デザイン共通モジュール詳細 スクリプト開発モデル <IMART type="imdesigncss"> デザインスタイルシート JavaEE 開発モデル <imarttagimartdesigncss> デザインスタイルシート 良い例 デザインスタイルシートタグを使用して スタイルシートを設定スクリプト開発モデルの場合 (HTML ファイルのサンプル ) <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> </BODY> </HTML> JavaEE 開発モデルの場合 (JSP ファイルのサンプル ) <%@ page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> <%@ taglib prefix="imarttag" uri="http// " %> <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 ( 株 )NTT データイントラマート All rights Reserved.
13 2 ユーザインタフェース ガイドライン すべてのページに内容を的確に示すタイトルバーをつける 現在位置の表示がないと 利用者はサイト全体 もしくはコンテンツ内のどこを参照しているか わからなくなることがあります 各画面 ( ページ ) の最上部には ページの内容を的確に示したタイトルバーを表示します タイトルバーの表示には 以下の 表 2-3 タイトルバーの画面デザイン共通モジュール に示す画面デザイン共通モジュールを使用してください 実装例 各画面 ( ページ ) の最上部には タイトルバー を配置する タイトルバーには アイコン+ページタイトル名 を表示する タイトルバーの表示には 以下の画面デザイン共通モジュールを使用する表 2-3 タイトルバーの画面デザイン共通モジュール 開発モデル画面デザイン共通モジュール詳細 スクリプト開発モデル <IMART type="imtitlebar"> タイトルバー JavaEE 開発モデル <imarttagimarttitlebar> タイトルバー 良い例 ページの最上部に 内容を的確に示したタイトルバーを表示している 悪い例 タイトルバーの表示がない 作成者 株式会社 NTT データイントラマート Page 5
14 intra-mart 画面デザインガイドライン (Version6.1) 処理や画面を切り替えるための 処理リンク は ツールバー内に配置する 処理や画面を切り替えるための 処理リンク を 画面内のあらゆる場所に配置していると 次の処理に戸惑うことがあります 各画面 ( ページ ) で タイトルバーの下部にツールバーを表示し 各 処理リンク はツールバー内に配置します ツールバーの表示には 以下の 表 2-4 ツールバーの画面デザイン共通モジュール に示す 画面デザイン共通モジュールを使用してください また 処理リンクの詳細については次章の 処理リンクは画面デザイン共通モジュールを使用する で説明します 実装例 各画面 ( ページ ) のタイトルバーの下部に ツールバー を表示する ページ内で 処理や画面を切り替えるための 処理リンク は すべてツールバーに配置する ( 処理リンクの詳細については 処理リンクは画面デザイン共通モジュールを使用する を参照 ) ツールバーの表示には 以下の画面デザイン共通モジュールを使用する表 2-4 ツールバーの画面デザイン共通モジュール 開発モデル画面デザイン共通モジュール詳細 スクリプト開発モデル JavaEE 開発モデル <IMART type="imtoolbarframe"> <IMART type="imtoolbarleft"> <IMART type="imtoolbarright"> <imarttagimarttoolbarframe> <imarttagimarttoolbarleft> <imarttagimarttoolbarright> ツールバー ツールバー 処理リンク配置位置の方針メイン処理系 ( 登録 更新 検索 ) のリンクは ツールバーの左側に配置する サブ処理系 ( 最新情報 ヘルプ ) のリンクは ツールバーの右側に配置する [ 参考 ] よく使用される処理リンクをツールバーの右側 / 左側に分けて 以下に示す 表 2-5 ツールバー内の処理リンク配置位置例 使用箇所アイコン内容 ツールバー 左側 new.gif 新規登録や追加など メイン処理系 edit.gif 編集 ( 登録 更新 検索など ) print.gif 印刷 search.gif 検索 右側 arrow_left.gif 戻る サブ処理系 reload.gif 最新の情報 ( 戻る 最新情報 ヘルプ help.gif ヘルプ など ) close.gif 閉じる ( ポップアップ画面のみ ) その他のアイコンは 5 共通アイコン を参照すること 良い例 各ページのタイトルバーの下部にツールバーを表示し 処理リンクを配置している Page 6 Copyright ( 株 )NTT データイントラマート All rights Reserved.
15 2 ユーザインタフェース ガイドライン 作成者 株式会社 NTT データイントラマート Page 7
16 intra-mart 画面デザインガイドライン (Version6.1) 処理リンクは画面デザイン共通モジュールを使用する 画面内に多数ある 処理リンク を 個人で配置するとデザインや表示方法に統一感が無くなる場合があります 処理リンクを配置する場合は 以下の 表 2-6 処理リンクの画面デザイン共通モジュール に示す 画面デザイン共通モジュールを使用してください 実装例 処理リンクは 画面デザイン共通モジュールすべてツールバー内に配置する ( ツールバーの詳細については 処理や画面を切り替えるための 処理リンク は ツールバー内に配置する を参照 ) 処理リンクには アイコン+ 処理名 を表示する 処理リンクの表示には 以下の画面デザイン共通モジュールを使用する表 2-6 処理リンクの画面デザイン共通モジュール 開発モデル 画面デザイン共通モジュール 詳細 スクリプト開発モデ <IMART type="imicon"> <IMART type="imicon"> ル JavaEE 開発モデル <imarttagimarticon> <imarttagimarticon> 良い例 画面デザイン共通モジュールを使用して 処理リンク を作成している スクリプト開発モデルの場合 (HTML のサンプル ) JavaEE 開発モデルの場合 (JSP のサンプル ) <HTML> <HTML> <HEAD> <HEAD> <IMART type = "imdesigncss"></imart> <imarttagimartdesigncss /> </HEAD> </HEAD> <BODY> <BODY> <IMART type = "imicon" <imarttagimarticon name = " 検索 " name = " 検索 " icon = "images/standard/serch.gif" icon = "/images/standard/serch.gif" href = "javascriptonserch();"> href = "javascriptonserch();" /> </IMART> </BODY> </BODY> </HTML> </HTML> Page 8 Copyright ( 株 )NTT データイントラマート All rights Reserved.
17 2 ユーザインタフェース ガイドライン 一覧のヘッダは画面デザイン共通モジュールを使用する 画面内に一覧 ( リスト ) を表示するときの 一覧のヘッダ を個人で作成すると デザインや表示方法に統一感が無くなる場合があります 一覧 ( リスト ) を表示するときの一覧ヘッダは 以下の 表 2-7 一覧ヘッダの画面デザイン共通モジュール に示す 画面デザイン共通モジュールを使用してください 実装例 一覧ヘッダの表示には 以下の画面デザイン共通モジュールを使用する 表 2-7 一覧ヘッダの画面デザイン共通モジュール 開発モデル画面デザイン共通モジュール詳細 スクリプト開発モデル <IMART type="imlistheader"> リストヘッダ JavaEE 開発モデル <imarttagimartlistheader> リストヘッダ 良い例 画面デザイン共通モジュールを使用して 一覧ヘッダを作成している 作成者 株式会社 NTT データイントラマート Page 9
18 intra-mart 画面デザインガイドライン (Version6.1) ソート切り替え ページ切り替えは画面デザイン共通モジュールを使用する 画面内に一覧 ( リスト ) を表示するときに必要となる ソート切り替え および ページ切り替え のコントロール ( 以下 リストコントロール ) を個人で作成すると デザインや表示方法に統一感が無くなる場合があります 一覧表示をするときのリストコントロールは 以下の 表 2-8 リストコントロールの画面デザイン共通モジュール に示す 画面デザイン共通モジュールを使用してください 実装例 一覧表示をするときの リストコントロール には 以下の画面デザイン共通モジュールを使用する 表 2-8 リストコントロールの画面デザイン共通モジュール 開発モデル画面デザイン共通モジュール詳細 スクリプト開発モデル <IMART type="imlistcontrol"> リストコントロール JavaEE 開発モデル <imarttagimartlistcontrol> リストコントロール 良い例 画面デザイン共通モジュールを使用して リストコントロールを作成している スクリプト開発モデルの場合 (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 // 1 ページの表示件数 sortorder = sort_order> // ソート昇順 降順を指定 </IMART> </TR> </TABLE> </BODY> </HTML> JavaEE 開発モデルの場合のサンプルは リストコントロール の 使用例 を参照してください Page 10 Copyright ( 株 )NTT データイントラマート All rights Reserved.
19 2 ユーザインタフェース ガイドライン 入力項目のデザインを統一する 新規登録や 更新 削除 および検索条件入力画面などで 入力項目や項目名称 ( ラベル ) を表示するときに 個人で作成するとデザインや表示方法に統一感が無くなる場合があります 入力項目および 項目名称のデザインを統一するために これらを作成するときには 入力項目の画面デザイン共通モジュール に示す画面デザイン共通モジュールを使用することを推奨します また 画面デザイン共通モジュールを使用しない場合や 画面デザイン共通モジュールだけでは賄えない入力項目の部品を各自で作成する場合は 入力項目の書式方法 に示す書式で作成してください 入力項目の画面デザイン共通モジュール入力項目および 項目名称を作成するときには 以下の 表 2-9 入力項目を作成するために使用する画面デザイン共通モジュール に示す画面デザイン共通モジュールを使用してください 実装例 入力項目の表示には 以下の画面デザイン共通モジュールを使用する 表 2-9 入力項目を作成するために使用する画面デザイン共通モジュール 入力項目部品 画面デザイン共通モジュール 詳細 項目名 <IMART type="imitemname"> 項目名称 <imarttagimartitemnametd> 項目名称 入力フィールド <IMART type="iminputtd"> 入力フィールド <imarttagimartinputtd> 入力フィールド 選択ボックス <IMART type="imselecttd"> 選択ボックス <imarttagimartselecttd> 選択ボックス 良い例 入力項目および 項目名称を画面デザイン共通モジュールで作成ししている 記述例を次頁の 表 2-10 入力項目を作成する画面デザイン共通モジュールの記述例 に示します 作成者 株式会社 NTT データイントラマート Page 11
20 intra-mart 画面デザインガイドライン (Version6.1) 表 2-10 入力項目を作成する画面デザイン共通モジュールの記述例 page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> taglib prefix="imarttag" uri="http// %> <% 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> Page 12 Copyright ( 株 )NTT データイントラマート All rights Reserved.
21 2 ユーザインタフェース ガイドライン 入力項目の書式方法前章の 入力項目の画面デザイン共通モジュール を使用しない場合で 項目名称 ( ラベル ) や 入力項目および 選択項目を各自で作成するときには 画面デザインを統一するために 各 HTMLタグに指定するクラスや 書式方法を必ず守ってください 以下に 指定するクラスや 書式方法の詳細を示します 入力項目 項目名称に指定するクラス入力項目を表示する <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> 画面表示例 作成者 株式会社 NTT データイントラマート Page 13
22 intra-mart 画面デザインガイドライン (Version6.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> ( 表示結果 ) 通常項目の場合 項目名称を黒色の標準の太さで表示する (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> ( 表示結果 ) Page 14 Copyright ( 株 )NTT データイントラマート All rights Reserved.
23 2 ユーザインタフェース ガイドライン 入力フィールドの書式 入力項目の 入力フィールド を表示する場合は 以下の書式を必ず守って作成してください (1) 入力項目を作成する <TABLE> タグに class="edit" を指定する (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> ( 表示結果 ) 作成者 株式会社 NTT データイントラマート Page 15
24 intra-mart 画面デザインガイドライン (Version6.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> [ 上記のサンプルにより 表示される処理ボタン ] Page 16 Copyright ( 株 )NTT データイントラマート All rights Reserved.
25 2 ユーザインタフェース ガイドライン テーブルタグ <TABLE> を使用して表を作成するときのクラスを統一する <TABLE> タグを使用して表 ( リスト ) を作成する場合は テーブルのボーダラインを統一するために <TABLE> タグおよび <TD> タグには 以下の 表 2-12 表を作成時に指定するクラス に示す classを設定します <TABLE> タグと <TD> タグに指定する class の組み合わせによって 表の作成を実現することができます ( 例 ) <TABLE class="table_border_bg"> + <TD class="list_title_bg"> + = 実装例 表を作成する場合は 必ず <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" データ部表示位置 右寄せ 作成者 株式会社 NTT データイントラマート Page 17
26 intra-mart 画面デザインガイドライン (Version6.1) 良い例 表を作成する <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> Page 18 Copyright ( 株 )NTT データイントラマート All rights Reserved.
27 2 ユーザインタフェース ガイドライン 文字色と背景色のコントラスト ( 明度差など ) を充分に取る 文字色と背景色のコントラスト ( 明度差など ) が小さいほど 文字は読みにくくなります また ディスプレイやプリンタ OS の種類によって色の再現性が微妙に異なるため 明度コントラストが小さいと文字が読みにくくなる可能性が高くなります 文字色と背景色のコントラストを充分に取って 文字を読みやすくしてください 実装例 背景色と文字色の明度の差を充分に確保する 特に 赤と緑 白と黄 白と水色 青と黒 青紫と黒の組み合わせになどに注意する 良い例 背景色と文字色に明度差があるので 文字が読みやすい 悪い例 背景色と文字色に明度差がなく 文字が読みにくい 作成者 株式会社 NTT データイントラマート Page 19
28 intra-mart 画面デザインガイドライン (Version6.1) 画像で文字を使用する時は 文字フォント サイズ コントラストなどを考慮する 画像内に描かれた文字は ブラウザでサイズや色のコントラストを変更できません 無意味に文字を画像にすることは避け 画像にする場合は サイズや色のコントラストに配慮し 読みやすくしてください 実装例 文字 ( 特に漢字 ) の装飾 ( 斜体など ) は少なくする 文字の背景に模様のある画像や写真などを使用する時は 文字の周りを縁取るなどし 文字を見やすくする 文字のフォントは ゴシック系を使用することが望ましい ( 画面上では 明朝系よりも ゴシック系のフォントのほうが見やすいため ) 良い例 読みやすい 悪い例 いずれも文字が読みにくい Page 20 Copyright ( 株 )NTT データイントラマート All rights Reserved.
29 2 ユーザインタフェース ガイドライン スタイルシートで文字サイズを指定しない スタイルシートを使用して文字サイズを指定する場合 絶対単位 (in, cm, mm, pt, pc) を使用すると ブラウザ の文字サイズを変更しても 大きさが変わりません 作成者 株式会社 NTT データイントラマート Page 21
30 intra-mart 画面デザインガイドライン (Version6.1) 背景色を統一する 各ページや画面によって 背景色 ( バックグランドカラー ) が異なっています また 同一画面内でも フレーム分けされた背景色が異なっている場合があります サイト内で背景色を統一してください 実装例 背景色 ( バックグランドカラー ) を規定し AP 内で統一する 文字や画像の邪魔にならない背景色を使用する 悪い例 同一画面内で 背景色が異なる 悪い例 ページによって背景色が異なる Page 22 Copyright ( 株 )NTT データイントラマート All rights Reserved.
31 2 ユーザインタフェース ガイドライン 2.3 操作性に関するガイドライン 操作性に関する指針では 画面作成時における 全体のデザインを統一するためのカラー 文章 アイコンなどについて基準となる要件を記載します 操作性に関する指針について 表 2-13 操作性に関する指針 に示します 表 2-13 操作性に関する指針 項番 項目 ページ 各画面ごとにヘルプ画面を用意する 新たなウィンドウ ( ポップアップ画面 ) を開くことは 必要最小限にする 画像には 画像の内容を的確に示す alt 属性をつける コンボボックスで大量データを表示しない フレーム化を廃止し ウィザード形式に変更する 横方向のスクロールが発生しないようにする 29 作成者 株式会社 NTT データイントラマート Page 23
32 intra-mart 画面デザインガイドライン (Version6.1) 各画面ごとにヘルプ画面を用意する メインの画面 ( ページ ) に解説やヘルプとなる文章を記載していると 画面全体がゴチャゴチャし まとまりがなくなってしまいます ヘルプ画面を別途用意することで 入力項目とヘルプ解説部分が切り分けられ 画面全体の見やすさだけでなく 操作性も向上します 実装例 各画面ごとに ヘルプ画面を用意する ヘルプ画面はポップアップで表示する 良い例 解説部分が別途ヘルプ画面として用意された [ ヘルプ ] ボタンをクリック 悪い例 メイン画面内に解説を書き過ぎていて見づらい Page 24 Copyright ( 株 )NTT データイントラマート All rights Reserved.
33 2 ユーザインタフェース ガイドライン 新たなウィンドウ ( ポップアップ画面 ) を開くことは 必要最小限にする 必要以上に多くのウィンドウを開くと サイトを表示している機器に負担がかかるため コンテンツの表示速度が遅くなることがあります また 新しいウィンドウが開いたことに気づかなかったり どのウィンドウで作業していたのかわからなくなったり その変化に戸惑う場合があります さらに 多くのウィンドウが開いた場合 不要なウィンドウを閉じなければならず 余計な操作が発生することになります 新たなウィンドウ ( ポップアップ画面 ) を開かずに ウィザード形式で画面を遷移するようにしてください 実装例 新たなウィンドウ ( ポップアップ画面 ) を開かずに ウィザード形式で画面遷移をする ポップアップ画面のほうが 内容を参照しやすい場合は あらかじめリンク元で新しいウィンドウが開くことを明示しておくほうが望ましい 例えば ユーザ検索 ( 新しいウィンドウで表示 ) などと表記する 悪い例 新しいウィンドウ ( ポップアップ画面 ) がいくつも表示されている 作成者 株式会社 NTT データイントラマート Page 25
34 intra-mart 画面デザインガイドライン (Version6.1) 画像には 画像の内容を的確に示す alt 属性をつける 利用者は 画像に alt 属性が指定されていないと 画像の内容を把握できない場合があります また リンクのある画像の場合は リンクでの遷移先が明確でないと操作に戸惑う場合があります 画像には alt 属性をつけて 画像の内容を的確に示してください 実装例 画像にリンクがない場合 alt 属性で画像の内容を記述する 意味を持たない画像 ( 箇条書きのポインタなど ) や テキストが併記されている画像には alt="" と記述する ( "" の中には何も入力しない ) 画像にリンクがある場合 alt 属性でリンク先を記述する リンク先を alt 属性として記述することで 画像の説明が不要となる場合は 画像の説明を省略してよい 画像の内容を詳細に解説する必要がある場合は リンク先は alt 属性に記述し 画像の解説は画像と同じ HTML 内にテキストで記述する その他 画像のボタン (image タイプの <input> タグに type="image" を使用する場合 ) にも alt 属性を指定する 良い例 alt 属性でリンク先を記述 良い例 alt 属性で画像を解説 悪い例 alt 属性なし Page 26 Copyright ( 株 )NTT データイントラマート All rights Reserved.
35 2 ユーザインタフェース ガイドライン コンボボックスで大量データを表示しない 大量データをコンボボックスで表示すると 画面の内容が隠れてしまったり スクロールによってデータを探さなければならなため 操作に戸惑う場合があります 大量データや可変データの場合は コンボボックス表示ではなく リスト表示形式にすることで 参照や操作性が向上します 実装例 大量データや可変データは コンボボックスではなくリスト形式で表示する 良い例 大量データをリスト形式で表示している 悪い例 大量のデータをコンボボックスで表示している 作成者 株式会社 NTT データイントラマート Page 27
36 intra-mart 画面デザインガイドライン (Version6.1) フレーム化を廃止し ウィザード形式に変更する 無駄なフレーム化は ユーザビリティーだけでなく デザイン性やレスポンスの低下を招く原因となっています フレーム化を廃止し ウィザード形式やタブによるページ切り替えに変更することで 操作性がアップし 見やすさも向上します 実装例 フレーム化を廃止する ウィザード形式やタブによるページ切り替えに変更 良い例 ウィザード形式に変更し 操作性やデザイン性がアップ 対象を選択すると 画面が切り替わり [ 更新 削除 ] 画面が表示される 悪い例 フレーム分けが多く 操作がわかりづらい またデザイン性も悪い Page 28 Copyright ( 株 )NTT データイントラマート All rights Reserved.
37 2 ユーザインタフェース ガイドライン 横方向のスクロールが発生しないようにする ブラウザで縦と横のスクロールが表示されている場合 ページ全体の把握が困難になります スクロールを縦方向だけにすることで ページを参照しやすくなります 実装例 画面を作成する際には 横方向のスクロールが表示されないように設計する 良い例 横方向スクロールが表示されないように 画面を設計 悪い例 横方向スクロールと 縦方向スクロールが混同していて操作が困難 またデザイン性も悪い 作成者 株式会社 NTT データイントラマート Page 29
38 intra-mart 画面デザインガイドライン (Version6.1) 3 画面デザイン共通モジュール intra-mart 製品の画面 ( ページ ) 内で 共通して利用可能なコントロール部品を 画面デザイン共通モジュール ( スクリプト開発モデル および JavaEE 開発モデル ) として用意しています 本章で示す 各画面デザイン共通モジュールは 製品全体の画面デザインや 操作性の統一を目的としています 3.1 画面デザイン共通モジュールの全体構成 画面デザイン共通モジュールは 2 つの開発モデルで用意されています スクリプト開発モデル JavaEE 開発モデル 各画面デザイン共通モジュールでは 使用方法についてより理解しやすいように 具体的な 使用例 を記述しています 実装する際の参考にしてください スクリプト開発モデルについて スクリプト開発モデル用に用意されている 画面デザイン共通モジュールを以下に示します 表 3-1 スクリプト開発モデルの画面デザイン共通モジュール 画面デザイン共通モジュール ページ デザインスタイルシート タイトルバー ツールバー 入力項目 リストコントロール リストヘッダ JavaEE 開発モデルについて JavaEE 開発モデル用に用意されている 画面デザイン共通モジュールを以下に示します 表 3-2 JavaEE 開発モデルの画面デザイン共通モジュール 画面デザイン共通モジュール ページ デザインスタイルシート タイトルバー ツールバー 入力項目 リストコントロール リストヘッダ 90 Page 30 Copyright ( 株 )NTT データイントラマート All rights Reserved.
39 3 画面デザイン共通モジュール 3.2 重要事項 デザインスタイルシートの宣言 本章で示す 画面デザイン共通モジュール を使用する際は 必ず各画面を構成している HTML の <HEAD> タグ内に デザインスタイルシート の宣言を行ってください デザインスタイルシート は 画面デザイン共通モジュールとして用意されています 詳細は 以下を参照してください 表 3-3 デザインスタイルシートの画面デザイン共通モジュール 開発モデル画面デザイン共通モジュール詳細 スクリプト開発モデル <IMART type="imdesigncss"> デザインスタイルシート JavaEE 開発モデル <imarttagimartdesigncss> デザインスタイルシート 以下に デザインスタイルシートの記述例を示します [ 記述例 1] スクリプト開発モデルの場合 (HTML ファイルのサンプル ) <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> </BODY> </HTML> [ 記述例 2] JavaEE 開発モデルの場合 (JSP ファイルのサンプル ) <%@ page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> <%@ taglib prefix="imarttag" uri="http// %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> </BODY> </HTML> 作成者 株式会社 NTT データイントラマート Page 31
40 intra-mart 画面デザインガイドライン (Version6.1) 3.3 スクリプト開発モデル デザインスタイルシート 機能詳細 <IMART type="imdesigncss"> により スタイルシートを設定する ServerManager 配下の conf/system.xml ファイルの system/color-config/color-pattern タグ内で設定したCSSファイルが利用可能になります system/color-config/color-pattern に複数のCSSファイルを設定することも可能です 制約本タグを配置する場所は HTML の <HEAD> タグ内です 属性 <IMART type="imdesigncss"> に指定する属性を 以下に示します 属性 type には IMART タグ名 imdesigncss を指定する 属性説明必須デフォルト値書式 type IMART タグ名 - type="imdesigncss" 使用例デザインスタイルシートを設定するためのサンプルを 以下に示します HTML のサンプル <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> </BODY> </HTML> 注意点各画面 ( ページ ) を作成する html ファイルの <HEAD> タグ内には 必ずデザインスタイルシート <IMART type="imdesigncss"></imart> を記述してください Page 32 Copyright ( 株 )NTT データイントラマート All rights Reserved.
41 3 画面デザイン共通モジュール タイトルバー 機能詳細 <IMART type="imtitlebar"> により タイトルバーを表示する タイトルバーには アイコン と ページタイトル名 を指定して表示することができる 制約 本タグを配置する場所は HTML の <BODY> タグ内です 属性 <IMART type="imtitlebar"> に指定する属性を 以下に示します 属性 type には IMART タグ名 imtitlebar を指定する 属性 title には ページタイトル名 を指定する 属性 icon には アイコン のファイル名を ドキュメントルートからの相対パスで指定する 属性 icon を未指定にした場合は アイコン (images/standard/title.gif) が表示される 属性 説明 必須 デフォルト値 書式 type IMART タグ名 - type="imtitlebar" title ページタイトル名 - title=" 新規登録 " icon アイコンのファイル名 icon="images/standard/title.gif" list.gif ( ドキュメントルートからの相対パス ) 使用例タイトルバーを表示するためのサンプルを 以下に示します HTML のサンプル <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> <!-- タイトルバー表示 --> <IMART type="imtitlebar" title=" 新規登録 " icon="images/standard/title.gif"> </IMART> </BODY> </HTML> 表示結果 作成者 株式会社 NTT データイントラマート Page 33
42 intra-mart 画面デザインガイドライン (Version6.1) ツールバー 機能詳細 <IMART type="imtoolbarframe"> タグにより ツールバーの外枠を表示する ( タグの詳細は <IMART type ="imtoolbarframe"> を参照 ) ツールバーの中には 複数の 処理リンク を配置することができる <IMART type="imtoolbarleft"> タグに挟まれた 処理リンク は ツールバーの左側に配置される ( タグの詳細は <IMART type="imtoolbarleft"> を参照 ) <IMART type="imtoolbarright"> タグに挟まれた 処理リンク は ツールバーの右側に配置される ( タグの詳細は <IMART type="imtoolbarright"> を参照 ) <IMART type="imtoolbarframe"> タグに挟まれた範囲に <IMART type="imtoolbarright"> タグおよび <IMART type="imtoolbarleft"> タグがどちらも存在しない場合の動作については未定義とする <IMART type="imicon"> タグにより アイコン+ 処理名 の処理リンクを表示する ( タグの詳細は <IMART type="imicon"> を参照 ) 制約 本タグを配置する場所は HTML の <BODY> タグ内です 手順ここでは ツールバーを作成するための手順として HTML ファイルに記述する内容を簡単に説明します ソースコードのサンプルについては 使用例 を参照してください (1) <IMART type="imdesigncss"> を記述して スタイルシートの宣言を行います ( 記述方法については デザインスタイルシート を参照 ) (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" > タグを記述してください Page 34 Copyright ( 株 )NTT データイントラマート All rights Reserved.
43 3 画面デザイン共通モジュール 使用例 ツールバーを表示するためのサンプルを 以下に示します 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) 表示結果 作成者 株式会社 NTT データイントラマート Page 35
44 intra-mart 画面デザインガイドライン (Version6.1) ツールバーを作成するために必要な <IMART> タグこの章では ツールバーを作成するために必要な <IMART> タグの詳細を示します ツールバーは 以下の 表 3-4 ツールバーに必要な画面デザイン共通モジュール に示す <IMART> タグで構成されています 表 3-4 ツールバーに必要な画面デザイン共通モジュール 参照 ページ <IMART type ="imtoolbarframe"> <IMART type="imtoolbarleft"> <IMART type="imtoolbarright"> <IMART type="imicon"> <IMART type ="imtoolbarframe"> 詳細 ツールバーの外枠を表示する ツールバーの表示色は テーマによって自動に設定される 制約本タグを配置する場所は HTML の <BODY> タグ内です 属性 <IMART type="imtoolbarframe"> に指定する属性を 以下に示します 属性 type には IMART タグ名 imtoolbarframe を指定する 属性説明必須デフォルト値書式 type IMART タグ名 - type="imtoolbarframe" Page 36 Copyright ( 株 )NTT データイントラマート All rights Reserved.
45 3 画面デザイン共通モジュール <IMART type="imtoolbarleft"> 詳細 ツールバー内の左側に 処理リンク を表示させたいときに使用する ツールバーの左側に表示する 処理リンク がないときは 省略可能である 必ず <IMART type="imtoolbarframe"> </IMART> に挟まれた範囲に記述すること <IMART type="imtoolbarleft"> </IMART> に挟まれた範囲に記述された 処理リンク は ツールバー内で左寄せに表示される 本タグに挟まれた範囲には 複数の 処理リンク を記述することができる 処理リンク には <IMART type="imicon"> タグ ( 詳細は <IMART type="imicon"> を参照 ) だけでなく 通常のHTMLタグ <A href="xxxx"></a> や <IMART type="link"> なども記述することが可能である 制約 本タグを単独で利用することはできない <IMART type="imtoolbarframe"> タグの内部タグとして利用すること ( タグの詳細は <IMART type ="imtoolbarframe"> を参照 ) 本タグは <IMART type="imtoolbarright"> </IMART> タグの前に記述すること ( タグの詳細は <IMART type="imtoolbarright"> を参照 ) 属性 <IMART type="imtoolbarleft"> に指定する属性を 以下に示します 属性 type には IMART タグ名 imtoolbarleft を指定する 属性説明必須デフォルト値書式 type IMART タグ名 - type="imtoolbarleft" 作成者 株式会社 NTT データイントラマート Page 37
46 intra-mart 画面デザインガイドライン (Version6.1) <IMART type="imtoolbarright"> 詳細 ツールバー内の右側に 処理リンク を表示させたいときに使用する ツールバーの右側に表示する 処理リンク がないときは 省略可能である 必ず <IMART type="imtoolbarframe"> </IMART> に挟まれた範囲に記述すること <IMART type="imtoolbarright"> </IMART> に挟まれた範囲に記述された 処理リンク は ツールバー内で右寄せに表示される 本タグに挟まれた範囲には 複数の 処理リンク を記述することができる 処理リンク には <IMART type="imicon"> タグ ( 詳細は <IMART type="imicon"> を参照 ) だけでなく 通常のHTMLタグ <A href="xxxx"></a> や <IMART type="link"> なども記述することが可能である 制約 本タグを単独で利用することはできない <IMART type="imtoolbarframe"> タグの内部タグとして利用すること ( タグの詳細は <IMART type ="imtoolbarframe"> を参照 ) 本タグは <IMART type="imtoolbarleft"> </IMART> タグの後に記述すること ( タグの詳細は <IMART type="imtoolbarleft"> を参照 ) 属性 <IMART type="imtoolbarright"> に指定する属性を 以下に示します 属性 type には IMART タグ名 imtoolbarright を指定する 属性説明必須デフォルト値書式 type IMART タグ名 - type="imtoolbarright" Page 38 Copyright ( 株 )NTT データイントラマート All rights Reserved.
47 3 画面デザイン共通モジュール <IMART type="imicon"> 詳細 ツールバー内に 処理リンク を表示する この <IMART type="imicon"> タグにより アイコン+ 処理名 の処理リンクが表示される アイコン のみ または 処理名 のみの表示も可能である 属性 icon により 表示するアイコンを指定できる 属性 name により 表示する処理名を指定できる 処理を選択された時のリンク先として js の関数名や URL を指定することができる また リンク先の表示ウィンドウを指定することができる 本タグを <IMART type="imtoolbarleft"> タグに挟まれた範囲に記述すると ツールバー内で左寄せに表示される 本タグを <IMART type="imtoolbarright"> タグに挟まれた範囲に記述すると ツールバー内で右寄せに表示される 本タグを記述した順番に ツールバーの左から 処理リンク が配置される 制約 属性 href を指定した場合 <A> タグとして作成されます 属性その他を指定する場合 属性 href が設定されている必要があります 属性 <IMART type="imicon"> に指定する属性を 以下に示します 属性 type には IMART タグ名 imicon を指定する 属性 name には 処理名 を指定する 属性 name を未指定にした場合は アイコン だけが表示される 属性 icon には アイコン のファイル名を ドキュメントルートから相対パスで指定する 属性 icon を未指定にした場合は 処理名 だけが表示される 属性 name および属性 icon がどちらも未指定の場合は 処理リンクの配置を無視する 属性 href には処理を選択された際のリンク先を指定する 指定する値は js の関数名 (javascriptxxxxx();) や URL などが可能である 属性 href を未指定にした場合は リンク表示ではなく ただのテキスト表示になる 属性 target にはリンク先の表示ウィンドウを指定する 指定する値は HTML の target 属性に従う 属性 target を未指定にした場合は 同ウィンドウに表示される 属性 alt には画像の変わりに表示される文字列を指定する 属性その他は <A> タグに設定する各属性値が指定できる 指定する値はHTMLの <A> タグ属性に従う 作成者 株式会社 NTT データイントラマート Page 39
48 intra-mart 画面デザインガイドライン (Version6.1) 属性 説明 必須 デフォルト値 書式 type IMART タグ名 - type="imicon" name 処理名 - name=" 新規登録 " icon アイコンのファイル名 ( ドキュメントルートからの相対パ - icon= "images/standard/new_item.gif" ス ) href 処理選択時のジャンプ先 (js 実行関数名や URL など ) - href="javascriptonaddaction()" href="http// jp" target 表示ウィンドウ - target="_top" alt 画像の変わりに表示される文 alt=" 新規登録 " 字列 その他 <A> タグに設定する各属性値 - tabindex="1" Page 40 Copyright ( 株 )NTT データイントラマート All rights Reserved.
49 3 画面デザイン共通モジュール 入力項目 ここでは 登録系画面や 更新 削除系画面などで頻繁に使用される 項目名称 + 入力フィールド をまとめて 入力項目 として説明しています 機能詳細 登録系画面や 更新 削除系画面で 入力項目を作成する際に使用するタグである <IMART type=" imitemname"> により 項目名称を表示する ( タグの詳細は 項目名称 を参照 ) <IMART type="iminputtd"> により 入力フィールドを表示する ( タグの詳細は 入力フィールド を参照 ) <IMART type="imselecttd"> により 選択部品 ( セレクトボックス ) を表示する ( タグの詳細は 選択ボックス を参照 ) 制約本タグを配置する場所は HTML の <BODY> タグ内です HTML の <TD> タグとして作成されるため <TABLE><TR>~</TR></TABLE> 内に記述してください また デザインを統一するために本タグを使用する際には 必ず 使用例 に示す <TABLE><TR>~</TR></TABLE> の中に記述してください 手順 ここでは 入力項目を作成するための手順として HTML ファイルに記述する内容を簡単に説明します (1) <IMART type="imdesigncss"> を記述して スタイルシートの宣言を行います ( 記述方法については デザインスタイルシート を参照 ) (2) デザインを統一するため <TABLE><TR>~</TR></TABLE> を記述します (3) <IMART type="imitemname"> タグを (2) に挟まれた範囲に記述して 項目名称を表示します (4) <IMART type="iminputtd"> タグを (2) に挟まれた範囲に記述して 入力フィールドを表示します (5) 選択ボックスに設定する 表示データ を ファンクション コンテナ (.js ファイル ) の init() 関数内で構 築します (6) <IMART type="imselecttd"> タグを (2) に挟まれた範囲に記述して 選択ボックスを表示します ソースコードのサンプルについては 使用例 を参照してください 作成者 株式会社 NTT データイントラマート Page 41
50 intra-mart 画面デザインガイドライン (Version6.1) 使用例 入力項目を表示するためのサンプルを 以下に示します 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" name = "forwarfile" size = "50"></IMART> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML> 手順 (2) Page 42 Copyright ( 株 )NTT データイントラマート All rights Reserved.
51 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 43
52 intra-mart 画面デザインガイドライン (Version6.1) 入力項目を作成するために使用する <IMART> タグ 項目名称 詳細 <IMART type="imitemname"> により 入力項目の 項目名称 を表示する 登録系画面や 更新 削除系画面で 入力項目の項目名称を記述する際に使用する 属性 name に指定した値が 項目名称として表示される 属性 require を指定すると 必須項目 として表示される 必須項目 の場合は 項目名称が太字で表示され 赤色で ( 必須 ) の文字が記述される 属性 require が未指定の場合は 通常項目 として表示される 制約 HTML の <TD> タグとして作成されるため <TABLE><TR>~</TR></TABLE> 内に記述してください また デザインを統一するために本タグを使用する際には 必ず 使用例 に示す <TABLE><TR>~</TR></TABLE> の中に記述してください 属性 <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 44 Copyright ( 株 )NTT データイントラマート All rights Reserved.
53 3 画面デザイン共通モジュール 入力フィールド 詳細 <IMART type="iminputtd"> により 入力項目の入力フィールドを表示する 登録系画面や 更新 削除系画面で 入力項目の入力フィールドを記述する際に使用する 属性 style に指定した値によって 異なる入力フィールドを表示することができる 属性 style="text" を指定した場合は テキスト入力フィールドが表示される 属性 style="password" を指定した場合は パスワード入力フィールドが表示される 属性 style="file" を指定した場合は ファイル入力フィールドが表示される 属性 style="checkbox" を指定した場合は チェックボックスが表示される 属性 style="radio" を指定した場合は ラジオボタンが表示される 属性 style="textarea" を指定した場合は テキストエリア入力フィールドが表示される (HTML の <TEXTAREA> タグとして作成される ) 属性 style="textarea" 以外は HTML の <INPUT> タグとして作成される 制約 HTML の <TD> タグとして作成されるため <TABLE><TR>~</TR></TABLE> 内に記述してください また デザインを統一するために本タグを使用する際には 必ず 使用例 に示す <TABLE><TR>~</TR></TABLE> の中に記述してください 作成者 株式会社 NTT データイントラマート Page 45
54 intra-mart 画面デザインガイドライン (Version6.1) 属性 <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 ファイル入力フィールド checkbox チェックボックス radio ラジオボタン - style="text" style="password" style="file" style="checkbox" style="radio" style="textarea" textarea テキストエリア入力フィールド name 名前 - name="userid" colspan <TD> タグの colspan 属性 - colspan="2" rowspan <TD> タグの rowspan 属性 - rowspan="4" align <TD> タグの align 属性 ( 横方向表示位置 ) canter 中央表示 right 右寄せ left 左寄せ - aligh="center" tdclass <TD> タグの class 属性 tdclass default ="default_right" class <INPUT> タグおよび <TEXTAREA> の class class 属性 default ="default_right" その他 <TD> タグに設定する各属性値 width="150" colspan="2" Page 46 Copyright ( 株 )NTT データイントラマート All rights Reserved.
55 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="iminputtd" style="text" class="default_right" name="sort_no" size="10" value="200"></imart> 作成者 株式会社 NTT データイントラマート Page 47
56 intra-mart 画面デザインガイドライン (Version6.1) 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 48 Copyright ( 株 )NTT データイントラマート All rights Reserved.
57 3 画面デザイン共通モジュール style="checkbox" の属性 チェックボックス 属性 caption には チェックボックス横に表示する 名称 を設定する 属性 checked を指定した場合は チェックボックスがチェックされた状態で表示される (HTML の <INPUT> タグの checked 属性同様 ) 属性 checked を未指定にした場合は チェックがされていない状態で表示される 属性 説明 必須 デフォルト値 書式 caption 名称 - caption=" チェック 1" checked チェック状態の指定 - checked [ 記述例 1] 属性 caption=" チェック 1" と指定して表示 <IMART type="iminputtd" style="checkbox" name="check1" caption=" チェック 1"></IMART> [ 記述例 2] 属性 checked を指定して あらかじめチェックされた状態にした場合 <IMART type="iminputtd" style="checkbox" name="check1" caption=" チェック 1" checked></imart> style="radio" の属性 ラジオボタン 属性 caption には ラジオボタン横に表示する 名称 を設定する 属性 checked を指定した場合は ラジオボタンがチェックされた状態で表示される (HTML の <INPUT> タグの checked 属性同様 ) 属性 checked を未指定にした場合は チェックがされていない状態で表示される 属性 説明 必須 デフォルト値 書式 caption 名称 - caption=" ラジオ 1" checked チェック状態の指定 - checked [ 記述例 1] 属性 caption=" ラジオ 1" と指定して表示 <IMART type="iminputtd" style="radio" name="radio1" caption=" ラジオ 1"></IMART> [ 記述例 2] 属性 checked を指定して あらかじめチェックされた状態にした場合 <IMART type="iminputtd" style="radio" name="radio1" caption=" ラジオ 1" checked></imart> 作成者 株式会社 NTT データイントラマート Page 49
58 intra-mart 画面デザインガイドライン (Version6.1) style="textarea" の属性 テキストエリア表示 属性 value には 表示する 文字列 を指定する 属性 cols には テキストエリアの 横幅 を指定する (HTML の <TEXTAREA> タグの cols 属性同様 ) 属性 rows には テキストエリアの 縦幅( 行数 ) を指定する (HTML の <TEXTAREA> タグの rows 属性同様 ) 属性属性 readonly を指定した場合は 入力フィールドへの入力が不可になります (HTML の <TEXTAREA> タグの readonly 属性同様 ) 属性 readonly を未指定にした場合は デフォルト値 入力可能 が設定される 属性 説明 必須 デフォルト値 書式 value 表示する文字列 - value=" ここに長い " cols テキストエリアの横幅 cols="40" - (<TEXTAREA> の cols 属性 ) rows テキストエリアの縦幅 ( 行数 ) rows="5" - (<TEXTAREA> の rows 属性 ) readonly 入力不可の指定 - readonly [ 記述例 ] 属性 cols="40" 属性 rows="5" を指定して表示 <IMART type="iminputtd" style="textarea" name="comment" cols="40" rows="5" value=" ここに長い文章が書けます "></IMART> Page 50 Copyright ( 株 )NTT データイントラマート All rights Reserved.
59 3 画面デザイン共通モジュール 選択ボックス 詳細 <IMART type="imselecttd"> により 入力項目の選択ボックスを表示する 登録系画面や 更新 削除系画面で 入力項目の選択ボックスを記述する際に使用する 既存の画面デザイン共通モジュール <IMART type="select"> とほぼ同じ機能であり 画面デザインを統一するためにデザインが変更されている 制約本タグを配置する場所は HTML の <BODY> タグ内です HTML の <TD> タグとして作成されるため <TABLE><TR>~</TR></TABLE> 内に記述してください また デザインを統一するために本タグを使用する際には 必ず 使用例 に示す <TABLE><TR>~</TR></TABLE> の中に記述してください 属性 <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> タグ属性に従う 作成者 株式会社 NTT データイントラマート Page 51
60 intra-mart 画面デザインガイドライン (Version6.1) 属性説明必須デフォルト値書式 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 の設定方法については 使用例 を参照 <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> Page 52 Copyright ( 株 )NTT データイントラマート All rights Reserved.
61 3 画面デザイン共通モジュール リストコントロール 機能詳細 <IMART type="imlistcontrol"> により 各種一覧に対するソート切り替えコントロールと ページ切り替 えコントロールを表示する ソートおよび ページ切り替えコントロールはリンク表示となっている 各コントロールのリンクがクリックされると JavaScript 関数が呼び出されるため 本タグを使用した場合 は 各コントロールに対してJavaScript 関数の処理を記述する必要がある ( 詳細は デフォルトの必須 JavaScript 関数 を参照 ) ソート切り替えコントロールには 昇順ソート ( 有効および無効 ) 降順ソート ( 有効および無効 ) の矢印リ ンクが用意されている ソート対象 昇順アイコン 降順アイコン 昇順 ( 有効 ) ( 無効 ) 降順 ( 無効 ) ( 有効 ) ソート切り替えコントロールは 属性の指定により表示 非表示を設定することができる ページ切り替えコントロールには ( 前のページ ) ( 次のページ ) ( 最初のページ ) ( 最後のページ ) の矢印リンクが用意されている 一覧で表示しているページによって 矢印アイコンの表示および 非表示を切り替える 表示ページ 最初のページ 前のページ 次のページ 最後のページ アイコン アイコン アイコン アイコン 最初のページ非表示非表示 最後のページ非表示非表示 一覧の表示件数が [ 全件数 <1ページの表示数 ] の場合は ページ切り替えコントロールは表示されない ( ページ件数の表示のみ ) 制約本タグは HTML の <TABLE> タグとして作成されます 本タグを配置する場所は HTML の <BODY> タグ内です 作成者 株式会社 NTT データイントラマート Page 53
62 intra-mart 画面デザインガイドライン (Version6.1) 属性 <IMART type="imlistcontrol"> に指定する属性を 以下に示す 属性 type には IMART タグ名 imlistcontrol を指定する 属性 maxrecord には一覧に表示するデータの 全件数 を指定する 属性 currentpage には 表示するページ番号 を指定する 属性 currentpage を未指定にした場合は 1 ページ目が表示される 属性 pageline には 1 ページの表示数 を指定することができる 属性 pageline を未指定にした場合は 1 ページに表示される件数は 10 件となる 昇順 / 降順 切り替えコントロールは表示 または非表示を指定することができる 属性 sortdisplay に true を指定した場合は表示 false を指定した場合は非表示になる 属性 sortdisplay が未指定の場合は 昇順 / 降順 切り替えコントロールが表示される 属性 sortorder には ソート基準方向 を指定する 現在のソート方向が昇順の場合は asc 降順の場合は desc を指定する 属性 sortorder を未指定にした場合は デフォルト値の asc ( 昇順 ) となる 属性 prevpagefunc には 前ページリンクが選択時の js 関数を指定する 未指定の場合は javascriptonpagelinkfunc('[ 属性 currentpage]-1') が設定される 属性 nextpagefunc には 次ページリンクが選択時の js 関数を指定する 未指定の場合は javascriptonpagelinkfunc('[ 属性 currentpage]+1') が設定される 属性 firstpagefunc には 最初ページリンクが選択時の js 関数を指定する 未指定の場合は javascriptonpagelinkfunc('1') が設定される 属性 lastpagefunc には 最終ページリンクが選択時の js 関数を指定する 未指定の場合は javascriptonpagelinkfunc('[ 属性 maxrecord]/[ 属性 pageline]') が設定さ れる 属性 ascsortfunc には 昇順ソートリンク ( 有効 ) および ( 無効 ) が選択時の js 関数を指定する 未指定の場合は javascriptonsortlinkfunc('asc') が設定される 属性 descsortfunc には 降順ソートリンク ( 有効 ) および ( 無効 ) が選択時の js 関数を指定する 未指定の場合は javascriptonsortlinkfunc('desc') が設定される Page 54 Copyright ( 株 )NTT データイントラマート All rights Reserved.
63 3 画面デザイン共通モジュール 属性 説明 必 デフォルト値 書式 須 type IMART タグ名 - type="imlistcontrol" maxrecord 全件数 - maxrecord="50" currentpage 表示するページ番号 1 currentpage="1" pageline 1 ページの表示数 10 pageline="20" sortdisplay 昇順/ 降順 の有無 ( true 表示 /false 非表示 ) true sortdisplay="true" sortorder ソート基準方向 sortorder="desc" asc (asc 昇順 /desc 降順 ) prevpagefunc 前ページ選択時の js 関数 上記参照 prevpagefunc= "javascriptprevpage();" nextpagefunc 次ページ選択時の js 関数 上記参照 nextpagefunc= "javascriptnextpage();" firstpagefunc 最初ページ選択時の js 関数 上記参照 firstpagefunc= "javascriptfirstpage();" lastpagefunc 最終ページ選択時の js 関数 上記参照 lastpagefunc= "javascriptlastpage();" ascsortfunc 昇順ソート選択時の js 関数 上記参照 ascsortfunc= "javascriptascsort();" descsortfunc 降順ソート選択時の js 関数 上記参照 descsortfunc= "javascriptdescsort();" 作成者 株式会社 NTT データイントラマート Page 55
64 intra-mart 画面デザインガイドライン (Version6.1) 使用例 リストコントロール ( ソート切り替え ページ切り替え ) を表示するためのサンプルを 以下に示します HTML のサンプル <HTML> <HEAD> <IMART type="imdesigncss"></imart> <SCRIPT LANGUAGE="JavaScript"> // ページ切り替え <> がクリックされた時の処理 function onpagelinkfunc(num) { // ここには各自で処理を記述する } // 昇順 / 降順 ( ソート条件 ) をクリックした時の処理 function onsortlinkfunc(mode) { // ここには各自で処理を記述する } </SCRIPT> </HEAD> <BODY> <TABLE border="0" width="100%" cellpadding="0" cellspacing="2"> <TR> <TD> <!-- リストコントロール --> <IMART type="imlistcontrol" maxrecord="20" currentpage="1" pageline="5" sortorder="asc"> </IMART> </TD> </TR> </TABLE> </BODY> </HTML> 表示結果 Page 56 Copyright ( 株 )NTT データイントラマート All rights Reserved.
65 3 画面デザイン共通モジュール デフォルトの必須 JavaScript 関数ソート切り替えコントロール およびページ切り替えコントロールのリンクがクリックされた際に呼び出される デフォルトの JavaScript 関数の詳細を以下に示します 本タグを使用する際に 以下の属性を未指定にした場合は 各自で必ずデフォルトの JavaScript 関数の処理を記述してください 属性 prevpagefunc 属性 nextpagefunc 属性 firstpagefunc 属性 lastpagefunc 属性 ascsortfunc 属性 descsortfunc 必須の JavaScript 関数を記述しない場合の動作については 保証外とします コーディング方法などの詳細については 使用例 を参照してください 上記の属性を指定した場合は デフォルトの JavaScript 関数の処理を記述する必要はありません 作成者 株式会社 NTT データイントラマート Page 57
66 intra-mart 画面デザインガイドライン (Version6.1) ソート切り替えソート切り替えコントロールで 昇順 および 降順 のリンクがクリックされた場合 JavaScript 関数の onsortlinkfunc() が呼び出されます 以下に その詳細を示します 関数名 onsortlinkfunc( mode ) 概要ソート切り替えコントロール ( 昇順 or 降順 ) がクリックされた際に 呼び出される関数です 引数 mode の値により 昇順 降順 のどちらが選択されたかの情報を 取得することができます 引数変数 内容 値 条件 mode ソート基準方向 asc 昇順 リンクが選択された場合 desc 降順 リンクが選択された場合 ページ切り替えページ切り替えコントロールで 各矢印のリンクがクリックされた場合 JavaScript 関数の onpagelinkfunc() が呼び出されます 以下に その詳細を示します 関数名 onpagelinkfunc( num ) 概要ページ切り替えコントロールの 各矢印リンクがクリックされた際に 呼び出される関数です 引数 num の値により 次に表示するページ番号の情報を 取得することができます 引数 変数 内容 値 条件 num 次のページ番号 1~n Page 58 Copyright ( 株 )NTT データイントラマート All rights Reserved.
67 3 画面デザイン共通モジュール リストヘッダ 機能詳細 <IMART type="imlistheader"> により 各種一覧に対するヘッダを表示する 本タグで生成された一覧のヘッダ項目名は リンク表示となっている 各項目のリンクがクリックされると JavaScript 関数が呼び出されるため 本タグを使用した場合は 各項目リンクに対してJavaScript 関数の処理を記述する必要がある ( 詳細は 必須のJavaScript 関数 を参照 ) ヘッダの項目名は 属性の指定によりリンク表示と 通常表示 ( ただの文字列 ) を設定することができる ソートキーになっている項目は黄色表示 通常の項目は水色表示になる ヘッダ情報 ( 項目名など ) は ファンクション コンテナ (.js ファイル ) で設定する 制約本タグを配置する場所は HTML の <BODY> タグ内です また HTML の <TR> タグとして作成されるため <TABLE>~</TABLE> 内に記述してください その際 <TABLE> タグには class="list_border_bg" または class="table_border_bg" を指定してください 表全体の枠 ( 横幅 100% 固定 ) 表全体の枠 ( 横幅任意指定 ) <TABLE class="list_border_bg"> <TABLE class="table_border_bg"> 属性 <IMART type="imlistheader"> に指定する属性を 以下に示します 属性 type には IMART タグ名 imlistheader を指定する 属性 headerdata には ヘッダ情報オブジェクト の配列を指定する ヘッダ情報オブジェクトの構成については ヘッダ情報オブジェクト を参照してください 属性 説明 必須 デフォルト値 書式 type IMART タグ名 - type="imlistheader" headerdata ヘッダ情報オブジェクト - headerdata=aheader 作成者 株式会社 NTT データイントラマート Page 59
68 intra-mart 画面デザインガイドライン (Version6.1) ヘッダ情報オブジェクト <IMART type="imlistheader"> を使用してリストヘッダを作成する際に 属性 headerdata に指定するオブジェクトです ヘッダ情報オブジェクトの構成を 以下の 表 3-5 ヘッダ情報オブジェクトの構成 に示します 表 3-5 ヘッダ情報オブジェクトの構成 プロパティ 設定内容 説明 name 項目名 ヘッダに表示する項目名を指定する 未指定の場合は 空のヘッダが表示される また 項目 ID="checkbox" を指定した場合は <INPUT type="checkbox> タグの name 属性となる key 項目 ID 項目 ID を指定する ここに指定した値は プロパティ href を未指定にした場合の デフォルトの js 関数へ渡される引数となる 現在のソートキー項目を判定するための ID となるので 他項目との重複は不可とする 項目 ID に "checkbox" を指定すると ヘッダ内に チェックボックス が表示される sortenable ソート表示状態 true リンク表示 false 通常表示 項目名の表示状態を指定する 未指定の場合は デフォルト値 true が設定される また 項目 ID="checkbox" を指定した場合は ソート対象外となるため 通常表示 false となる href 項目名選択時の js 関数 項目名がリンク表示のとき リンクが選択された時の js 関数を指定する 未指定の場合は デフォルト値の onsortheadclick( 項目 ID); が設定される また 項目 ID="checkbox" を指定した場合は onclock イベントハンドラ に設定する js 関数を指定すること status 現在のソートキー true ソートキー false ソートキーでない 現在のソートキーを指定する 未設定の場合は デフォルト値 false が設定される また 項目 ID="checkbox" を指定した場合は 設定が無視され 自動的に false となる align 項目名の表示位置 center 中央表示 left 左寄せ right 右寄せ 項目名の表示位置を指定する 未指定の場合は デフォルト値 center が設定される その他 上記プロパティ以外の任意属性の設定値 上記プロパティ以外の属性を追加可能 各項目の <TD> タグに対する属性となる Page 60 Copyright ( 株 )NTT データイントラマート All rights Reserved.
69 3 画面デザイン共通モジュール 使用例 リストヘッダを表示するためのサンプルを 以下に示します HTML のサンプル <HTML> <HEAD> <IMART type="imdesigncss"></imart> <SCRIPT LANGUAGE="JavaScript"> // 一覧の項目名リンクがクリックされた時の処理 function onsortheadclick(key) { // ここには各自で処理を記述する } // (1) で指定した JavaScript 関数の処理 function oncheckbox() { // ここには各自で処理を記述する } </SCRIPT> </HEAD> <BODY> <TABLE class="list_border_bg"> <!-- リストヘッダ --> <IMART type="imlistheader" headerdata=aheader></imart> </TABLE> </BODY> </HTML> js のサンプル // バインド変数宣言 var aheader; // ヘッダ項目情報 // ページの初期化関数 function init() { aheader = new Array(); aheader[0] = new Object(); aheader[0].name = "checkctrl"; aheader[0].key = "checkbox"; aheader[0].href = "oncheckbox();"; aheader[1] = new Object(); aheader[1].name = " ユーザコード "; aheader[1].key = "user_cd"; aheader[1].status = true; aheader[1].href = func1(); ; (1) (2) } aheader[2] = new Object(); aheader[2].name = " ユーザ名 "; aheader[2].key = "name_kana"; aheader[3] = new Object(); aheader[3].name = " 会社 / 組織 "; aheader[3].key = "division"; aheader[3].sortenable = false; aheader[3].align = "left"; aheader[3].width = "200"; (3) (4) 作成者 株式会社 NTT データイントラマート Page 61
70 intra-mart 画面デザインガイドライン (Version6.1) 表示結果 (1) (2) (3) (4) Page 62 Copyright ( 株 )NTT データイントラマート All rights Reserved.
71 3 画面デザイン共通モジュール 必須の JavaScript 関数 リストヘッダの項目名リンクがクリックされた際に Call される JavaScript 関数の詳細を以下に示す 本タグを使用する場合は 各自で必ず JavaScript 関数の処理を記述すること 必須の JavaScript 関数を記述しない場合の動作については 保証外とする コーディング方法などの詳細については 使用例 を参照 ソートの項目切り替えリストヘッダの項目名リンクがクリックされた場合 JavaScript 関数の onsortheadclick() が呼び出されます 以下に その詳細を示す 関数名 onsortheadclick( key ) 概要リストヘッダの項目名リンクがクリックされた際に 呼び出される関数です 引数 key の値により どのヘッダ項目が選択されたかの情報を 取得することができます 引数 変数 内容 値 条件 key ヘッダの項目 ID ( 例 ) user_cd リストのヘッダ項目リンクが選択された 引数 key の値は ヘッダ情報オブジェクトの key プロパティで指定した ヘッダの項目 ID 作成者 株式会社 NTT データイントラマート Page 63
72 intra-mart 画面デザインガイドライン (Version6.1) 3.4 JavaEE 開発モデル このドキュメント内では prefix 属性を "imarttag" として説明を行います 記述例を以下に示します [ 記述例 ] <%@ taglib prefix="imarttag" uri="http// %> デザインスタイルシート 機能詳細 <imarttagimartdesigncss> により 現在指定されているテーマ ( 色 ) のスタイルシートを設定する ServerManager 配下の conf/system.xml ファイルの system/color-config/color-pattern タグ内で設定したCSSファイルが利用可能になります system/color-config/color-pattern に複数のCSSファイルを設定することも可能です 制約本タグを配置する場所は HTML の <HEAD> タグ内です 属性 <imarttagimartdesigncss> に指定する属性は ありません 使用例デザインスタイルシートを設定するためのサンプルを 以下に示します JSP のサンプル <%@ page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> <%@ taglib prefix="imarttag" uri="http// %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> </BODY> </HTML> 注意点各画面 ( ページ ) を作成する JSP ファイルの <HEAD> タグ内には 必ずデザインスタイルシート <imarttagimartdesigncss> を記述してください Page 64 Copyright ( 株 )NTT データイントラマート All rights Reserved.
73 3 画面デザイン共通モジュール タイトルバー 機能詳細 <imarttagimarttitlebar> により タイトルバーを表示する タイトルバーには アイコン と ページタイトル名 を指定して表示することができる 制約 本タグを配置する場所は HTML の <BODY> タグ内です 属性 <imarttagimarttitlebar> に指定する属性を 以下に示します 属性 title には ページタイトル名 を指定する 属性 icon には アイコン のファイル名を JSP からの相対パス またはコンテキストルートからの相対パスで指定する 属性 icon を未指定にした場合は アイコン (/images/standard/title.gif) が表示される 属性 icon に指定する相対パスの記述例 JSP からの相対パス images/standard/title.gif コンテキストルートからの相対パス /images/standard/title.gif 属性 型 必須 デフォルト値 説明 title java.lang.string - ページタイトル名 icon java.lang.string アイコンのファイル名 - JSP からの相対パスまたはコンテキストルートからの相対パス 使用例 タイトルバーを表示するためのサンプルを 以下に示します JSP のサンプル <%@ page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> <%@ taglib prefix="imarttag" uri="http// %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> <!-- タイトルバー表示 --> <imarttagimarttitlebar title=" 新規登録 " icon="/images/standard/title.gif" /> </BODY> </HTML> 表示結果 作成者 株式会社 NTT データイントラマート Page 65
74 intra-mart 画面デザインガイドライン (Version6.1) ツールバー 機能詳細 <imarttagimarttoolbarframe> タグにより ツールバーを表示する ( タグの詳細は <imarttagimarttoolbarframe> を参照 ) ツールバーの中には 複数の 処理リンク を配置することができる <imarttagimarttoolbarleft> タグに挟まれた 処理リンク は ツールバーの左側に配置される ( タグの詳細は <imarttagimarttoolbarleft> を参照 ) <imarttagimarttoolbarright> タグに挟まれた 処理リンク は ツールバーの右側に配置される ( タグの詳細は <IMART type="imtoolbarright"> を参照 ) <imarttagimarttoolbarframe> タグの内部に <imarttagimarttoolbarright> タグおよび <imarttagimarttoolbarleft> タグがどちらも存在しない場合の動作については未定義とする <imarttagimarticon> タグにより アイコン+ 処理名 の処理リンクを表示する ( タグの詳細は <imarttagimarticon> を参照 ) 制約 本タグを配置する場所は HTML の <BODY> タグ内です 手順ここでは ツールバーを作成するための手順として JSP ファイルに記述する内容を簡単に説明します ソースコードのサンプルについては 使用例 を参照してください (1) <imarttagimartdesigncss> を記述して スタイルシートの宣言を行います ( 記述方法については デザインスタイルシート を参照 ) (2) <imarttagimarttoolbarframe> タグを記述して ツールバーの外枠を表示します (3) <imarttagimarttoolbarframe> タグに挟まれた範囲に <imarttagimarttoolbarleft> タグを記述します ( ツールバーの左側に配置する 処理リンク がない場合は 省略可能 ) (4) <imarttagimarttoolbarframe> タグに挟まれた範囲に <imarttagimarttoolbarright> タグを記述します ( ツールバーの右側に配置する 処理リンク がない場合は 省略可能 ) (5) <imarttagimarticon> タグを <imarttagimarttoolbarleft> タグまたは <imarttagimarttoolbarright> タグに挟まれた範囲に記述して アイコン+ 処理名 の処理リンクを表示します (6) 処理リンク をツールバーの左側に表示するときは <imarttagimarttoolbarleft> タグに挟まれた範囲に <imarttagimarticon> タグを記述してください (7) 処理リンク をツールバーの右側に表示するときは <imarttagimarttoolbarright> タグに挟まれた範囲に <imarttagimarticon> タグを記述してください Page 66 Copyright ( 株 )NTT データイントラマート All rights Reserved.
75 3 画面デザイン共通モジュール 使用例 ツールバーを表示するためのサンプルを 以下に示す JSP のサンプル page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> taglib prefix="imarttag" uri="http// %> <% %> <HTML> <HEAD> <imarttagimartdesigncss /> 手順 (1) </HEAD> <BODY> <!-- タイトルバー表示 --> ( 省略 ) <!-- ツールバー表示 --> <imarttagimarttoolbarframe> <imarttagimarttoolbarleft> <imarttagimarticon name = " 新規登録 " icon = "/images/standard/new.gif" 手順 (5) (6) 手順 (3) href = "javascriptonaddaction();" /> <imarttagimarticon name = " 検索条件 " icon = "/images/standard/search.gif" 手順 (5) (6) href = "javascriptonsearchaction();" /> </imarttagimarttoolbarleft> 手順 (2) <imarttagimarttoolbarright> <imarttagimarticon name = " 戻る " 手順 (5) (7) icon = "/images/standard/arrow_left.gif" href = "javascriptonbackaction();" /> <imarttagimarticon name = " 最新情報 " 手順 (4) icon = "/images/standard/refresh.gif" 手順 (5) (7) href = "javascriptonreloadaction();" /> </imarttagimarttoolbarright> </imarttagimarttoolbarframe> </BODY> </HTML> 表示結果 作成者 株式会社 NTT データイントラマート Page 67
76 intra-mart 画面デザインガイドライン (Version6.1) ツールバーを作成するために必要なタグライブラリこの章では ツールバーを作成するために必要な タグライブラリの詳細を示します ツールバーは 以下の 表 3-6 ツールバーに必要な画面デザイン共通モジュール に示す タグライブラリで構成されています 表 3-6 ツールバーに必要な画面デザイン共通モジュール 参照 ページ <imarttagimarttoolbarframe> <imarttagimarttoolbarleft> <imarttagimarttoolbarright> <imarttagimarticon> <imarttagimarttoolbarframe> 詳細 ツールバーの外枠を表示する ツールバーの表示色は テーマによって自動に設定される 属性 <imarttagimarttoolbarframe> に指定する属性は ありません Page 68 Copyright ( 株 )NTT データイントラマート All rights Reserved.
77 3 画面デザイン共通モジュール <imarttagimarttoolbarleft> 詳細 ツールバー内の左側に 処理リンク を表示させたいときに使用する ツールバーの左側に表示する 処理リンク がないときは 省略可能である 必ず <imarttagimarttoolbarframe> タグの内部に記述すること <imarttagimarttoolbarleft> タグに挟まれた範囲に記述された 処理リンク は ツールバー内で左寄せに表示される 本タグに挟まれた範囲には 複数の 処理リンク を記述することができる 処理リンク には <imarttagimarticon> タグ ( 詳細は <imarttagimarticon> を参照 ) だけでなく 通常のHTMLタグ <A href="xxxx"></a> なども記述することが可能である 制約 本タグを単独で利用することはできない <imarttagimarttoolbarframe> タグの内部タグとして利用すること 本タグは <imarttagimarttoolbarright> タグの前に記述すること 属性 <imarttagimarttoolbarleft> タグに指定する属性は ありません <imarttagimarttoolbarright> 詳細 ツールバー内で 処理リンク を右側に表示させたいときに使用するタグである ツールバーの右側に表示する 処理リンク がないときは 省略可能である 必ず <imarttagimarttoolbarframe> タグの内部に記述すること <imarttagimarttoolbarright> タグに挟まれた範囲に記述された 処理リンク は ツールバー内で右寄せに表示される 本タグに挟まれた範囲には 複数の 処理リンク を記述することができる 処理リンク には <imarttagimarticon> タグ ( 詳細は <imarttagimarticon> を参照 ) だけでなく 通常のHTMLタグ <A href="xxxx"></a> なども記述することが可能である 制約 本タグを単独で利用することはできない <imarttagimarttoolbarframe> タグの内部タグとして利用すること 本タグは <imarttagimarttoolbarleft> タグの後に記述すること 属性 <imarttagimarttoolbarright> タグに指定する属性は ありません 作成者 株式会社 NTT データイントラマート Page 69
78 intra-mart 画面デザインガイドライン (Version6.1) <imarttagimarticon> 詳細 ツールバー内に 処理リンク を表示する この <imarttagimarticon> タグにより アイコン+ 処理名 の処理リンクが表示される アイコン のみ または 処理名 のみの表示も可能である 表示するアイコンは 属性 icon により指定できる 表示する処理名は 属性 name により指定できる 処理を選択されたときのリンク先として js の関数名や URL を指定することができる また リンク先の表示ウィンドウを指定することができる 本タグを <imarttagimarttoolbarleft> タグに挟まれた範囲に記述すると ツールバー内で左寄せに表示される 本タグを <imarttagimarttoolbarright> タグに挟まれた範囲に記述すると ツールバー内で右寄せに表示される 本タグを記述した順番に ツールバーの左から 処理リンク が配置される 制約 属性 href を指定した場合 <A> タグとして作成されます 属性 attr ( 任意の属性 ) を指定する場合 属性 href が設定されている必要があります 属性 <imarttagimarticon> に指定する属性を 以下に示す 属性 name には 処理名 を指定する 属性 name を未指定にした場合は アイコン だけが表示される 属性 icon には アイコン のファイル名を JSP からの相対パス またはコンテキストルートからの相対パスで指定する 属性 icon を未指定にした場合は 処理名 だけが表示される 属性 icon に指定する相対パスの記述例 JSP からの相対パス images/standard/search.gif コンテキストルートからの相対パス /images/standard/search.gif 属性 name および属性 icon がどちらも未指定の場合は 処理リンクの配置を無視する 属性 href には処理を選択された際のリンク先を指定する 指定する値は js の関数名 (javascriptxxxxx();) や URL などが可能である 属性 href を未指定にした場合は リンク表示ではなく ただのテキスト表示になる js の関数名 href="javascriptonaddaction()" URL href="http// 属性 target にはリンク先の表示ウィンドウを指定する 指定する値は HTML の target 属性に従う 属性 target を未指定にした場合は 同ウィンドウに表示される 属性 alt には画像の変わりに表示される文字列を指定する 属性 attr には <A> タグに指定する その他の属性値 を指定する 属性 attr に指定する値は 一度 変数 に代入してから attr="<%= attr %>" で指定すること 属性 attr に指定した値は 指定された文字列のまま <A> タグの属性として出力される Page 70 Copyright ( 株 )NTT データイントラマート All rights Reserved.
79 3 画面デザイン共通モジュール ( 例 ) <% String attr="tabindex =\"5\" id=\"reloadinfo\""; %> <imarttagimarticon name=" 最新情報 " attr="<%= attr %>" /> 属性 型 必須 デフォルト値 説明 name java.lang.string - 処理名 icon java.lang.string アイコンのファイル名 - JSP からの相対パスまたはコンテキストルートからの相対パス href java.lang.string - 処理選択時のジャンプ先 js 実行関数名や URL など Target java.lang.string 表示ウィンドウ alt java.lang.string - 画像の変わりに表示される文字列を指定 attr java.lang.string - <A> タグに指定する属性値 作成者 株式会社 NTT データイントラマート Page 71
80 intra-mart 画面デザインガイドライン (Version6.1) 入力項目 ここでは 登録系画面や 更新 削除系画面などで頻繁に使用される 項目名称 + 入力フィールド をまとめて 入力項目 として説明しています 機能詳細 登録系画面や 更新 削除系画面で 入力項目を作成する際に使用するタグである <imarttagimartitemnametd> により 項目名称を表示する ( タグの詳細は 項目名称 を参照 ) <imarttagimartinputtd> により 入力フィールドを表示する ( タグの詳細は 入力フィールド を参照 ) <imarttagimartselecttd> により 選択部品 ( セレクトボックス ) を表示する ( タグの詳細は 選択ボックス を参照 ) 制約本タグを配置する場所は HTML の <BODY> タグ内です HTML の <TD> タグとして作成されるため <TABLE><TR>~</TR></TABLE> 内に記述してください また デザインを統一するために本タグを使用する際には 必ず 使用例 に示す <TABLE><TR>~</TR></TABLE> の中に記述してください 手順 ここでは 入力項目を作成するための手順として JSP ファイルに記述する内容を簡単に説明します ソースコードのサンプルについては 使用例 を参照してください (1) <imarttagimartdesigncss> を記述して スタイルシートの宣言を行います ( 記述方法については デザインスタイルシート を参照 ) (2) デザインを統一するため <TABLE><TR>~</TR></TABLE> を記述します (3) <imarttagimartitemnametd> タグを (2) に挟まれた範囲に記述して 項目名称を表示します (4) <imarttagimartinputtd> タグを (2) に挟まれた範囲に記述して 入力フィールドを表示します (5) 選択ボックスに設定する 表示データを構築します (6) <imarttagimartselecttd> タグを (2) に挟まれた範囲に記述して 選択ボックスを表示します Page 72 Copyright ( 株 )NTT データイントラマート All rights Reserved.
81 3 画面デザイン共通モジュール 使用例 入力項目を表示するためのサンプルを 以下に示します JSP のサンプル page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> taglib prefix="imarttag" uri="http// %> <% Vector from = new Vector(); HashMap hashtemp = new HashMap(); // <imartselecttd> の list 属性に指定するデータを生成 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 = "username" size = "50" value = " ユーザ 00011" /> </TR> <TR> <imarttagimartitemnametd name=" パスワード " require /> <imarttagimartinputtd type = "password" name = "password" size = "40" /> </TR> 手順 (5) 手順 (1) 手順 (3) 手順 (4) 手順 (3) 手順 (2) 手順 (4) 手順 (3) 手順 (4) 作成者 株式会社 NTT データイントラマート Page 73
82 intra-mart 画面デザインガイドライン (Version6.1) <TR> <imarttagimartitemnametd name=" 出身地 " /> <imarttagimartselecttd list = "<%= from %>" name = "hometown" optionvalue = "value" optiontext = "from" size = "1" /> </TR> <TR> <imarttagimartitemnametd name=" 転送ファイル " /> <imarttagimartinputtd type = "file" name = "forwarfile" size = "50" /> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML> 手順 (3) 手順 (6) 手順 (3) 手順 (4) 手順 (2) 表示結果 Page 74 Copyright ( 株 )NTT データイントラマート All rights Reserved.
83 3 画面デザイン共通モジュール 入力項目を作成するために使用するタグライブラリ 項目名称 詳細 <imarttagimartitemnametd> により 入力項目の 項目名称 を表示する 登録系画面や 更新 削除系画面で 入力項目の項目名称を記述する際に使用する 属性 name に指定した値が 項目名称として表示される 属性 attr に指定した値は <TD> タグの属性として出力される 属性 require に指定した値によって 必須項目 または 通常項目 を切り替えることができる 制約 HTML の <TD> タグとして作成されるため <TABLE><TR>~</TR></TABLE> 内に記述してください また デザインを統一するために本タグを使用する際には 必ず 使用例 に示す <TABLE><TR>~</TR></TABLE> の中に記述してください 属性 <imarttag imartitemnametd> に指定する属性を 以下に示します 属性 name には 項目名称 を指定する 属性 attr には <TD> タグに指定する その他の属性値 を指定する 属性 attr に指定する値は 一度 変数 に代入してから attr="<%= attr %>" で指定すること 属性 attr に指定した値は 指定された文字列のまま <TD> タグの属性として出力される <TD> タグ属性を複数指定する場合は [ 属性名 ]= [ 値 ] をスペース区切りで繋げた文字列とする 指定する値は HTML の <TD> タグ属性に従う ( 例 ) <% String attr="width=\"150\" height=\"30\" colspan=\"2\""; %> <imarttagimartitemnametd name=" ユーザ ID" attr="<%= attr %>" /> 属性 require には 必須項目 または 通常項目 の種別を指定する 属性 require に "true" を指定すると 必須項目 として表示される 属性 require を未指定または "false" を指定した場合は 通常項目 として表示される 属性 型 必須 デフォルト値 説明 name java.lang.string - 項目名称 attr java.lang.string - <TD> タグに指定する属性値 require boolean - 必須項目の指定 作成者 株式会社 NTT データイントラマート Page 75
84 intra-mart 画面デザインガイドライン (Version6.1) <imarttag imartitemnametd> の記述例を示します [ 記述例 1] 属性 require を指定して 必須項目にした場合 <IAMRT type="imitemname" name=" ユーザ名 " require="true"></imart> [ 記述例 2] 属性 require を未指定にして 通常項目にした場合 <IMART type="imitemname" name=" ユーザ名 "></IMART> [ 記述例 3] 属性 attr を未指定にして <TD> タグに属性を追加した場合 <% String attr="width=\"150\" height=\"100\""; %> <imarttagimartitemnametd name=" ユーザ ID" attr="<%= attr %>" /> Page 76 Copyright ( 株 )NTT データイントラマート All rights Reserved.
85 3 画面デザイン共通モジュール 入力フィールド 詳細 <imarttagimartinputtd> により 入力項目の入力フィールドを表示する 登録系画面や 更新 削除系画面で 入力項目の入力フィールドを記述する際に使用する 属性 type に指定した値によって 異なる入力フィールドを表示することができる 属性 type="text" を指定した場合は テキスト入力フィールドが表示される 属性 type="password" を指定した場合は パスワード入力フィールドが表示される 属性 type="file" を指定した場合は ファイル入力フィールドが表示される 属性 type="checkbox" を指定した場合は チェックボックスが表示される 属性 type="radio" を指定した場合は ラジオボタンが表示される 属性 type="textarea" を指定した場合は テキストエリア入力フィールドが表示される (HTML の <TEXTAREA> タグとして作成される ) 属性 type="textarea" 以外は HTML の <INPUT> タグとして作成される 制約 HTML の <TD> タグとして作成されるため <TABLE><TR>~</TR></TABLE> 内に記述してください また デザインを統一するために本タグを使用する際には 必ず 使用例 に示す <TABLE><TR>~</TR></TABLE> の中に記述してください 作成者 株式会社 NTT データイントラマート Page 77
86 intra-mart 画面デザインガイドライン (Version6.1) 属性 <imarttagimartinputtd> に指定する属性を 以下に示します 共通属性 属性 type には 表示する部品の 種類 を指定する 属性 type に指定できる値は 以下の通りである text password file checkbox radio textarea テキスト入力フィールド パスワード入力フィールド ファイル入力フィールド チェックボックス ラジオボタン テキストエリア入力フィールド ( 属性 type="textarea" 以外は HTML の <INPUT> タグの type 属性同様 ) 属性 name には 名前 を指定する (HTML の <INPUT> および <TEXTAREA> タグの name 属性同様 ) 属性 attr には <TD> タグに指定する その他の属性値 を指定する 属性 attr に指定する値は 一度 変数 に代入してから attr="<%= attr %>" で指定すること 属性 attr に指定した値は 指定された文字列のまま <TD> タグの属性として出力される <TD> タグ属性を複数指定する場合は [ 属性名 ]= [ 値 ] をスペース区切りで繋げた文字列とする 指定する値は HTML の <TD> タグ属性に従う ( 例 ) <% String attr="width=\"150\" height=\"30\" colspan=\"2\""; %> <imarttagimartinputtd name="userid" attr="<%= attr %>" /> 属性 inputattr には <INPUT> タグに指定する その他の属性値 を指定する 属性 inputattr に指定する値は 一度 変数 に代入してから inputattr="<%= inputattr %>" で指定すること 属性 inputattr に指定した値は 指定された文字列のまま <INPUT> タグの属性として出力される 複数指定する場合は [ 属性名 ]= [ 値 ] をスペース区切りで繋げた文字列とする 指定する値は HTML の <INPUT> タグ属性に従う ( 例 ) <% String inputattr = "maxlength=\"256\""; %> <imarttagimartinputtd name="userid" inputattr="<%= inputattr %>" /> 属性型必須デフォルト値説明 type java.lang.string - 部品の種類 text テキスト入力フィールド password パスワード入力フィールド file ファイル入力フィールド checkbox チェックボックス radio ラジオボタン textarea テキストエリア入力フィールド name java.lang.string - 名前 attr java.lang.string - <TD> タグに指定する属性値 inputattr java.lang.string - <INPUT> タグに指定する属性値 Page 78 Copyright ( 株 )NTT データイントラマート All rights Reserved.
87 3 画面デザイン共通モジュール type="text" の属性 テキスト入力フィールド 属性 size には 入力フィールドの 大きさ を指定する (HTML の <INPUT> タグの size 属性同様 ) 属性 value には 入力フィールドの 初期値 を指定する (HTML の <INPUT> タグの value 属性同様 ) 属性 readonly には 入力の可否を指定する 属性 readonly に "true" を指定した場合は 入力フィールドへの入力が不可になる (HTML の <INPUT> タグの readonly 属性同様 ) 属性 readonly を未指定または に false をした場合は デフォルト値 入力可能 が設定される 属性 説明 必須 デフォルト値 書式 size 大きさ - size="50" value 初期値 - value="user00011" readonly 入力不可の指定 - readonly="true" [ 記述例 1] 属性 readonly を未指定して 入力可能にした場合 <imarttagimartinputtd type="text" name="userid" size="30" value="user00011" /> [ 記述例 2] 属性 readonly を指定して 入力不可にした場合 <imarttagimartinputtd type="text" name="userid" size="30" value="user00011" readonly="true" /> type="password" の属性 パスワード入力フィールド 属性 size には 入力フィールドの 大きさ を指定する (HTML の <INPUT> タグの size 属性同様 ) 属性 value には 入力フィールドの 初期値 を指定する (HTML の <INPUT> タグの value 属性同様 ) 属性 readonly には 入力の可否を指定する 属性 readonly に "true" を指定した場合は 入力フィールドへの入力が不可になる (HTML の <INPUT> タグの readonly 属性同様 ) 属性 readonly を未指定または に false をした場合は デフォルト値 入力可能 が設定される 属性 説明 必須 デフォルト値 書式 size 大きさ - size="40" value 初期値 - value="password00001" readonly 入力不可の指定 - readonly="true" [ 記述例 1] 属性 readonly を未指定して 入力可能にした場合 <imarttagimartinputtd type="password" name="pass" size="40" value="password00011" /> [ 記述例 2] 属性 readonly を指定して 入力不可にした場合 <imarttagimartinputtd type="password" name="pass" size="40" value="password00011" readonly="true" /> 作成者 株式会社 NTT データイントラマート Page 79
88 intra-mart 画面デザインガイドライン (Version6.1) type="file" の属性 ファイル入力フィールド 属性 size には 入力フィールドの 大きさ を指定する (HTML の <INPUT> タグの size 属性同様 ) 属性説明必須デフォルト値書式 size 大きさ - size="50" [ 記述例 ] 属性 size="50" を指定して表示 <imarttagimartinputtd type="file" name="forward_file" size="50" /> type="checkbox" の属性 チェックボックス 属性 caption には チェックボックス横に表示する 名称 を設定する 属性 checked を指定した場合は チェックボックスがチェックされた状態で表示される (HTML の <INPUT> タグの checked 属性同様 ) 属性説明必須デフォルト値書式 caption 名称 - caption=" チェック 1" checked チェック状態の指定 - checked [ 記述例 1] 属性 caption=" チェック 1" と指定して表示 <imarttagimartinputtd type="="checkbox" name="check1" caption=" チェック 1" /> [ 記述例 2] 属性 checked を指定して あらかじめチェックされた状態にした場合 <imarttagimartinputtd type="checkbox" name="check1" caption=" チェック 1" checked /> Page 80 Copyright ( 株 )NTT データイントラマート All rights Reserved.
89 3 画面デザイン共通モジュール type="radio" の属性 ラジオボタン 属性 caption には ラジオボタン横に表示する 名称 を設定する 属性 checked を指定した場合は ラジオボタンがチェックされた状態で表示される (HTML の <INPUT> タグの checked 属性同様 ) 属性説明必須デフォルト値書式 caption 名称 - caption=" ラジオ 1" checked チェック状態の指定 - checked [ 記述例 1] 属性 caption=" ラジオ 1" と指定して表示 < imarttagimartinputtd type="radio" name="radio1" caption=" ラジオ 1" /> [ 記述例 2] 属性 checked を指定して あらかじめチェックされた状態にした場合 < imarttagimartinputtd type="radio" name="radio1" caption=" ラジオ 1" checked /> type="textarea" の属性 テキストエリア表示 属性 value には 表示する 文字列 を指定する 属性 cols には テキストエリアの 横幅 を指定する (HTML の <TEXTAREA> タグの cols 属性同様 ) 属性 rows には テキストエリアの 縦幅( 行数 ) を指定する (HTML の <TEXTAREA> タグの rows 属性同様 ) 属性 readonly には 入力の可否を指定する 属性 readonly に "true" を指定した場合は 入力フィールドへの入力が不可になる (HTML の <TEXTAREA> タグの readonly 属性同様 ) 属性 readonly を未指定または に false をした場合は デフォルト値 入力可能 が設定される 属性説明必須デフォルト値書式 value 表示する文字列 - value=" ここに長い " cols テキストエリアの横幅 cols="40" - (<TEXTAREA> の cols 属性 ) rows テキストエリアの縦幅 ( 行数 ) rows="5" - (<TEXTAREA> の rows 属性 ) readonly 入力不可の指定 - readonly="true" [ 記述例 ] 属性 cols="40" 属性 rows="5" を指定して表示 < imarttagimartinputtd type="textarea" name="comment" cols="40" rows="5" value=" ここに長い文章が書けます " /> 作成者 株式会社 NTT データイントラマート Page 81
90 intra-mart 画面デザインガイドライン (Version6.1) 選択ボックス 詳細 <imarttagimartselecttd> により 入力項目の選択ボックスを表示する 登録系画面や 更新 削除系画面で 入力項目の選択ボックスを記述する際に使用する 既存の画面デザイン共通モジュール <imarttagselect> と同じ機能であり 画面デザインを統一するためにデザインが変更されている 制約本タグを配置する場所は HTML の <BODY> タグ内です HTML の <TD> タグとして作成されるため <TABLE><TR>~</TR></TABLE> 内に記述してください また デザインを統一するために本タグを使用する際には 必ず 使用例 に示す <TABLE><TR>~</TR></TABLE> の中に記述してください 属性 <imarttagimartselecttd> に指定する属性を 以下に示します 属性 list には 表示リスト を指定する 属性 list には List インターフェースを実装したクラスのインスタンスに Map インターフェースを実装したクラスのインスタンスを格納して指定する 属性 list に指定したインスタンスに格納されているすべての Map インターフェースを実装したクラスのインスタンスの値が コンボボックス内の表示要素になる 属性 list に指定されたインスタンスに格納されている Map インターフェースを実装したクラスの optionvalue 属性で指定されたキー名に格納されている値が コンボボックス内の各要素 (<OPTION> タグ ) の value 値になり optiontext 属性で指定されたキー名に格納されている値がコンボボックス内の要素の画面上での表示名になる ( ただし Map インターフェースを実装したクラスのインスタンスに格納されているキーおよび値が String 以外の場合の動作は保証外である ) 属性 optionvalue を未指定にした場合は デフォルト値の option_value が設定される 属性 optiontext を未指定にした場合は デフォルト値の option_text が設定される 属性 selected には コンボボックスの初期選択 ( 初期表示 ) 値を指定する 初期選択状態にする値のキー ( 属性 list に指定した Map インターフェースを実装したクラスのインスタンスの該当するキー名称 ) と一致する文字列を含む List インターフェースを実装したクラスのインスタンスを指定することで 初期選択状態にすることができる 属性 selected に指定した値に該当するキーが 属性 list に指定した Map インターフェースを実装したクラスのインスタンスのキー名称として存在しない場合は どの値も選択状態にはならない ( ただし コンボボックスの初期選択指定が存在しない場合は ブラウザの仕様で自動的にコンボボックス内の先頭の要素が初期選択状態として表示される ) また 初期選択状態とするキーを同時に複数個指定する場合は 属性 selected に対して複数のキー文字列を含む List インターフェースを実装したクラスのインスタンスを指定する事で可能になる その際 配列内の各要素の値として 初期選択状態にするキー ( 属性 list に格納した Map インターフェースを実装したクラスのインスタンスのキー名称 ) を格納すること 属性 blank には コンボボックス内に空データを表示させる 位置 を指定する 属性 blank に "top" を指定した場合は ボックス内の先頭位置に空データが表示される 属性 blank に "bottom" を指定した場合は ボックス内の最後尾位置に空データが表示される Page 82 Copyright ( 株 )NTT データイントラマート All rights Reserved.
91 3 画面デザイン共通モジュール 属性 size には 一度に表示する選択肢の行数を指定する (HTML の <SELECT> タグの size 属性同様 ) 属性 size を未指定にした場合は デフォルト値 1 が設定される 属性 multiple を指定した場合は 複数行選択が可能になる (HTML の <SELECT> タグの multiple 属性 が付加される ) 属性 multiple を未指定にした場合は 複数行選択が不可になる 属性 attr には <TD> タグに指定する その他の属性値 を指定する 属性 attr に指定する値は 一度 変数 に代入してから attr="<%= attr %>" で指定すること 属性 attr に指定した値は 指定された文字列のまま <TD> タグの属性として出力される <TD> タグ属性を複数指定する場合は [ 属性名 ]= [ 値 ] をスペース区切りで繋げた文字列とする 指定する値は HTML の <TD> タグ属性に従う ( 例 ) <% String attr="width=\"150\" height=\"30\" colspan=\"2\""; %> <imarttagimartselecttd name="sel" attr="<%= attr %>" /> 属性 selectattr には <INPUT> タグに指定する その他の属性値 を指定する 属性 selectattr に指定する値は 一度 変数 に代入してから selectattr="<%= selectattr %>" で指定すること 属性 selectattr に指定した値は 指定された文字列のまま <SELECT> タグの属性として出力される 複数指定する場合は [ 属性名 ]= [ 値 ] をスペース区切りで繋げた文字列とする 指定する値は HTML の <SELECT> タグ属性に従う ( 例 ) <% String selectattr ="title=\" ユーザ ID\" disabled"; %> <imarttagimartselecttd name="sel" selectattr ="<%= selectattr %>" /> 属性 型 必須 デフォルト値 説明 list java.util.list - 表示リスト selected java.util.list - 初期選択値の設定 blank java.util.string 空データを表示する位置 - top 先頭位置に空データ bottom 最後尾位置に空データ name java.util.string 名前 size java.util.string 表示する行数 または 1 double multiple 複数行選択の可否 optionvalue java.util.string <OPTION> タグの value 値に対応する option_value キー名 optiontext java.util.string <OPTION> タグの text 値に対応する option_text キー名 ( 任意 ) attr java.lang.string - <TD> タグに指定する属性値 selectattr java.lang.string - <SELECT> タグに指定する属性値 作成者 株式会社 NTT データイントラマート Page 83
92 intra-mart 画面デザインガイドライン (Version6.1) [ 記述例 1] 属性 list に指定した値を 選択ボックスで表示 <%= from %> の設定方法については 使用例 を参照 <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" /> [ 記述例 2] 属性 blank="top" に指定した場合 先頭に空データが挿入 <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" blank="top" /> [ 記述例 3] 属性 blank="bottom" に指定した場合 最後尾に空データが挿入 <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" blank="bottom" /> [ 記述例 4] 属性 size="3" に指定した場合 <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" size="3" /> [ 記述例 5] 属性 selectattr="disabled" を指定し <SELECT> タグに属性を設定 <% String selectattr ="disabled"; %> <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" selectattr="<%= selectattr %>" /> Page 84 Copyright ( 株 )NTT データイントラマート All rights Reserved.
93 3 画面デザイン共通モジュール リストコントロール 機能詳細 <imarttagimartlistcontrol> タグにより 各種一覧に対するソート切り替えコントロールと ページ切 り替えコントロールを表示する ソートおよび ページ切り替えコントロールはリンク表示となっている 各コントロールのリンクがクリックされると JavaScript 関数が呼び出されるため 本タグを使用した場合 は 各コントロールに対してJavaScript 関数の処理を記述する必要がある ( 詳細は デフォルトの必須 JavaScript 関数 を参照 ) ソート切り替えコントロールには 昇順ソート ( 有効および無効 ) 降順ソート ( 有効および無効 ) の矢印リ ンクが用意されている ソート対象 昇順アイコン 降順アイコン 昇順 ( 有効 ) ( 無効 ) 降順 ( 無効 ) ( 有効 ) ソート切り替えコントロールは 属性の指定により表示 非表示を設定することができる ページ切り替えコントロールには ( 前のページ ) ( 次のページ ) ( 最初のページ ) ( 最後のページ ) の矢印リンクが用意されている 一覧で表示しているページによって 矢印アイコンの表示および 非表示を切り替える 表示ページ 最初のページ 前のページ 次のページ 最後のページ アイコン アイコン アイコン アイコン 最初のページ非表示非表示 最後のページ非表示非表示 一覧の表示件数が [ 全件数 <1 ページの表示数 ] の場合は ページ切り替えコントロールの矢印部分 は表示されない ( ページ件数の表示のみ ) 制約本タグは HTML の <TABLE> タグとして作成されます 本タグを配置する場所は HTML の <BODY> タグ内です 作成者 株式会社 NTT データイントラマート Page 85
94 intra-mart 画面デザインガイドライン (Version6.1) 属性 <imarttagimartlistcontrol> に指定する属性を 以下に示す 属性 maxrecord には一覧に表示するデータの 全件数 を指定する 属性 currentpage には 表示するページ番号 を指定する 属性 currentpage を未指定にした場合は 1 ページ目 が表示される 属性 pageline には 1 ページの表示数 を指定することができる 属性 pageline を未指定にした場合は 1 ページに表示される件数は 10 件 となる 昇順 / 降順 切り替えコントロールは表示 または非表示を指定することができる 属性 sortdisplay に true を指定した場合は表示 false を指定した場合は非表示になる 属性 sortdisplay が未指定の場合は 昇順 / 降順 切り替えコントロールが表示される 属性 orderby には ソート基準方向 を指定する 現在のソート方向が昇順の場合は asc 降順の場合は desc を指定する 属性 orderby を未指定にした場合は デフォルト値の asc ( 昇順 ) となる 属性 prevpagefunc には 前ページリンクが選択時の js 関数を指定する 未指定の場合は javascriptonpagelinkfunc('[ 属性 currentpage]-1') が設定される 属性 nextpagefunc には 次ページリンクが選択時の js 関数を指定する 未指定の場合は javascriptonpagelinkfunc('[ 属性 currentpage]+1') が設定される 属性 firstpagefunc には 最初ページリンクが選択時の js 関数を指定する 未指定の場合は javascriptonpagelinkfunc('1') が設定される 属性 lastpagefunc には 最終ページリンクが選択時の js 関数を指定する 未指定の場合は javascriptonpagelinkfunc('[ 属性 maxrecord]/[ 属性 pageline]') が設定さ れる 属性 ascsortfunc には 昇順ソートリンク ( 有効 ) および ( 無効 ) が選択時の js 関数を指定する 未指定の場合は javascriptonsortlinkfunc('asc') が設定される 属性 descsortfunc には 降順ソートリンク ( 有効 ) および ( 無効 ) が選択時の js 関数を指定する 未指定の場合は javascriptonsortlinkfunc('desc') が設定される 属性 型 必須 デフォルト値 説明 maxrecord java.util.string 全件数 または double - currentpage java.util.string 表示するページ番号 または 1 double pageline java.util.string 1 ページの表示件数 または 10 double sortdisplay boolean 昇順/ 降順 の有無 true (true 表示 /false 非表示 ) sortorder java.lang.string ソート基準方向 asc (asc 昇順 /desc 降順 ) prevpagefunc java.lang.string 上記参照 前ページ選択時の js 関数 nextpagefunc java.lang.string 上記参照 次ページ選択時の js 関数 firstpagefunc java.lang.string 上記参照 最初ページ選択時の js 関数 lastpagefunc java.lang.string 上記参照 最終ページ選択時の js 関数 ascsortfunc java.lang.string 上記参照 昇順ソート選択時の js 関数 descsortfunc java.lang.string 上記参照 降順ソート選択時の js 関数 Page 86 Copyright ( 株 )NTT データイントラマート All rights Reserved.
95 3 画面デザイン共通モジュール 使用例 リストコントロール ( ソート切り替え ページ切り替え ) を表示するためのサンプルを 以下に示します JSP のサンプル <%@ page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> <%@ taglib prefix="imarttag" uri="http// %> <HTML> <HEAD> <imarttagimartdesigncss /> <SCRIPT LANGUAGE="JavaScript"> // ページ切り替え <> がクリックされた時の処理 function onpagelinkfunc(num) { // ここには各自で処理を記述する } // 昇順 / 降順 ( ソート条件 ) をクリックした時の処理 function onsortlinkfunc(mode) { // ここには各自で処理を記述する } </SCRIPT> </HEAD> <BODY> <TABLE border="0" width="100%" cellpadding="0" cellspacing="2"> <TR> <TD> <!-- リストコントロール --> <imarttagimartlistcontrol maxrecord="150" currentpage="1" pageline="10" sortorder="asc" /> </TD> </TR> </TABLE> </BODY> </HTML> 表示結果 作成者 株式会社 NTT データイントラマート Page 87
96 intra-mart 画面デザインガイドライン (Version6.1) デフォルトの必須 JavaScript 関数ソート切り替えコントロール およびページ切り替えコントロールのリンクがクリックされた際に呼び出される デフォルトの JavaScript 関数の詳細を以下に示します 本タグを使用する際に 以下の属性を未指定にした場合は 各自で必ずデフォルトの JavaScript 関数の処理を記述してください 属性 prevpagefunc 属性 nextpagefunc 属性 firstpagefunc 属性 lastpagefunc 属性 ascsortfunc 属性 descsortfunc 必須の JavaScript 関数を記述しない場合の動作については 保証外とします コーディング方法などの詳細については 使用例 を参照してください 上記の属性を指定した場合は デフォルトの JavaScript 関数の処理を記述する必要はありません Page 88 Copyright ( 株 )NTT データイントラマート All rights Reserved.
97 3 画面デザイン共通モジュール ソート切り替え <imarttagimartlistcontrol> で 属性 ascsortfunc および 属性 descsortfunc のいずれかを未指定にした場合 ソート切り替えコントロールで 昇順 および 降順 のリンクがクリックされると JavaScript 関数の onsortlinkfunc() が呼び出されます 以下に その詳細を示します 関数名 onsortlinkfunc( mode ) 概要ソート切り替えコントロール ( 昇順 or 降順 ) がクリックされた際に 呼び出される関数です 引数 mode の値により 昇順 降順 のどちらが選択されたかの情報を 取得することができます 引数変数 内容 値 条件 mode ソート基準方向 asc 昇順 リンクが選択された場合 desc 降順 リンクが選択された場合 ページ切り替え <imarttagimartlistcontrol> で 属性 prevpagefunc nextpagefunc firstpagefunc lastpagefunc のいずれかを未指定にした場合 ページ切り替えコントロールで 各矢印のリンクがクリックされた場合 JavaScript 関数の onpagelinkfunc() が呼び出されます 以下に その詳細を示します 関数名 onpagelinkfunc( num ) 概要ページ切り替えコントロールの 各矢印リンクがクリックされた際に 呼び出される関数です 引数 num の値により 次に表示するページ番号の情報を 取得することができます 引数変数 内容 値 条件 num ページ番号 1 最初ページ リンク が選択された場合 ([ 属性 maxrecord] /[ 属性 pageline]) の小数点繰上げ [ 属性 currentpage] -1 [ 属性 currentpage] +1 最後ページ リンク 前ページ リンク 次ページ リンク が選択された場合 が選択された場合 が選択された場合 作成者 株式会社 NTT データイントラマート Page 89
98 intra-mart 画面デザインガイドライン (Version6.1) リストヘッダ 機能詳細 <imarttagimartlistheader> により 各種一覧 ( リスト ) に対するヘッダを表示する 属性 headerdata には 一覧ヘッダ情報 を指定する 属性 headerdata には List インターフェースを実装したクラスのインスタンスに 一覧のヘッダ情報クラス (ListHeaderObject) のインスタンスを格納して指定する 属性 headerdata に指定したインスタンスに格納されているすべての ListHeaderObject クラスのインスタンスの値が ヘッダ項目の表示要素になる ( 一覧のヘッダ情報クラス (ListHeaderObject) の詳細は クラス ListHeaderObject を参照 ) 属性 headerdata に指定されたインスタンスに格納されている ListHeaderObject クラスのインスタンスを生成するときに指定した 項目 ID が 属性 sortkey の値と一致する場合に 該当の項目がソートキー ( 現在 ソートの基準になっている項目のこと ) となる 属性 sortkey には ヘッダ項目の初期表示時にソートキーとする 項目 ID を指定する 属性 sortkey に指定した値が 属性 headerdata に指定した ListHeaderObject クラスのインスタンスを生成するときに指定した 項目 ID として存在しない場合は どの項目もソートキーにはならない 制約本タグを配置する場所は HTML の <BODY> タグ内です また HTML の <TR> タグとして作成されるため <TABLE>~</TABLE> 内に記述してください その際 <TABLE> タグには class="list_border_bg" または class="table_border_bg" を指定してください 表全体の枠 ( 横幅 100% 固定 ) 表全体の枠 ( 横幅任意指定 ) <TABLE class="list_border_bg"> <TABLE class="table_border_bg"> 属性 <imarttagimartlistheader> に指定する属性を 以下に示します 属性 headerdata には List インターフェースを実装したクラスのインスタンスに ListHeaderObject クラスのインスタンスを格納して指定する (ListHeaderObject クラスの詳細は クラス ListHeaderObject を参照 ) 属性 sortkey には ソートキーとする項目 ID を指定する 属性型必須デフォルト値説明 headerdata java.util.list - 一覧ヘッダ情報 sortkey java.util.string - ソートキーとする項目 ID Page 90 Copyright ( 株 )NTT データイントラマート All rights Reserved.
99 3 画面デザイン共通モジュール 使用例 リストヘッダを表示するためのサンプルを 以下に示します JSP のサンプル page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> taglib prefix="imarttag" uri="http// %> page import="java.util.arraylist" %> page import="jp.co.intra_mart.foundation.core.taglib.listheaderobject" %> <% // ヘッダ項目情報を設定 ListHeaderObject objdata = null; ArrayList data = new ArrayList(); objdata = new ListHeaderObject("checkbox", "checkctrl", "oncheckbox();"); data.add(objdata); objdata = new ListHeaderObject("userId", " ユーザコード "); data.add(objdata); objdata = new ListHeaderObject("userName", " ユーザ名 "); data.add(objdata); objdata = new ListHeaderObject("comp", " 会社 / 組織 ", false); objdata.setalign("left"); objdata.setattr("width=\"150\" tabindex=\"1\""); data.add(objdata); (1) (2) (3) (4) %> <HTML> <HEAD> <imarttagimartdesigncss /> <SCRIPT LANGUAGE="JavaScript"> // 一覧の項目名リンクがクリックされた時の処理 function onsortheadclick( key ) { // ここには各自で処理を記述する } // (1) で指定した JavaScript 関数の処理 function oncheckbox() { // ここには各自で処理を記述する } } </SCRIPT> </HEAD> <BODY> <TABLE class="list_border_bg"> <!-- リストヘッダ--> <imarttagimartlistheader headerdata="<%= data %>" sortkey="userid" /> </TABLE> </BODY> </HTML> 作成者 株式会社 NTT データイントラマート Page 91
100 intra-mart 画面デザインガイドライン (Version6.1) 表示結果 (1) (2) (3) (4) クラスListHeaderObject List インターフェースを実装したクラスのインスタンスに このヘッダ情報クラス ListHeaderObject のインスタンスを格納して 属性 headerdata に指定します jp.co.intra_mart.foundation.core.taglib.listheaderobject ListHeaderObjectクラスをインスタンス化するときに 使用するコンストラクタによって異なるヘッダ情報を生成することができます コンストラクタの詳細は コンストラクタ を参照してください ヘッダ情報クラス ListHeaderObject に設定するヘッダ情報項目の内容について 以下の 表 3-8 ListHeaderObjectクラスの設定メソッド に示します 表 3-7 ListHeaderObject クラスに設定するヘッダ情報 設定内容 型 説明 項目 ID java.lang.string 項目 ID の値を 属性 sortkey に指定すると ソートキーになる 項目 ID に "checkbox" を指定すると ヘッダ内に チェックボックス が表示される 項目名 java.lang.string ヘッダに表示する項目名を指定する 未指定の場合は 空のヘッダが表示される また 項目 ID="checkbox" を指定した場合は <INPUT type="checkbox"> タグの name 属性となる ソート表示状態 boolean true リンク表示 false 通常表示 項目名の表示状態を指定する 未指定の場合は デフォルト値 true が設定されるただし 項目 ID="checkbox" を指定した場合は ソート対象外となるため 通常表示 false が設定される 項目名選択時の js 関数 java.lang.string 項目名がリンク表示のとき リンクが選択された時の js 関数を指定する 未指定の場合は デフォルト値の onsortheadclick( 項目 ID); が設定される また 項目 ID="checkbox" を指定した場合は onclock イベントハンドラ に設定する js 関数を指定する 項目名の表示位置 java.lang.string center 中央表示 left 左寄せ right 右寄せ 項目名の表示位置を指定する 未指定の場合は デフォルト値 center が設定される 項目に設定する任意の属性 java.lang.string 項目に設定する任意の属性を指定する ( 実際には各項目の<TD>タグの属性となる ) 複数の任意の属性を指定することも可能 ( 指定方法は 使用例を参照してください ) Page 92 Copyright ( 株 )NTT データイントラマート All rights Reserved.
101 3 画面デザイン共通モジュール 注意事項 ListHeaderObject クラスをインスタンス化した際に ソート表示状態が リンク表示 に設定された場合は 項目名はリンク表示となります 項目名のリンクがクリックされると JavaScript 関数が呼び出されるため 本タグを使用した場合は 各項目名リンクに対しての JavaScript 関数の処理を記述する必要があります 項目名選択時の js 関数 を指定した場合は その JavaScript 関数を記述してください 未指定にした場合は デフォルトの JavaScript 関数の onsortheadclick を必ず記述してください ( 詳細は デフォルトの必須 JavaScript 関数 を参照 ) 作成者 株式会社 NTT データイントラマート Page 93
102 intra-mart 画面デザインガイドライン (Version6.1) コンストラクタ ListHeaderObject クラスをインスタンス化するときに 使用するコンストラクタによって異なるヘッダ情報を生成す ることができます public ListHeaderObject( ) 空のヘッダ情報オブジェクトを作成します 引数なし 空のヘッダ項目を作成する際に使用する public ListHeaderObject( String id, String name ) 項目 ID と項目名を指定して ヘッダ情報オブジェクトを作成します 引数型説明 id java.lang.string 項目 ID name java.lang.string 項目名 引数 id に checkbox を指定すると ヘッダ内にチェックボックスが表示される チェックボックスをクリックした際の onclick イベントは無し ソート表示状態は デフォルト値の リンク表示(true) になる ただし 引数 id="checkbox" の場合は 通常表示 (false) になる 項目名選択時の js 関数は デフォルト値の onsortheadclick('id'); になる public ListHeaderObject( String id, String name, boolean sortlink ) 項目 ID と項目名とソート表示状態を指定して ヘッダ情報オブジェクトを作成します 引数型説明 id java.lang.string 項目 ID name java.lang.string 項目名 sortlink boolean ソート表示状態 true リンク表示 false 通常表示 引数 id に checkbox を指定すると ヘッダ内にチェックボックスが表示される この場合 引数 sortlink の指定は無視される チェックボックスをクリックした際の onclick イベントは無し 項目名選択時の js 関数は デフォルト値の onsortheadclick('id'); になる public ListHeaderObject( String id, String name, String href ) 項目 ID と項目名と項目名選択時の js 関数を指定して ヘッダ情報オブジェクトを作成します 引数型説明 id java.lang.string 項目 ID name java.lang.string 項目名 href java.lang.string 項目名選択時の js 関数 引数 id に checkbox を指定すると ヘッダ内にチェックボックスが表示される ソート表示状態は デフォルト値の リンク表示(true) になる ただし 引数 id="checkbox" の場合は 通常表示 (false) になる ソート表示状態は デフォルト値の リンク表示(true) になる ただし 引数 id="checkbox" の場合は 通常表示 (false) になる 引数 id に checkbox を指定した場合 引数 href で指定した js 関数は チェックボックスの onclick イベントハンドラに記述される Page 94 Copyright ( 株 )NTT データイントラマート All rights Reserved.
103 3 画面デザイン共通モジュール メソッド ヘッダ情報を設定するためのメソッドについて 以下の 表 3-8 ListHeaderObject クラスの設定メソッド に示 します 表 3-8 ListHeaderObject クラスの設定メソッド メソッドパラメータ説明 setsortlink(boolean sortlink) ソート表示状態 true リンク表示 false 通常表示 項目名の表示状態を指定する 未指定の場合は デフォルト値 true が設定される sethref(string href) 項目名選択時の js 関数 項目名がリンク表示の場合 リンクが選択された時の js 関数を指定する 未指定の場合は デフォルト値の onsortheadclick('id'); が設定される また 項目 ID="checkbox" を指定した場合は onclock イベントハンドラ に記述される js 関数を指定すること setalign(string align) 項目名の表示位置 center 中央表示 項目名の表示位置を指定する 未指定の場合は left 左寄せ デフォルト値 center が設定される right 右寄せ setattr(string attr) 項目の <TD> タグに設定する任意の属性の値 各項目の <TD> タグに指定する属性値を指定する 作成者 株式会社 NTT データイントラマート Page 95
104 intra-mart 画面デザインガイドライン (Version6.1) デフォルトの必須 JavaScript 関数リストヘッダの項目名リンクがクリックされた際に呼び出される デフォルトの JavaScript 関数の詳細を以下に示します 本タグを使用する際に 属性 headerdata に指定する ListHeaderObject クラスをインスタンス化するときに ソート表示状態が リンク表示 で 項目名選択時の js 関数 を指定しないでデフォルト値のまま設定した場合は 各自でデフォルトの JavaScript 関数の処理を記述する必要があります 必須の JavaScript 関数を記述しない場合の動作については 保証外とします コーディング方法などの詳細については 使用例 を参照してください ListHeaderObject クラスをインスタンスするときに 項目名選択時の js 関数 を指定した場合は デフォルトの JavaScript 関数の処理を記述する必要はありません ソートの項目切り替え属性 headerdata に指定する ListHeaderObject クラスをインスタンスするときに 項目名選択時の js 関数 を未指定にした場合 リストヘッダの項目名リンクがクリックされると JavaScript 関数の onsortheadclick() が呼び出されます 以下に その詳細を示します 関数名 onsortheadclick( key ) 概要リストヘッダの項目名リンクがクリックされた際に 呼び出される関数です 引数 key の値により どのヘッダ項目が選択されたかの情報を取得することができます 引数 変数 内容 値 条件 key ヘッダの項目 ID ( 例 ) username リストヘッダの項目名リンクが選択された場合 引数 key の値は ListHeaderObject クラスをインスタンスするときに指定した 項目 ID です Page 96 Copyright ( 株 )NTT データイントラマート All rights Reserved.
105 4 画面デザインサンプル 4 画面デザインサンプル 共通でよく使用されると思われる 画面デザインのイメージサンプルを定義します このドキュメント内で示す画面全体図はあくまでイメージであり こんな用途の場合は このような感じの画面にする ということを規定しています 規定されていない画面仕様が発生した場合は 以下に示すデザイン定義を基準として 各仕様に応じて作成してください 作成者 株式会社 NTT データイントラマート Page 97
106 intra-mart 画面デザインガイドライン (Version6.1) 4.1 検索系画面 検索画面についてのイメージを定義します 検索条件入力画面と 検索結果一覧画面は フレーム分けで一画面に表示するのではなく 別画面に遷移して表示してください 検索条件入力画面 (1) 検索に必要な 検索条件項目を表示する (2) [ 決定 ] ボタンは 検索条件項目の下部中央に配置する 全体図のイメージについては 以下 図 4-1 検索条件入力画面の全体図 を参照してください 図 4-1 検索条件入力画面の全体図 検索条件入力画面の必須コントロールを 以下 表 4-1 検索条件入力画面の必須コントロール に示します 表 4-1 検索条件入力画面の必須コントロール コントロール 動作 備考 ( 条件 ) 1 タイトルバー 2 ツールバー 3 検索条件項目 必要な検索条件を表示する 4 [ 決定 ] ボタン 検索結果あり 検索結果一覧画面 検索結果なし 検索結果なし画面 へ遷移する Page 98 Copyright ( 株 )NTT データイントラマート All rights Reserved.
107 4 画面デザインサンプル 検索結果一覧画面 (1) 検索条件入力画面で入力された 検索条件に一致する結果一覧を表示する (2) 検索結果が存在しない場合は 検索結果なし画面 へ遷移する 全体図のイメージについては 以下 図 4-2 検索結果一覧画面の全体図 を参照してください 図 4-2 検索結果一覧画面の全体図 検索条件入力画面の必須コントロールを 以下 表 4-2 検索結果一覧画面の必須コントロール に示します 表 4-2 検索結果一覧画面の必須コントロール 名称 コントロール 備考 ( 条件 ) 1 タイトルバー <IMART type="imtitlebar"> または <imarttagimarttitlebar> 2 ツールバー <IMART type="imtoolbarframe"> または <imarttagimarttoolbarframe> 3 現在の検索条件 指定された検索条件を表示する 4 リストコントロール 昇順 / 降順で並べ替える 一覧の上下に配置する [ 昇順 / 降順 ] ボタン [ ページ切り替え ] ボタン ページを切り替える ( 詳細は リストコントロール または リストコントロール を参照 ) 5 リストヘッダ 一覧 [ 項目名 ] 項目名をクリックすると ソートキーが切り替わる ( 詳細は リストヘッダ または ソートキー項目名と通常項目名は色分けする リストヘッダ を参照 ) 6 一覧 [ データ部 ] 1ページ10 件まで 作成者 株式会社 NTT データイントラマート Page 99
108 intra-mart 画面デザインガイドライン (Version6.1) 4.2 登録系画面 新規登録画面についてのイメージを定義します (1) 登録情報の項目は 必須入力項目と通常入力項目を区別できるように色分けする (2) [ 登録 ] ボタンは 登録情報項目の下部中央に配置する 全体図のイメージについては 図 4-3 登録画面の全体図 を参照してください 図 4-3 登録画面の全体図 登録画面の必須コントロールを 以下 表 4-4 登録画面の必須コントロール に示します 表 4-3 登録画面の必須コントロール コントロール 動作 備考 ( 条件 ) 1 タイトルバー 2 ツールバー 3 登録情報項目 登録に必要な項目を表示する 必須項目には ( 必須 ) と記述する 4 [ 登録 ] ボタン 更新 削除画面 へ遷移する Page 100 Copyright ( 株 )NTT データイントラマート All rights Reserved.
109 4 画面デザインサンプル 4.3 更新 削除系画面 更新 削除画面についてのイメージを定義します (1) 更新情報の項目は 必須入力項目と通常入力項目を区別できるように色分けする (2) 更新情報項目の内容には 既存の登録情報を表示させる (3) [ 更新 ] ボタン [ 削除 ] ボタンは 登録情報項目の下部中央に配置する (4) [ 削除 ] ボタンをクリックした後は 削除確認 のダイアログメッセージを表示させること 全体図のイメージについては 以下 図 4-4 更新 削除画面の全体図 を参照してください 図 4-4 更新 削除画面の全体図 更新 削除画面の必須コントロールを 以下 表 4-4 登録画面の必須コントロール に示します 表 4-4 登録画面の必須コントロール コントロール 動作 備考 ( 条件 ) 1 タイトルバー 2 ツールバー 3 更新情報項目 既存の登録情報を表示する 必須項目は色分けする 4 [ 更新 ] ボタン 仕様により遷移先が変わる 5 [ 削除 ] ボタン ボタン押下時に 削除確認 ダイアログメッセージを表示 仕様により動作の変更可能 作成者 株式会社 NTT データイントラマート Page 101
110 intra-mart 画面デザインガイドライン (Version6.1) 4.4 一覧系画面 ユーザ一覧 一覧系画面についてのイメージを定義します ユーザ一覧画面および会社 組織ツリー画面は フレーム分けをしないで 画面遷移して表示してください ユーザ検索画面 ( 単一選択時 ) についてのイメージを定義します (1) 検索条件入力画面で入力された 検索条件に一致する結果一覧を表示する (2) 検索結果が存在しない場合は 別途検索結果なし画面へ遷移する 図 4-5 ユーザ一覧画面の全体図 ( ポップアップ ) ユーザ一覧画面の必須コントロールを 以下 表 4-5 ユーザ一覧画面の必須コントロール ( ポップアップ ) に示します Page 102 Copyright ( 株 )NTT データイントラマート All rights Reserved.
111 4 画面デザインサンプル 表 4-5 ユーザ一覧画面の必須コントロール ( ポップアップ ) コントロール動作備考 ( 条件 ) 1 ウィンドウタイトル表示する文字は リクエスト引数により変更可能 request.wnd_title 2 タイトルバー表示する文字は リクエスト引数により変更可能 request.message 3 ツールバー 3-1 [ 検索条件 ] 検索条件入力画面 へ遷移する ( 戻る ) 戻り先の 検索条件入力 画面には 前回入力された検索条件を再表示する 3-2 [ 閉じる ] ポップアップウィンドウを閉じる 4 現在の検索条件 指定された検索条件を表示する 5 [ 決定 ] ボタン 複数選択 メイン画面一覧に選択内容を追加 単一選択 選択を確定し ウィンドウを閉じる 6 7 リストコントロール [ 昇順 / 降順 ] ボタン [ ページ切り替え ] ボタン リストヘッダ 一覧 [ 項目名 ] 昇順 / 降順で並べ替えるページを切り替える ( 詳細は リストコントロール または リストコントロール を参照 ) 項目名をクリックすると ソートキーが切り替わる ( 詳細は リストヘッダ または リストヘッダ を参照 ) history.back() は使用不可 一覧の上下に配置する ソートキー項目と通常項目は色分けする 8 一覧 [ データ部 ] 1ページ10 件まで 8-1 [ ラジオボタン ]or [ ラジオボタン ] 1 件のみ選択できる 複数選択 単一選択により表 [ チェックボックス ] [ チェックボックス ] 複数選択できる 示内容を変更する 作成者 株式会社 NTT データイントラマート Page 103
112 intra-mart 画面デザインガイドライン (Version6.1) ロール一覧 ロール検索画面 ( 複数選択時 ) についてのイメージを定義します (1) 検索条件入力画面で入力された 検索条件に一致する結果一覧を表示する (2) 検索結果が存在しない場合は 別途検索結果なし画面へ遷移する 図 4-6 ロール一覧画面の全体図 ( ポップアップ ) ロール一覧画面の必須コントロールを 表 4-6 ロール一覧画面の必須コントロール ( ポップアップ ) に示します 表 4-6 ロール一覧画面の必須コントロール ( ポップアップ ) コントロール動作備考 ( 条件 ) 1 ウィンドウタイトル表示する文字は リクエスト引数により変更可能 request.wnd_title 2 タイトルバー表示する文字は リクエスト引数により変更可能 request.message 3 ツールバー 3-1 [ 検索条件 ] 検索条件入力画面 へ遷移する ( 戻る ) history.back() は 使用不可 3-2 [ 閉じる ] ポップアップウィンドウを閉じる 4 現在の検索条件指定された検索条件を表示する 5 [ 決定 ] ボタン 複数選択 メイン画面一覧に選択内容を追加 単一選択 選択を確定し ウィンドウを閉じる 6 7 リストコントロール [ 昇順 / 降順 ] ボタン [ ページ切り替え ] ボタン リストヘッダ 一覧 [ 項目名 ] 昇順 / 降順で並べ替えるページを切り替える ( 詳細は リストコントロール または リストコントロール を参照 ) 項目名をクリックすると ソートキーが切り替わる ( 詳細は リストヘッダ または リストヘッダ を参照 ) 一覧の上下に配置する 一覧の上下に配置する ソートキー項目と通常項目は色分けする 8 項目欄 [ チェックボックス ] チェックボックスの全選択 / 全解除ができる 複数選択の場合のみ表示 9 一覧 [ データ部 ] 1ページ10 件まで 9-1 [ ラジオボタン ]or [ チェックボックス ] [ ラジオボタン ] 1 件のみ選択できる [ チェックボックス ] 複数選択できる 複数選択 単一選択により表示内容を変更する Page 104 Copyright ( 株 )NTT データイントラマート All rights Reserved.
intra-mart WebPlatform/AppFramework
intra-mart WebPlatform/AppFramework Ver.7.2 画面デザインガイドライン 2012/08/03 第 2 版 > 変更年月日変更内容 2010/04/01 初版 2012/08/03 第 2 版 3.3.4.5.2.3 属性 に タグ読み出し専用入力フォームの記述例を追加しました 3.4.4.5.2.3 属性 に
画面デザインガイドライン
画面デザインガイドライン Version6.0 第二版 2009 年 07 月 31 日 > 変更年月日変更内容 2006/08/11 初版 2009/07/31 第二版 5.3 検索種別 の誤字を修正しました 目次 > 1 はじめに...1 1.1 開発環境条件...1 2 ユーザインタフェース ガイドライン...2 2.1 ガイドラインの全体構成...2 2.1.1
スタイルシート仕様書
スタイルシート仕様書 Version 6.0 初版 2006 年 8 月 11 日 変更年月日 2006/8/11 初版 > 変更内容 目次 > 1 はじめに...1 1.1 概要...1 1.2 J2EE 開発モデルのprefix 属性...1 1.3 デザインスタイルシートタグの設定...1 2 カラーパターン...2 2.1 標準カラーパターン...2 2.2
intra-mart WebPlatform/AppFramework
intra-mart WebPlatform/AppFramework Ver.7.2 画面デザインスタイルシート仕様書 2012/08/03 第 2 版 > 変更年月日変更内容 2010/04/01 初版 2012/08/03 第 2 版 4.4.2 output を追加しました 5.14 タグで読み出し専用の入力フォームを作成する を追加しました 目次
<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>
情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合
intra-mart Accel Platform
intra-mart Accel Platform IM- 共通マスタスマートフォン拡張プログラミングガイド 2012/10/01 初版 変更年月日 2012/10/01 初版 > 変更内容 目次 > 1 IM- 共通マスタの拡張について...2 1.1 前提となる知識...2 1.1.1 Plugin Manager...2 1.2 表記について...2 2 汎用検索画面の拡張...3
intra-mart Accel Platform — IM-共通マスタ スマートフォン拡張プログラミングガイド 初版
Copyright 2012 NTT DATA INTRAMART CORPORATION 1 Top 目次 1. 改訂情報 2. IM- 共通マスタの拡張について 2.1. 前提となる知識 2.1.1. Plugin Manager 2.2. 表記について 3. 汎用検索画面の拡張 3.1. 動作の概要 3.1.1. 汎用検索画面タブの動作概要 3.2. 実装の詳細 3.2.1. 汎用検索画面タブの実装
■新聞記事
情報処理 C (P.1) 情報処理 C ホームページ作成入門 テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合 ) [ スタート ]-[ プログラム ]-[ テキストエディタ ]-[TeraPad] をクリック
JavaScript 演習 2 1
JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript
intra-mart Accel Platform — 招待機能プログラミングガイド 初版
Copyright 2016 NTT DATA INTRAMART CORPORATION 1 Top 目次 1. 改訂情報 2. はじめに 3. 権限リストを拡張する 2 改訂情報 変更年月日 変更内容 2016-04-01 初版 3 はじめに 項目 このガイドについて このガイドについて このガイドでは 招待機能の拡張方法および注意点について解説します 4 権限リストを拡張する 項目 この機能について実装済みの招待権限デコレータ実装方法設定方法
データ解析
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 奈良産業大学情報学部 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) HTML 言語によるウェブページの制作 日時 会場 平成 16 年 8 月 4 日 ( 水 )9 時 10 分 ~ 15 時 40 分 奈良産業大学 10 号館 3 階 1032 教室 日程 時間内容場所 9:10 ~ 9:20 日程説明 1033 教室 9:30
Shareresearchオンラインマニュアル
Chrome の初期設定 以下の手順で設定してください 1. ポップアップブロックの設定 2. 推奨する文字サイズの設定 3. 規定のブラウザに設定 4. ダウンロードファイルの保存先の設定 5.PDFレイアウトの印刷設定 6. ランキングやハイライトの印刷設定 7. 注意事項 なお 本マニュアルの内容は バージョン 61.0.3163.79 の Chrome を基に説明しています Chrome の設定手順や画面については
brieart変換設定画面マニュアル
変換設定画面マニュアル Ver. 1.1 更新日 :2012/11/19 株式会社アイ エヌ ジーシステム Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 目次 1. brieartとは? 3 ラベル 26 リスト 29 brieartとは 3 開閉 ( アコーディオン ) 32 注意事項 制限事項など 4 ボタン 35 パネル
フォト アルバム
操作説明書 ESCORT 目次 ESCORT 目次 ESCORT 操作の流れログイン / ログアウト方法ホーム ( メニュー ) ユーザー管理 ユーザー登録 / ユーザー修正方法 ユーザー削除方法ディレクトリ管理 ディレクトリ登録 / ディレクトリ修正方法 ディレクトリ削除方法ディレクトリ切替テンプレート管理 テンプレート登録 / テンプレート再設定方法 テンプレート削除方法 特殊タグ設定方法定数タグ設定
(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ
1. はじめの準備 (1) フォルダの作成 ホームページ作成の基礎 これから作るホームページのデータを ホームページ用 として保存 ( 保管 ) するフォルダを作成します ホームページで使う作成したファイル画像 写真 音楽などファイルは すべて同じフォルダに保存します デスクトップやマイドキュメントの中 ( 任意 ) で 右クリック 新規作成 (N) フォルダ (F) で新しいフォルダができます (
スタイルシートでデザインを整えよう
スタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので 表示はブラウザ次第であることを強調してきました あるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると 他の環境では意味が通じにくい 相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなく スタイルシートという別の機能をもちいます
intra-mart WebPlatform/AppFramework
intra-mart WebPlatform/AppFramework Ver.7.2 ポータルシステム管理者操作ガイド 2010/04/01 初版 i 変更履歴 変更年月日 変更内容 2010/04/01 初版 ii 第 1 章ポートレット管理 1 1.1 ポートレット管理とは 2 1.2 ポートレットアプリケーション一覧 3 1.2.1 概要 3 1.3 ポートレットアプリケーションの登録 4
フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ
![フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ](/thumbs/88/116902181.jpg "フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ")
フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボックス名 : t1 関数名 : MM() test-a.htm function MM(){ a=document.f1.t1.value;
JavaScript演習
JavaScript 演習 2 1 本日の内容 prompt 関数 演習 1 演習 2 document.getelementbyid 関数 演習 3 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習 4 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行 2. 詳細設定タブの スクリプトエラーごとに通知を表示する をチェック
intra-mart Accel Collaboration — ファイルライブラリ ユーザ操作ガイド 第3版
Copyright 2012 NTT DATA INTRAMART CORPORATION 1 Top 目次 intra-mart Accel Collaboration ファイルライブラリユーザ操作ガイド第 3 版 2015-04-01 1. 改訂情報 2. ファイルライブラリについて 3. 基本編 3.1. ファイルをアップロードする 3.2. ファイル一覧を表示する 3.3. ファイルを検索してダウンロードする
brieart初期導入ガイド
初期導入ガイド Ver..0 更新日 :0/9/7 株式会社アイ エヌ ジーシステム Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 目次. brieart とは? brieart とは? 注意事項 制限事項など. brieart 導入の流れ 6. brieart の管理画面にログイン 7. 登録情報 8 登録情報の確認 変更 8
JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と
JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と略 ) にある ガントチャートプラグイン を 下記の手順で利用してみましょう ガントチャートプラグイン
extChatText.pdf
拡張機能ユニット チャット風テキストユニット マニュアル シフトテック株式会社 発行 :2018/12/19 チャット風テキストユニット マニュアル - 1 概要 チャットのような会話形式でテキストを表示するユニットです ール ー ア ン ンテ ー 特徴 アイコン用画像 + 名前 + 吹き出し付テキストで構成されたユニットです 表示位置を左右に出し分けることで チャットのような会話形式でテキストを表示できます
クイックスタートマニュアル目次 スマホサイトビルダーモビークとは? モビークの特徴 ドラッグ& ドロップで簡単編集 スタイリッシュなデザイン部品 PC サイトと自動連動 最高のSEO 対策導入までの流れ STEP1 初期デザイン設定 STEP2 ページの登録 STEP3 スマホページの編集 STEP
スマホサイトビルダーモビーククイックスタートマニュアル 更新日 :2014 年 06 月 02 日 Ver:2.0.0 Copyright2012-2014mobeekAllRightsreserved. クイックスタートマニュアル目次 スマホサイトビルダーモビークとは? モビークの特徴 ドラッグ& ドロップで簡単編集 スタイリッシュなデザイン部品 PC サイトと自動連動 最高のSEO 対策導入までの流れ
IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation
IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 目次 1. はじめに ( 資料の目的 ) 2. Coach View 構造の基本 2.1 CSS の基礎 2.2 Coach における CSS 記述場所 2.3 標準 Coach View 構造の基本 2.4 Coach における CSS セレクター指定の基本 3. 実践
目次 管理画面へログイン 3 採用情報の投稿 4 採用情報の入力方法 5 トップページの項目の編集 6-9 メディアライブラリ 10-11
採用ページプラスアイ更新用マニュアル Powered by 目次 管理画面へログイン 3 採用情報の投稿 4 採用情報の入力方法 5 トップページの項目の編集 6-9 メディアライブラリ 10-11 管理画面へログイン このサイト全体は CMS(WordPress) によって管理しております そのため 主なコンテンツ更新は WordPress 管理画面より更新が可能なものとなっております まずはその管理画面へログインします
[ ]スマートセミナーバージョンアップリリースノート
![[ ]スマートセミナーバージョンアップリリースノート](/thumbs/91/106760330.jpg "[ ]スマートセミナーバージョンアップリリースノート")
スマートセミナー 2.0 バージョンアップリリースノート 株式会社シャノン 2010/7/27 1 Copyright SHANON Co., Ltd. All Rights Reserved. 1. はじめに...3 本リリースノートについて... 3 追加 修正される機能とユーザーへの影響について... 3 2. 今回追加された新機能のご紹介...4 HTML エディタの機能改善... 4 アンケートのラジオボタン
PowerPoint2003基礎編
はじめに 1 PowerPoint の概要 2 1 PowerPoint とは 2 2 プレゼンテーションとは 2 3 PowerPoint でできること 3 4 プレゼンテーション作成の流れ 4 5 PowerPoint の起動 5 6 PowerPoint の画面 6 7 作業ウィンドウを閉じる 8 8 ツールバーを 2 行にしたい時は 9 第 1 章新しいプレゼンテーションを作ろう 1 レッスン
intra-mart Accel Collaboration — ファイルライブラリ ユーザ操作ガイド 第5版
Copyright 2012 NTT DATA INTRAMART CORPORATION 1 Top 目次 1. 改訂情報 2. ファイルライブラリについて 3. 基本編 3.1. ファイルをアップロードする 3.2. ファイル一覧を表示する 3.3. ファイルを検索してダウンロードする 3.4. ファイルを削除する 3.5. ファイルライブラリの表示を設定する 3.6. 通知の設定をする 2 改訂情報
<4D F736F F D E835A A C98AD682B782E98E77906A89FC92F994C52E646F63>
1. はじめに 1 1-1. ガイドラインを策定するにあたって 1 1-1-1. ウェブアクセシビリティとは 1 1-1-2. ウェブアクセシビリティが求められている背景 1 1-1-3. 高齢者 障害者の閲覧時の利用特性 2 1-1-4. 視覚障害者への対応 2 1-1-5. ウェブアクセシビリティの JIS 規格化 3 1-1-6. ガイドラインの重要性 3 1-2. ガイドラインの適用範囲 4
登録する - ヘルプ https://support.google.com/sites/bin/answer.py?hl=ja&answer=153098&topic=23216... 1/1 ページ 登録する を使用すると 独自のサイトを簡単に作成し 更新できます では 各種情報 ( 動画 スライドショー カレンダー プレゼンテーション 添付ファイル テキストなど ) を 1 つの場所に表示し それを小さなグループ
ホームページ制作 基礎編 (HTML5 CSS3 コーディング )
ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8
スライド 1
ホームページ作成 ~ ホームページ ビルダーを使って ~ 1. ホームページ ビルダーを開く 1デスクトップにあるホームページ ビルダーのアイコンをダブルクリックして起動する 1 1 2 3 4 1 メニューバー 2 かんたんナビバー 3 ツールバー 4 ナビメニュー 2 2 一度サイトを作成した後は サイトを開く リックすることによりサイトを開くことができます をク 3 学校ホームページを編集する際
目次 更新履歴... 1 画面設計書の目的... 3 必要な内容... 3 画面一覧... 4 必要な内容... 4 画面遷移... 5 画面レイアウト... 6 入力パラメータ... 7 必要な内容... 7 項目定義... 8 必要な内容... 8 部品の種類... 9 ( 参考 ) 部品指定と
画面設計書の作成 作成日 : 2015/06/30 作成者 : 西村 更新履歴 更新日 更新 作業者 2015/06/30 新規作成 ( 仮 ) 西村 2015/11/09 部品の種類 にカラーピッカーとグラフを追加 コンボボックスの HTML の説明の 西村 追加 2017/12/01 公開用の体裁調整 西村 1 目次 更新履歴... 1 画面設計書の目的... 3 必要な内容... 3 画面一覧...
. 起動 目次 P.. ログイン 画面 P.. メニュー 画面 P.. POS 開示 _ 指定店舗 アイテム別 期間合計 画面 ( レポート A) P. 5. POS 開示 _ 店舗別 指定アイテム 期間合計 画面 ( レポート B) ----
操作手順書 0 年 0 月 情報システム部 . 起動 目次 ------ P.. ログイン 画面 ------ P.. メニュー 画面 ------ P.. POS 開示 _ 指定店舗 アイテム別 期間合計 画面 ( レポート A) ------ P. 5. POS 開示 _ 店舗別 指定アイテム 期間合計 画面 ( レポート B) ------ P.0 6. POS 開示 _ 指定店舗 指定アイテム
改訂履歴 日付バージョン記載ページ改訂内容 V2.1 - 初版を発行しました V3.1 P5 ドキュメントラベルが新規追加された事を追記 P7 P8 新しくなったラベルのツリー表示説明を追記 新しくなったラベルの作成 削除操作を追記 P9 ラベルのグループ
改訂履歴 日付バージョン記載ページ改訂内容 2012-10-23 V2.1 - 初版を発行しました 2013-08-30 V3.1 P5 ドキュメントラベルが新規追加された事を追記 P7 P8 新しくなったラベルのツリー表示説明を追記 新しくなったラベルの作成 削除操作を追記 P9 ラベルのグループ別参照権限設定操作を追記 2015-06-16 V5.0 P27 クラスター入力値を帳票備考にコピーする説明を追記
コンテンツ作成基本編
コンテンツ作成マニュアル基本編 もくじ コンテンツとは 公開する物件検索サイト内の情報の一つ一つを指します 3~8 サイト作成の流れ 物件検索一覧ページ 物件検索を行うためのページを作成するための一覧の流れです 9~4 その他コンテンツについて 各々のページを作成するための コンテンツ管理画面の項目です 5~7 コンテンツとは 3 コンテンツとは コンテンツとは 公開する Web サイトのページ つ
目次 第 1 章はじめに 取扱いについて 記載内容について... 6 第 2 章基本操作 Excel Online を開く ファイル ( ブック ) を作成する ファイル ( ブック ) を開く..
Office 365 Excel Online - 利用マニュアル - 発行日 2015/11/01 1 目次 第 1 章はじめに... 5 1.1. 取扱いについて... 6 1.2. 記載内容について... 6 第 2 章基本操作... 7 2.1. Excel Online を開く... 8 2.2. ファイル ( ブック ) を作成する... 10 2.3. ファイル ( ブック ) を開く...
目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18 インポート時の制限事項...19 リ
[SP 改 ] フォームレイアウトデザイナー FOR SHAREPOINT 2013 ユーザーマニュアル 1.0 版 2014 年 04 月 11 日 株式会社アンク 目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18
■デザイン
Joruri CMS 2.0.0 基本マニュアル (2013.7.23) デザイン デザインでは 各ページ内に構成されるパーツである ピース と それをページ内に配置し構成する レイアウト を作成できます また スタイルシート でピース レイアウトの HTML を制御し装飾する CSS を設定できます ピースデザイン > ピース ピース をクリックすると 現在登録されているピースが ピース ID のアルファベッ
目次 P. ログイン P. TOPページ P3. 物件概要の更新 P4. ページの編集 P6. 項目の編集 全体概要 登録本告 先着本告 予告 の編集 P7. 項目の編集 フリーエリア の編集 P8. 編集エディターのご使用方法 P. 項目の編集 更新日 の編集 P3. 次回更新予定日アラートメール
E-MS 管理画面操作マニュアル Copyright C 07 E-STATE ONLINE Co.,Ltd.All Rights Reserved. 目次 P. ログイン P. TOPページ P3. 物件概要の更新 P4. ページの編集 P6. 項目の編集 全体概要 登録本告 先着本告 予告 の編集 P7. 項目の編集 フリーエリア の編集 P8. 編集エディターのご使用方法 P. 項目の編集 更新日
Microsoft Word - P doc
はじめに...1 PowerPoint の概要 2 1 PowerPoint とは 2 2 プレゼンテーションとは 2 3 PowerPoint でできること 3 4 プレゼンテーション作成の流れ 4 5 PowerPoint の起動 5 6 PowerPoint の画面 6 7 作業ウィンドウを閉じる 8 8 ツールバーを 2 行にしたい時は 9 第 1 章新しいプレゼンテーションを作ろう...1
Microsoft Word - macマニュアル【 】.doc
目次 1. ログイン... 1 2. ログアウト... 3 3. デスクトップ ( 例 :Word Excel 起動中 )... 4 4. Dock( 例 :Word Excel 起動中 )... 5 5. Finder ウィンドウ... 9 6. メニューバー ( 例 :Word 起動中 )... 10 7. 文字の入力 ( 例 :Word で入力 )... 11 8. データの保存 ( 例 :Word
_責）Wordトレ1_斉木
. Word の起動 第章. Word の基礎知識 Word の起動 Word の起動は次のように行います 他のアプリケーションソフトのように いくつかの 起動方法があります スタートメニューからの起動 スタートメニューから起動する方法は次の通りです [ スタート ] メニューの [ すべてのプログラム ] から [Microsoft-Office] の [Microsoft-Word] を選択します
ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア 現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2 種類がある 2. テキストエディタ : テキストファイルと呼ばれる 文
ホームページ作成 1. HTML 言語によるホームページ作 成 2. ホームページ作成ソフト IBM : ホー ムページビルダー Microsoft FrontPage 1 ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア 現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2
3. 文字の入力 文字 ボタンをクリックします 文字入力したい範囲をドラックし 文字枠を作成します 文字を入力します この作業を繰り返します マウスポインタの形 4. 文字枠のサイズ変更 拡大 ボタンをクリックします 大きさを変えたい文字枠をクリックします マウスポインタを文字枠の右下のハンドル (
1. あてうち名人を起動します 2. 原稿の読み込みスキャナに原稿をセットします スキャナ ボタンをクリックします スキャナ実行 ダイアログボックスが表示されます 解像度 (XDPI,YDPI) を必要にあわせ修正します 読取モードを必要にあわせ変更します 原稿サイズ 用紙サイズを確認します 開始 ボタンをクリックします 解像度についてあてうちが目的であれば 100 程度にしてください 原稿をコピーしたい場合はプリンタに合わせ300
Web メール画面の表示 Web メール画面の表示 Web メール画面の表示方法について説明します Web メール画面を表示する 1 利用者メニューを表示し メール確認 または Web メール をクリックします 利用者メニューの表示方法 利用者メニューにログインする (P.24) 2 Web メール
この章では Web メールの機能や使用方法について説明しています Web メール画面の表示 152 メールの作成 / 送信 157 メールの受信 162 メールの返信 / 転送 164 メールの削除 165 メールの移動 167 個人設定 168 アドレス帳 177 Web メール画面の表示 Web メール画面の表示 Web メール画面の表示方法について説明します Web メール画面を表示する 1
JavaScript プログラミング 4.Web ブラウザのオブジェクト 4-4 window オブジェクト 4-5 location オブジェクトと history オブジェクト 4-6 link オブジェクト 08T4082A 野太樹
JavaScript プログラミング 4.Web ブラウザのオブジェクト 4-4 window オブジェクト 4-5 location オブジェクトと history オブジェクト 4-6 link オブジェクト 08T4082A 野太樹 4-4 window オブジェクト window オブジェクト Webブラウザのウィンドウを管理するオブジェクト Webブラウザで開いた段階で 動的に 成 新規のwindowオブジェクトを作成することができる
コンテンツ作成基本編
コンテンツ作成マニュアル基本編 もくじ コンテンツとは 公開する求人検索サイト内の情報の一つ一つを指します 3~7 サイト作成の流れ 求人検索一覧ページ 求人検索を行うためのページを作成するための一覧の流れです 8~8 その他コンテンツについて 各々のページを作成するための コンテンツ管理画面の項目です 9~0 コンテンツとは 3 コンテンツとは コンテンツとは 公開するWebサイトのページつつを指します
更新履歴 変更履歴 版数 リリース日 更新内容 第 1 版 2017/5/15 第 1 版発行 第 2 版 2017/7/13 更新履歴 変更内容を追加 (2ページ) 編集の前に を追加(8 ページ ) ブロックエディタ スマートモード エディタモード の説明を追加 (10~12 ページ ) ブロッ
使い方ガイド 第 4 版 ログインする~サイト編集画面を開く... 3 テンプレートを選ぶ ~ 編集モードを選択する... 4 編集画面の見かた... 6 編集の前に... 8 テキストを変える... 9 ブロックの編集画面 ( スマートモード )... 10 ブロックの編集画面 ( エディタモード )... 11 スマートモードからエディタモードへ変更... 12 ブロックの複製 移動 削除など...
1-2. 文字の編集について (1) 文字入力する ページ編集フィールド 上では キーボードからの文字入力 または コピーした文章の貼り付け操作に より 文章を入力します 以降 文字入力に関する操作について説明します ページ編集フィールド (1) 改行の扱いについて [Enter キー ] を押下し
![1-2. 文字の編集について (1) 文字入力する ページ編集フィールド 上では キーボードからの文字入力 または コピーした文章の貼り付け操作に より 文章を入力します 以降 文字入力に関する操作について説明します ページ編集フィールド (1) 改行の扱いについて [Enter キー ] を押下し](/thumbs/92/107746303.jpg "1-2. 文字の編集について (1) 文字入力する ページ編集フィールド 上では キーボードからの文字入力 または コピーした文章の貼り付け操作に より 文章を入力します 以降 文字入力に関する操作について説明します ページ編集フィールド (1) 改行の扱いについて [Enter キー ] を押下し")
1. テキストエディタ入力 1-1. テキストエディタ の概要 テキストエディタ は 入力した文字に対する フォントや色変更などの文字装飾機能 および ハイパーリ ンクの設定機能を持ったエディタです 本資料では テキストエディタの詳細機能について説明します テキストエディタ画面構成 1 2 1 操作メニューボタン : テキストの表示スタイル設定等を行うメニューです 2 ページ編集フィールド : キーボードからの文字入力
変更履歴 版数変更日変更内容 /11/1 初版設定 /9/1 名称変更
アプリ作成チュートリアル ~ 作ってみよう名刺管理アプリ ~ 第 1.0 版平成 28 年 11 月 1 日制定 株式会社中電シーティーアイ 変更履歴 版数変更日変更内容 1.0 2016/11/1 初版設定 1.1 2018/9/1 名称変更 目次 1 はじめに... 1 1.1 本書の位置付... 1 1.2 名刺管理アプリ... 1 2 ログイン... 3 3 データベースの設定... 4 3.1
Create!Form V11 - 機能リファレンス - テスト実行
1. 概要...2 2. 実行方法...3 ツールボタンからの実行...3 メニューからの実行...3 2-1....4 2-2. 再実行...5 2-3. 簡易印刷...5 2-4. 簡易 PDF プレビュー...6 2-5. 簡易 HTML プレビュー...6 2-6. 簡易 Excel プレビュー...6 3. 実行ダイアログ...7 1 1. 概要 Create!Form は 帳票ジョブの作成
Microsoft PowerPoint - ＣＳＳ（Cascading Style Sheets）の基本.pptx
CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSでは セレクタ プロパティ 値 の3つを組み合わせてスタイルを設定する 3. セレクタ は ,, や 要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の
AQUOSケータイ3 オンラインマニュアル
ブラウザ画面の操作のしかた ブラウザ画面の見かた 前の画面を表示する ( 戻る ) 最初に表示した ( 戻る ) を押すとブラウザ を終了できま 元の画面に戻るときは ( メニュー ) 進むと操作しま ブックマーク一覧を利用する ( メニュー ) ブックマーク一覧 詳しくは ブックマークからアクセスする を参照してくだ さい URL 表示情報を表示タブ数表示開いているタブの数が表示されま 閲覧履歴を利用する
データの作成方法のイメージ ( キーワードで結合の場合 ) 地図太郎 キーワードの値は文字列です キーワードの値は重複しないようにします 同じ値にする Excel データ (CSV) 注意キーワードの値は文字列です キーワードの値は重複しないようにします 1 ツールバーの 編集レイヤの選択 から 編
手順 4 Excel データを活用する ( リスト / グラフ 色分け ) 外部の表データ (CSV 形式 ) を読み込み リスト表示やカード表示 その値によって簡単なグラフ ( 円 正方形 棒の 3 種類 ) や色分け表示することができます この機能を使って地図太郎の属性情報に無い項目も Excel で作成し CSV 形式で保存することにより 自由に作成することができます (Excel でデータを保存するとき
AppsWF ワークフロー設定ガイド Ver.1.1 株式会社オプロ
AppsWF ワークフロー設定ガイド Ver.1.1 株式会社オプロ 改訂履歴 Ver. 改訂日改訂内容 1.0 2019/08/22 新規発行 1.1 2019/10/04 1.3 ワークフロー設定画面を開くには に 1.3.2 Salesforce 版の操作手順 を 追加しました 本書に記載されている会社名 製品名 サービス名などは 提供各社の商標 登録商標 商品名です なお 本文中に TM マーク
HP Primeバーチャル電卓
HP Prime バーチャル電卓 Windows は 米国 Microsoft Corporation およびその関連会社の米国およびその他の国における商標または登録商標です 本書の内容は 将来予告なしに変更されることがあります HP 製品およびサービスに関する保証は 当該製品およびサービスに付属の保証規定に明示的に記載されているものに限られます 本書のいかなる内容も 当該保証に新たに保証を追加するものではありません
Microsoft Word MT操作マニュアル（ユーザ編）.doc
Movable Type で管理する ホームページ操作マニュアル ( ユーザ編 ) 2009 年 1 月 5 日版 < ホームページ設定の前提環境 > CMS ツール Movable Type 4.21~4.23 オープンソース版 目次 第 1 章操作の全体的な流れ 5 1-1. 操作の全体的な流れ 6 1-2. ログイン 7 1-3. ログアウト 8 第 2 章カテゴリ ( メニュー ) の編集
1. 管理画面へのログイン方法 (1 ) エコボル サイトの TOP ページから登録店専用ページへユーザー名 パスワードを入力してログインボタンをクリックします 図 1) エコボル サイトの TOP 画面 図 2) システムログイン画 登録店さまには事前にユーザー名パスワードを記載したメールを送付し
エコボル登録店様情報更新マニュアル 目次 1. 管理画面へのログイン方法 2. ダッシュボードの各機能について 3. 記事を作成する1 4. 記事を作成する2 5. 記事を作成する3 6. 画像を配置する1 7. 画像を配置する2 8. 画像を削除する 9. 登録した記事を編集する1 10. 登録した記事を編集する2 11. 登録した記事を編集する3 12. 記事を公開しない 13. 投稿した記事の表示順位を変える
intra-mart Accel Collaboration — ファイルライブラリ 管理者操作ガイド 第6版
Copyright 2012 NTT DATA INTRAMART CORPORATION 1 Top 目次 1. 改訂情報 2. ファイルライブラリについて 3. 基本編 3.1. フォルダとアクセス権を設定する 3.2. ファイルを検索する 3.3. 共有タグを設定する 3.4. ファイル一覧ポートレットを設定する 3.5. メールテンプレートを設定する 2 改訂情報 変更年月日 変更内容 2012-11-01
子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top
1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます
3 アドレスバーに URL を入力し ( 移動ボタン ) をタップします 入力した URL のホームページに移動します ネットワークへのログオン 画面が表示された場合は ユーザー名 を確 認し パスワード を入力して OK をタップしてください ホームページがうまく表示されないときは Opera B
ホームページを見る (Opera Browser) Opera Browser を使って ホームページの閲覧ができます アクセスリストに登録したホームページ (+3-3 ページ ) を順番に閲覧することができます くわしくは ネットウォーカー ( お気に入りめぐりをする ) (+3-7 ページ ) をご覧ください Opera Browser は パソコンなどで広く使われている Web ブラウザによる
スライド 1
ホームページ講習 CMS: 管理 1. ログインと管理画面へ切り替え 2. ホームページのバックアップを取るには? 3. 祝日設定について 4. 行事カレンダーについて 5. 自分のパスワードを変更するには? 6. 活動記録 欄の作りを理解しよう 7. 新規のページを追加するには? 8. 日誌を別ページに移動させるには? 9. 新規の日誌を作成するには? 10. 新規の活動報告枠を配置するには? 11.(
UMLプロファイル 機能ガイド
UML Profile guide by SparxSystems Japan Enterprise Architect 日本語版 UML プロファイル機能ガイド (2016/10/07 最終更新 ) 1. はじめに UML では ステレオタイプを利用することで既存の要素に意味を追加し 拡張して利用することができます このステレオタイプは個々の要素に対して個別に指定することもできますが ステレオタイプの意味と適用する
SISJIN
SISJIN 目次 ログイン... 4 ログイン... 4 メニュー表示 / ログアウト... 5 メニュー表示... 6 お知らせ確認... 7 お知らせ... 7 操作者へのお知らせ... 7 お知らせ削除... 8 ログアウト... 9 社員情報表示... 10 社員情報表示... 11 パスワード変更... 12 習得スキル登録... 14 習得スキル登録... 15 習得スキル補足説明登録...
目次 第 1 章はじめに 取扱いについて 記載内容について... 6 第 2 章基本操作 OneNote Online を開く ノートブックを開く ノート ( セクション ) を作成する... 11
Office 365 OneNote Online - 利用マニュアル - 発行日 2015/09/01 1 目次 第 1 章はじめに... 5 1.1. 取扱いについて... 6 1.2. 記載内容について... 6 第 2 章基本操作... 7 2.1. OneNote Online を開く... 8 2.2. ノートブックを開く... 10 2.3. ノート ( セクション ) を作成する...
PowerPoint プレゼンテーション
Seijo.Tokyo のコンテンツ作成 管理方法基本編 大江将史 初版 2017.7.3 2 版 2017.7.10 seijo.tokyo 1 コンテンツ作成 管理のイメージ コンテンツとは サイト上で作成する文章やイメージ リンクなどで構成されるもの 複数のコンテンツを組み合わせて seijo.tokyo という WEB サイト が作られている コンテンツは サイト上で ログイン をしなければ
intra-mart WebPlatform/AppFramework
intra-mart WebPlatform/AppFramework Ver.7.2 ポータル設定ガイド 2010/05/31 第 2 版 > 変更年月日変更内容 2010/04/01 初版 2010/05/31 第 2 版 3.2 PortalCommonConfig.properties のインターネットポートレットの高さ指定に関する説明を修正しました 3.2 PortalCommonConfig.properties
intra-mart Accel Platform — ViewCreator ユーザ操作ガイド 第6版
Copyright 2012 NTT DATA INTRAMART CORPORATION 1 Top 目次 intra-mart Accel Platform ViewCreator ユーザ操作ガイド第 6 版 2016-04-01 改訂情報 ViewCreator について基本的な設定データ参照一覧リスト集計クロス集計とグラフ集計データ参照へのショートカットスマートフォンからの参照 2 改訂情報
1.WebClass( ウェブクラス ) とは WebClass を利用される前に 学生の立場で WebClass を利用してみましょう... 4 開始方法... 4 資料を閲覧する 先生の立場で WebClass を利用してみましょう... 8 資料を
WebClass 体験コースマニュアル 資料機能編 ( 先生用 ) 2018 年 作成者 : 日本データパシフィック株式会社 1.WebClass( ウェブクラス ) とは... 3 2.WebClass を利用される前に... 3 3. 学生の立場で WebClass を利用してみましょう... 4 開始方法... 4 資料を閲覧する... 6 4. 先生の立場で WebClass を利用してみましょう...
2 / 16 HTML=HyperText Markup Language( ハイパーテキストマークアップランゲージ ) ブラウザ (Chrome) での表示 ソースの表示 ( メモ帳 /TeraPad) HTML <========= =========>
1 / 16 第 11 回セミナー / 全 12 (2014/8/28) HP の基本的構造の理解とページ構成の工夫 これだけはマスターしておきたい HTML 厳選タグ迷子を生まないためのリンクの配置 ( 読ませる工夫 ) Web 作成の基本ツール Web ブラウザ Chrome FireFox Opera (Internet Explorer) Chrome Firefox Opera https://www.google.com/intl/ja/chrome/browser/features.html
PowerPoint プレゼンテーション
環境設定 (IE11 Edge)(Edge は 国内 + 国外版 国内外 + 翻訳版 のみ ) SRPARTNER では印刷 ダウンロードなどに ActiveX アドオンを使用しており ログイン時にインストールメッセージが表示されます ご使用端末に初期設定いただく必要がございます 以下記載の設定を実施し 設定変更を行ってください 1. 保護モードの解除 1[ コントロールパネル ]-[ インタ -
CodeGear Developer Camp
T4 PHP チュートリアルセッション はじめての Delphi for PHP CodeGear エヴァンジェリスト高橋智宏 1 アジェンダ ハンズオントレーニングに必要なもの Delphi for PHP V2.0 の環境設定 VCL for PHP の基本的な動作を確認 フォトギャラリの製作 マスターページ 画像アップロード カスタムコンポーネントの導入 など 2 ハンズオントレーニングに必要なもの
Microsoft Word - 操作マニュアル（PowerPoint2013）
PowerPoint2013 基本操作 P.1 PowerPoint2013 基本操作 1.PowerPoint2013 の起動... 2 2. スライドのサンプル... 3 3. スライドの作成... 4 4. 文字の入力とテキストボックス... 5 5. 図の作成と書式設定... 5 6. グラフの作成... 6 7. 背景デザインと配色... 7 8. アニメーション効果... 8 9. スライドショーの実行...
intra-mart Accel Platform — IM-Repository拡張プログラミングガイド 初版
Copyright 2018 NTT DATA INTRAMART CORPORATION 1 Top 目次 1. 改訂情報 2. はじめに 2.1. 本書の目的 2.2. 対象読者 2.3. サンプルコードについて 2.4. 本書の構成 3. 辞書項目 API 3.1. 最新バージョン 3.1.1. 最新バージョンの辞書を取得する 3.2. 辞書項目 3.2.1. 辞書項目を取得する 3.2.2.
ホームページ 成功事例説明会
かんたんビジネスブログ 体験版操作ガイド 株式会社 LIXIL 住生活ソリューション 2011.07 改訂 目次 1. ブログ画面の基本構成 2. 更新画面の基本構成 3. ページと記事 4. 新しい記事の作成 文章の入力 画像の貼り付け 5. 記事の編集 削除 6. 文字の装飾 7. リンク設定 8. ページの作成 9. メニューの作成 < 参考 > 部品とレイアウト 3 4 5 6 9 12 13
教材ドットコムオリジナル教材
問題 次の画面写真を参考にソースを組みなさい 画像素材は次のサイトにある http://www.kyouzai.com/kenshu/index.htm トップ 大学 専門学校授業 10 月 31 日画像素材 ファイル名 :index.htm( フレーム定義ファイル ) menu.htm( 左フレーム表示 メニューページ ) top.htm( 右フレーム表示 似顔絵イラスト表示ページ ) touroku.htm(
1. ログイン 1-1 管理画面へのログイン 施設の作成 編集 削除や承認 公開には その操作権限を持つアカウントでログイン します アカウントについての詳細は 管理者にお問い合わせください (1) [ ユーザー ID またはメールアドレス ] と [ パスワード ] を入力後 [ ログイン ] を
![1. ログイン 1-1 管理画面へのログイン 施設の作成 編集 削除や承認 公開には その操作権限を持つアカウントでログイン します アカウントについての詳細は 管理者にお問い合わせください (1) [ ユーザー ID またはメールアドレス ] と [ パスワード ] を入力後 [ ログイン ] を](/thumbs/91/105035074.jpg "1. ログイン 1-1 管理画面へのログイン 施設の作成 編集 削除や承認 公開には その操作権限を持つアカウントでログイン します アカウントについての詳細は 管理者にお問い合わせください (1) [ ユーザー ID またはメールアドレス ] と [ パスワード ] を入力後 [ ログイン ] を")
管理画面操作マニュアル 施設 目次 1. ログイン... 2 1-1 管理画面へのログイン... 2 2. 施設... 2 2-1 施設一覧... 3 2-2 施設の新規作成... 4 2-3 施設の編集... 9 2-4 施設の削除...10 2-5 ダウンロード... 11 2-6 インポート...12 3. 写真 地図...13 3-1 施設写真の登録...13 3-2 施設地図の登録...16
PowerPoint プレゼンテーション
かんたんマニュアル 基本操作編 目次 STEP:1 STEP:2 STEP:3 STEP:4 STEP:5 STEP:6 STEP:7 STEP:8 STEP:9 画面の確認をしよう用紙を選択しようテンプレートを使ってみよう文字を入力しよう文字の大きさを変えるにはイメージを貼り付けようコピー 保存しよう印刷しよう作ったデータを ほかの用紙に移すには P.2 P.4 P.5 P.7 P.9 P.11
Format text with styles
Word 入門 Word はワープロおよびレイアウトのための効果的なアプリケーションです 最も効果的に使用するには 最初にその基礎を理解する必要があります このチュートリアルでは すべての文書で使用する作業と機能をいくつか紹介します 開始する前に... 1 1. 新しい空白の文書を作成する... 2 2. Word のユーザーインターフェイスについて... 4 3. 文書内を移動する... 5 4.
200_CAD（画面回りの機能）の基本操作
CAD( 画面回りの機能 ) の 基本操作 CAD の画面回りの機能を解説しています 解説内容がオプションプログラムの説明である場合があります ご了承ください 画面の構成 [CAD] の画面構成を確認しましょう メッセージバー 次の操作をナビゲートするメッセージが表示されます 左のバーは 現在のメモリー使用量を表示しています ( 安全に作業する為の目安としてください ) メニューバー すべてのコマンドが配置されています
Microsoft Word - 3章ｺﾝﾃﾝﾂ管理.doc
第 3 章コンテンツ管理 3-1. 新着情報管理 新着情報の 登録 変更 削除を行います 新着情報を登録すると トップページ中央に表示されます ( レイアウトが初期設定の場合 ) 新着情報表示エリア 3-1-1. 新しく新着情報を掲載する 1 上部メニューにあるコンテンツ管理 > 新着情報管理ボタンを押します 2 新規登録 の各入力項目に 掲載内容を入力し この内容で登録するボタンを押します この内容で登録して宜しいですか?
Microsoft Word - 操作マニュアル（PowerPoint2010）.doc
PowerPoint2010 基本操作 P.1 PowerPoint2010 基本操作 1.PowerPoint の起動... 2 2. スライドのサンプル... 3 3. スライドの作成... 4 4. 文字の入力とテキストボックス... 5 5. 図の作成と書式設定... 5 6. グラフの作成... 5 7. 背景デザインと配色... 7 8. アニメーション効果... 8 9. スライドショーの実行...
共済会_Kねっと利用マニュアル（2018）.indd
~ K ねっとシステム利用マニュアル ~ ご注意 この冊子にはインターネット上で職員会員に関するデータを取り扱うための設定や操作方法等が記載されています 別紙 WEB 方式利用通知 とあわせて厳重に管理及び保管をしてください 2018.9 改訂 目次 Ⅰ.K ねっと概要 1 Ⅱ.K ねっとへの接続方法 ( ログイン ) 1 Ⅲ. 操作方法 1. ファイルのダウンロード ( 俸給等報告データの 取得
問題 1 次の文章は Access データベース およびデータベースの概要について述べたものである にあてはまる適切なものを解答群 { } より選び その記号で答えよ 設問 1. Microsoft Access 2007 データベースのテーブルでは 表す としてデータを { ア. レコードを列 フ
Microsoft Access ビジネスデータベース技能認定試験 3 級 2007 サンプル問題 知識試験 制限時間 30 分 受験会場 受験番号 氏 名 問題 1 次の文章は Access データベース およびデータベースの概要について述べたものである にあてはまる適切なものを解答群 { } より選び その記号で答えよ 設問 1. Microsoft Access 2007 データベースのテーブルでは
PowerPoint プレゼンテーション
アカウントをお持ちの方 Webシラバス作成の手引目次.Web シラバスへのアクセス方法 - インターネットの起動 - Webシラバスへのログイン. シラバスを作成する科目の表示 - シラバス作成 登録メニューの選択 - 担当科目一覧画面. シラバスの作成 - 前年度シラバス一括コピー - 科目ごとシラバスコピー 5 - シラバスの入力と登録 6,7 - シラバスの印刷 ( 提出用 ) 8. シラバス閲覧
1. 信頼済みサイトの設定 (1/3) この設定をしないとレイアウト ( 公報 ) ダウンロードなどの一部の機能が使えませんので 必ず設定してください 1 Internet Explorer を起動し [ ツール ]-[ インターネットオプション (O)] を選択します 2 [ セキュリティ ] の
![1. 信頼済みサイトの設定 (1/3) この設定をしないとレイアウト ( 公報 ) ダウンロードなどの一部の機能が使えませんので 必ず設定してください 1 Internet Explorer を起動し [ ツール ]-[ インターネットオプション (O)] を選択します 2 [ セキュリティ ] の](/thumbs/92/108723292.jpg "1. 信頼済みサイトの設定 (1/3) この設定をしないとレイアウト ( 公報 ) ダウンロードなどの一部の機能が使えませんので 必ず設定してください 1 Internet Explorer を起動し [ ツール ]-[ インターネットオプション (O)] を選択します 2 [ セキュリティ ] の")
Internet Explorer の初期設定 信頼済みサイト の設定や ポップアップブロック の設定を確認する必要があります 以下の手順で設定してください 1. 信頼済みサイトの設定 2. タブブラウズの設定 3. セキュリティ設定の変更 4. ポップアップブロックの設定 5. 推奨する文字サイズの設定 6. 規定のブラウザに設定 7. 互換表示の無効の設定 8. ランキングやハイライトの印刷設定
<4D F736F F D BB388F58CFC82AF817A F B838B91808DEC8EE88F878F915F C52E646F63>
大阪産業大学様 シラバス ツール操作マニュアル 第 2 版 2011 年 XX 月 XX 日 H23.12.5 株式会社日立製作所 改訂履歴 Ver 改訂年月日 章 改訂内容 第 1 版第 2 班 H23.12.5 1 目次 1. 教員シラバス情報登録...3 1.1. オフィスアワー情報保守...3 1.2. 非常勤委嘱調査情報保守...6 1.3. シラバス情報保守...9 1.4. シラバスの統合...
intra-mart Accel Platform — IM-FileExchange 管理者操作ガイド 第3版
Copyright 2013 NTT DATA INTRAMART CORPORATION 1 Top 目次 改訂情報 IM-FileExchange について基本的な設定 IM-FileExchange の動作設定 IM-FileExchange の権限設定ジョブスケジューラの設定基本的な操作ファイルの公開を停止するファイルの設定を変更するファイルを削除する 2 改訂情報 変更年月日 変更内容 2013-04-01
目次 1. ログイン ログアウト デスクトップ ( 例 :Word Excel 起動中 ) Dock( 例 :Word Excel 起動中 ) Finder ウィンドウ メニューバー ( 例 :Word 起動中 )...
2017 年 9 月 19 日 目次 1. ログイン... 1 2. ログアウト... 3 3. デスクトップ ( 例 :Word Excel 起動中 )... 4 4. Dock( 例 :Word Excel 起動中 )... 5 5. Finder ウィンドウ... 9 6. メニューバー ( 例 :Word 起動中 )... 10 7. 文字の入力 ( 例 :Word で入力 )... 11
PowerPoint プレゼンテーション
3 概要 4 は お店からのお知らせなど 短い文章の記事に向いています 画像 枚 本文 00 文字 500 文字程度の記事が適切です のポイント 記事作成の流れ ブログ記事タイトル 使い分け 短い文章に最適 ブログ記事タイトル記入 営業時間の変更やおやすみのお知らせなど 本文を書く 写真 使用する機能 画像挿入文字色の変更リンク追加 機能 アイキャッチ画像文字色変更リンク追加 3 投稿する 本文 自由な画像追加
第21章 表計算
第 3 部 第 3 章 Web サイトの作成 3.3.1 WEB ページ作成ソフト Dreamweaver の基本操作 Web ページは HTML CSS という言語で作成されており これらは一般的なテキストエディタで作成できるのが特徴ですが その入 力 編集は時に煩雑なものです そこで それらの入力 編集作業など Web ページの作成を補助するソフトウェアである Dreamweaver の使い方について解説していきます
次のように編集を行う 1. 改行を挿入するには <br> タグ 例 ) 世界の都市めぐり <br> ~~~あれこれをご紹介します <br> ~~~ 名所めぐり <br> ~~~ヨーロッパの町並み <br> 2. 段落を区切るには <p> ~ </p> タグ 例 )<p> 世界の都市めぐり </p>
第 1 回目のタグ 1. Web ページ ( ホームページ ) の作成メモ帳 ( テキストエディタ ): ウィンドウズに付属しているソフトテキストエディタ メモ帳 を開くには : スタートボタンをクリック プログラムポイント アクセサリ メモ帳を選ぶ ブラウザ (Web ページの閲覧ソフト Internet Explorer): ウィンドウズに付属しているソフトが必要とする homepage.html
Design with themes — Part 1: The Basics
PowerPoint 入門 PowerPoint はプレゼンテーションのための効果的なアプリケーションです 最も効果的に使用するためには 最初にその基礎を理解する必要があります このチュートリアルでは すべてのプレゼンテーションで使用する作業と機能をいくつか紹介します 開始する前に... 1 1. 新しい空白のプレゼンテーションを作成する... 2 2. PowerPoint ユーザーインターフェイスについて...
地域ポータルサイト「こむねっと ひろしま」
5.1. エディタとは? NetCommons の全モジュールで共通する編集画面です 5.2. 通常のエディタの使い方 (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17)(18) (19) (20) (21) (22) (23) (24) (1) 書式設定左から フォント サイズ スタイル を設定するためのプルダウンメニューです
intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第3版
1 Top 目次 intra-mart Accel Platform 標準テーマカスタマイズ操作ガイド第 3 版 2014-12-01 2 改訂情報 intra-mart Accel Platform 標準テーマカスタマイズ操作ガイド第 3 版 2014-12-01 変更年月日 変更内容 2013-10-01 初版 2014-01-01 第 2 版下記を変更しました はじめに の UIデザインガイドライン
PowerPoint プレゼンテーション
HPOP( HP オプション ) リンク作成方法 目次 1.HPOPの構造 2. 職種リンク 3. 職種カテゴリリンク 4. 業種リンク 5. 勤務地リンク 6. 選択肢リンク 7. 特定のJOBへのリンク 8. 特定の企業へのリンク 9. キーワードリンク 1 単独キーワード 2 複数キーワード 2 1.HPOP の構造 JOB 自動公開機能は以下の 3 画面 (2 階層 ) もしくは 2 画面
Windows8.1基礎 ファイル管理
OA ベーシック Windows8.1 基礎ファイル管理 1 / 8 Windows8.1 基礎ファイル管理 ファイル管理前編 ファイルとフォルダーの概要 ファイル Excel や Word などのアプリで作成したデータを ファイル といいます ファイルは 作成元のアプリの種類により Word では 文書 Excel では ブック PowerPoint では プレゼンテーション と呼ばれています ファイルの種類はアイコンのデザインで確認できます
FileExplorer for ASP.NET Web Forms
FileExplorer for ASP.NET Web Forms 2018.04.12 更新 グレープシティ株式会社 目次 製品の概要 2 ComponentOne for ASP.NET Web Formsのヘルプ 2 ビジュアル要素 3 クイックスタート : フォルダパスの追加 4-5 エクスプローラーの機能 6 複数ファイルの選択 6-7 フォルダの作成と管理 7 ファイル操作の無効化 7