スタイルシート仕様書



Similar documents
スタイルシート仕様書

スタイルシート仕様書

intra-mart WebPlatform/AppFramework

POWER EGG V2.01　ユーザーズマニュアル　ファイル管理編

1.2. ご 利 用 環 境 推 奨 ブラウザ Internet Explorer Google Chrome(バージョン 32 時 点 で 動 作 確 認 済 み) Mozilla Firefox(バージョン 26 時 点 で 動 作 確 認 済 み) Safari 7

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

名刺作成講習

<4D F736F F D2090C389AA8CA72D92F18F6F2D D F ED28CFC82AF91808DEC837D836A B E838B A815B816A2E646F6378>

1

治 験 実 施 管 理 システム NMGCP 向 け Excel 形 式 プロトコール 作 成 手 順 書 V4.0.3 対 応 版 第 1 版 株 式 会 社 富 士 通 アドバンストエンジニアリング All Rights Reserved,Copyright 株 式 会 社 富 士 通 アドバン

KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2

<4D F736F F D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A B E A2E646F63>

地域ポータルサイト「こむねっと ひろしま」

研究者情報データベース

以 下 に 手 順 の 流 れを 記 載 します 3ページ 以 降 で 各 項 目 の 手 順 を 説 明 します ( をクリックすると 該 当 ページにジャンプします ) また 4ページに 汎 用 データ 受 入 に 関 するよくあるお 問 い 合 わせをご 紹 介 しています Step (3ペー

購買ポータルサイトyOASIS簡易説明書 b

01_07_01 データのインポート_エクスポート_1

Microsoft Word - TCⅡﾏﾆｭｱﾙ_第6章_ doc

Microsoft Word - word_05.docx

(Microsoft PowerPoint -

- INDEX - 1 ご 利 用 時 間 1 2 メニュー 1 3 ご 利 用 になる 前 に 行 っていただきたいこと 3 (1) 所 在 地 沿 線 設 定 3 (2) 会 員 情 報 の 管 理 ( 自 社 情 報 の 設 定 ) 5 4 物 件 情 報 の 登 録 8 (1) 操 作 概

SchITコモンズ【活用編】

PowerPoint プレゼンテーション

Microsoft Word - Active.doc

PowerPoint プレゼンテーション

Microsoft Word - class_specification_guide_v60.doc

IM-Annotation for Accel Platform — 操作ガイド   第3版  

<4D F736F F D B68F918DEC90AC89898F4B899E977095D2816A2E646F63>

HTG-35U ブルーバック表示の手順書 (2014年12月改定)

<4D F736F F D C97F195CF8AB DEC90E096BE8F912091E6312E313294C52E646F63>

SILAND.JP テンプレート集

< F2D89C692EB834E CC837A815B B83578DEC>

スライド 1

「美家ＣＡＤ《操作マニュアル：ＣＡＤ機能編

Microsoft PowerPoint _リビジョンアップ案内_最終.pptx

返還同意書作成支援　操作説明書

目 次 1. Web メールのご 利 用 について Web メール 画 面 のフロー 図 Web メールへのアクセス ログイン 画 面 ログイン 後 (メール 一 覧 画 面 ) 画 面 共 通 項 目

目 次 機 能 運 用 上 の 注 意 処 理 手 順 画 面 説 明 ログイン 直 送 先 選 択

5-2 一 般 ユーザー 用 :メール 2 送 信 者 のリンクをクリックすると 受 信 メールの 内 容 を 見 ることができます 受 信 メール 内 容 画 面 項 目 送 信 者 宛 先 CC 本 文 (テキスト) 本 文 (HTML) メールアドレスのリンクをクリックするとアドレス 帳 へ

Word2013による文書の作成（1級）.indd

目 次. WEB メールへのログイン.... メール 送 信 手 順.... メール 受 信 手 順 アドレス 帳 の 操 作 手 順 フォルダーの 操 作 手 順 メール 発 信 者 登 録 署 名 登 録 手 順 基 本 的 な 設 定

目 次 1. はじめに Cform をサーバーにアップロードする カレンダー 予 約 システムを 表 示 する... 6 直 接 表 示 の 場 合... 6 Javascript での 埋 め 込 み 表 示... 7 Iframe での 埋 め 込 み 表 示..

Microsoft PowerPoint - webサイト更新マニュアル ppt [互換モード]

Microsoft Word - 操作手順書.doc

(Microsoft PowerPoint - Ver12\203o\201[\203W\203\207\203\223\203A\203b\203v\216\221\227\277.ppt)

オートビズにPayPalを対応させる方法

Transcription:

スタイルシート 仕 様 書 Version 6.1 初 版 2007 年 7 月 31 日

変 更 年 月 日 2007/7/31 初 版 << 変 更 履 歴 >> 変 更 内 容

目 次 << 目 次 >> 1 はじめに...1 1.1 概 要...1 1.2 JavaEE 開 発 モデルのprefix 属 性...1 1.3 デザインスタイルシートタグの 設 定...1 2 カラーパターン...2 2.1 標 準 カラーパターン...2 2.2 カラーコントラスト...2 3 スタイルシート...3 3.1 スタイルシートの 注 意 点...3 3.2 用 語...3 3.3 スタイルシートファイル...3 4 クラスリファレンス...4 4.1 <TABLE>に 指 定 するクラス...4 4.1.1 table_border_bg...5 4.1.2 list_border_bg...7 4.1.3 table_border_line...9 4.1.4 edit...10 4.1.5 button...12 4.1.6 portal_tab...13 4.1.7 portal_tab_button_all...16 4.1.8 portal_tab_button...19 4.1.9 portal_outer...22 4.1.10 portlet_list_border_bg...24 4.2 <TD>に 指 定 するクラス...26 4.2.1 bottom...27 4.2.2 button_padding...28 4.2.3 button_bg...29 4.2.4 list_title_bg...30 4.2.5 list_title_bg_center...32 4.2.6 list_title_bg_left...34 4.2.7 list_title_bg_right...36 4.2.8 list_title_sort_bg...38 4.2.9 list_title_sort_bg_center...40 4.2.10 list_title_sort_bg_left...42 4.2.11 list_title_sort_bg_right...44 4.2.12 list_data_bg...46 4.2.13 list_data_bg_left...48 4.2.14 list_data_bg_right...50 4.2.15 output...52 4.2.16 portal_tab_button...53 4.2.17 portal_tab_button_left...55 4.2.18 portal_tab_button_right...57 4.2.19 portal_tab_button_bg...59 4.2.20 portal_tab_button_active...61 4.2.21 portlet_list_title_bg...63 4.2.22 portlet_list_title_bg_center...65 作 成 者 : 株 式 会 社 NTT データ イントラマート Page i

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.23 portlet_list_title_bg_left... 67 4.2.24 portlet_list_title_bg_right... 69 4.2.25 portlet_list_title_sort_bg... 71 4.2.26 portlet_list_title_sort_bg_center...73 4.2.27 portlet_list_title_sort_bg_left... 75 4.2.28 portlet_list_title_sort_bg_right... 77 4.2.29 portlet_list_data_bg... 79 4.2.30 portlet_list_data_bg_left... 81 4.2.31 portlet_list_data_bg_right... 83 4.2.32 portlet_list_data_gray_bg... 85 4.2.33 portlet_attention_data_bg... 87 4.3 <INPUT>に 指 定 するクラス... 89 4.3.1 default... 90 4.3.2 default_right... 91 4.3.3 button_bg... 92 4.3.4 output... 93 4.4 <TEXTAREA>に 指 定 するクラス... 94 4.4.1 default... 95 4.5 <IMG>に 指 定 するクラス... 96 4.5.1 portal_tab_button_left... 97 4.5.2 portal_tab_button_right... 98 4.6 <SELECT>に 指 定 するクラス... 99 4.6.1 default... 100 4.7 <FONT>に 指 定 するクラス... 101 4.7.1 attention... 102 5 用 途 別 リファレンス... 103 5.1 表 示 幅 100%の 一 覧 を 作 成 する... 104 5.1.1 関 連 するクラス... 104 5.1.2 使 用 例... 104 5.2 一 覧 の 表 示 幅 を 変 更 する... 105 5.2.1 関 連 するクラス... 105 5.2.2 使 用 例... 105 5.3 ポートレット 内 に 一 覧 ( 表 )を 作 成 する... 106 5.3.1 関 連 するクラス... 106 5.3.2 使 用 例... 106 5.4 いろいろな 部 品 を 囲 む 枠 を 作 成 する... 107 5.4.1 関 連 するクラス... 107 5.4.2 使 用 例... 107 5.5 ボタンを 作 成 する... 108 5.5.1 関 連 するクラス... 108 5.5.2 使 用 例... 108 5.6 タブを 作 成 する... 109 5.6.1 関 連 するクラス... 109 5.6.2 使 用 例... 109 5.7 入 力 項 目 を 作 成 する... 110 5.7.1 関 連 するクラス... 110 5.7.2 使 用 例... 111 Page ii Copyright 2000-2006 ( 株 )NTT データイントラマート All rights Reserved.

目 次 5.8 入 力 項 目 のラベルを 作 成 する...112 5.8.1 関 連 するクラス...112 5.8.2 使 用 例...112 5.9 必 須 項 目 のラベルを 作 成 する...113 5.9.1 関 連 するクラス...113 5.9.2 使 用 例...113 5.10 <INPUT>タグで 入 力 フォームを 作 成 する...114 5.10.1 関 連 するクラス...114 5.10.2 使 用 例...114 5.11 右 寄 せ 表 示 の 入 力 フォームを 作 成 する...115 5.11.1 関 連 するクラス...115 5.11.2 使 用 例...115 5.12 読 み 出 し 専 用 の 入 力 フォームを 作 成 する...116 5.12.1 関 連 するクラス...116 5.12.2 使 用 例...116 5.13 <TEXTAREA>タグで 入 力 フォームを 作 成 する...117 5.13.1 関 連 するクラス...117 5.13.2 使 用 例...117 5.14 <SELECT>タグで 選 択 項 目 を 作 成 する...118 5.14.1 関 連 するクラス...118 5.14.2 使 用 例...118 5.15 <TD>タグに 外 枠 と 背 景 色 を 付 けて 表 示 する...119 5.15.1 関 連 するクラス...119 5.15.2 使 用 例...119 作 成 者 : 株 式 会 社 NTT データ イントラマート Page iii

intra-mart スタイルシート 仕 様 書 (Version 6.1) Page iv Copyright 2000-2006 ( 株 )NTT データイントラマート All rights Reserved.

1 はじめに 1 はじめに 1.1 概 要 imtra-mart WebPlatform および intra-martappframework Version6.1 ( 以 下 IMv61)で 標 準 に 使 用 されている カラーパターンには それぞれのスタイルシートが 用 意 されています 本 ドキュメントでは そのスタイルシートに 設 定 されている 内 容 について 詳 細 を 記 述 します 画 面 デザインガイドラインの 補 足 資 料 として 使 用 してください また 新 しくカラーパターンを 作 成 する 際 の 参 考 にしてください 1.2 JavaEE 開 発 モデルの prefix 属 性 本 ドキュメント 内 では prefix 属 性 を "imarttag" として 説 明 を 行 います 記 述 例 を 以 下 に 示 します [ 記 述 例 ] <%@ taglib prefix="imarttag" uri="http://www.intra-mart.co.jp/taglib/foundation/imarttag" %> 1.3 デザインスタイルシートタグの 設 定 画 面 を 作 成 する HTML および JSP ファイルには 画 面 共 通 モジュールの デザインスタイルシートタグ を 必 ず 記 述 してください この 記 述 により テーマの 変 更 に 対 応 して 自 動 でスタイルシートファイルを 切 り 替 えることができます 開 発 モデル 画 面 共 通 モジュール スクリプト 開 発 モデル <IMART type="imdesigncss"></imart> JavaEE 開 発 モデル <imarttag:imartdesigncss /> IMv61 では 標 準 でスタイルシートファイル( 3.3 スタイルシートファイル を 参 照 ) が 用 意 されていますが これらのスタイルシートファイルを<LINK>タグにて 直 接 指 定 することは 推 奨 しません 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 1

intra-mart スタイルシート 仕 様 書 (Version 6.1) 2 カラーパターン 2.1 標 準 カラーパターン IMv61 で 標 準 に 用 意 されているカラーパターンは 以 下 の 5 種 類 です 青 系 赤 系 緑 系 オレンジ 系 グレー 系 2.2 カラーコントラスト 各 カラーパターンで 使 用 している 基 本 色 (RGB 値 )を 以 下 の 表 2-1 各 カラーパターンの 基 本 色 に 示 します 画 面 内 では 多 種 の 色 を 使 用 することはなるべく 避 けて これらの 色 を 使 用 することをお 奨 めします 表 2-1 各 カラーパターンの 基 本 色 青 系 赤 系 緑 系 オレンジ 系 グレー 系 Page 2 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

3 スタイルシート 3 スタイルシート 3.1 スタイルシートの 注 意 点 ブラウザによって 未 対 応 のスタイルシートもあるため 同 じ 画 面 でも 動 作 や 見 栄 えが 異 なる 場 合 があります また 同 じブラウザでもバージョンによって 動 作 や 見 栄 えが 異 なる 場 合 があります 新 しくスタイルシートの 定 義 を 行 うときは 多 種 のブラウザで 確 認 することをお 奨 めします どのブラウザを 使 用 しても 全 体 的 に 見 栄 えがいいように スタイルシートの 定 義 をしてください 弊 社 で 動 作 検 証 済 みバージョンのブラウザ( 推 奨 )は 下 記 の 通 りです InternetExplorer6 Netscape7.1 3.2 用 語 スタイルシートの 基 本 的 な 用 語 について 以 下 に 定 義 します ( 例 ) TABLE.login { border-color:red; } TABLE.login {...} の TABLE を TABLE 要 素 の セレクタ(selector) TABLE.login {...} の login を クラス(class) border-color:red を 宣 言 (declaration) border-color を 属 性 (property) red を 値 (value) 3.3 スタイルシートファイル IMv61 では 各 カラーパターンに 対 して それぞれのスタイルシートが 用 意 されています スタイルシートの 配 置 場 所 は 以 下 を 参 照 してください Application Runtime が 動 作 する Service Platform をインストールしたディレクトリを <%im_path%> とします カラー ディレクトリ スタイルシート 青 系 赤 系 緑 系 オレンジ 系 グレー 系 <%im_path%>/doc/imart/skin/ blue/ red/ green/ orange/ gray/ blue.css skin.css color.css red.css skin.css color.css green.css skin.css color.css orange.css skin.css color.css gray.css skin.css color.css 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 3

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4 クラスリファレンス この 章 では IMv61 で 標 準 に 用 意 されているスタイルシートの 内 容 について 説 明 します スタイルシート 内 で 定 義 されているクラスを セレクタ 毎 に 分 けて 紹 介 していきます 4.1 <TABLE>に 指 定 するクラス ここでは HTML の<TABLE>タグで 属 性 class に 指 定 できるクラスについて 説 明 します 表 4-1 <TABLE>タグに 指 定 するクラス 一 覧 項 番 項 目 用 途 ページ 4.1.1 table_border_bg 一 覧 ( 表 )の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 4.1.2 list_border_bg 一 覧 ( 表 )の 外 枠 ( 表 示 幅 100% 固 定 ) 7 4.1.3 table_border_line <TABLE>で 囲 った 外 枠 のみ 表 示 9 4.1.4 edit 登 録 更 新 系 画 面 でラベル& 入 力 項 目 を 囲 む 10 4.1.5 button ボタン 配 置 (デザインを 整 える) 12 4.1.6 portal_tab ポータル 用 のタブ 13 4.1.7 portal_tab_button_all ポータル 用 のタブボタン 全 部 分 16 4.1.8 portal_tab_button ポータル 用 のタブボタン 部 分 19 4.1.9 portal_outer ポータル 用 の 外 枠 22 4.1.10 portlet_list_border_bg ポートレット 一 覧 画 面 全 背 景 色 24 Page 4 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.1.1 table_border_bg 4.1.1.1 形 式 <TABLE class="table_border_bg"> ~ 4.1.1.2 説 明 一 覧 ( 表 ) を 作 成 するときの 枠 として 使 用 します 横 幅 は<TABLE>タグに 属 性 width を 指 定 することで 任 意 に 変 更 できます 本 クラス(table_border_bg) は <TABLE>タグ 内 の 領 域 をすべて 塗 りつぶしているだけなので 単 独 で 使 用 する だけでは 一 覧 の 作 成 にはなりません <TD>タグに 指 定 するクラスとの 組 み 合 わせによって 一 覧 の 作 成 を 実 現 することができます ( 例 -1) 一 覧 のタイトル 部 分 <TABLE class="table_border_bg"> + <TD class="list_title_bg"> + = ( 例 -2) 一 覧 のデータ 部 分 <TABLE class="table_border_bg"> + <TD class="list_data_bg"> + = 組 み 合 わせて 使 用 する <TD>タグのクラスについては 4.1.1.3 関 連 するクラス を 参 照 してください 4.1.1.3 関 連 するクラス タグ クラス 説 明 ページ <TD> list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 40 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 46 list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 48 list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 50 4.1.1.4 注 意 点 本 クラスを 記 述 した<TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 5

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.1.1.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE width="550" class="table_border_bg"> <TD width="40" class="list_title_bg_center"><input type="checkbox" name="ck1"> <TD width="80" class="list_title_sort_bg_center"><b>ユーザコード</b> <TD width="150" class="list_title_bg_center">ユーザ 名 <TD width="*" class="list_title_bg_center"> 会 社 / 組 織 <TD class="list_data_bg"><input type="checkbox" name="ck1"> <TD class="list_data_bg">user001 <TD class="list_data_bg">ユーザ001 <TD class="list_data_bg_left"> 会 社 / 事 業 部 <TD class="list_data_bg"><input type="checkbox" name="ck1"> <TD class="list_data_bg">user002 <TD class="list_data_bg">ユーザ002 <TD class="list_data_bg_left"> 会 社 / 事 業 部 / 課 <TABLE>タグの 属 性 width により 表 の 幅 を 指 定 して 表 示 することができる Page 6 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.1.2 list_border_bg 4.1.2.1 形 式 <TABLE class="list_border_bg"> ~ 4.1.2.2 説 明 一 覧 ( 表 ) を 作 成 するときの 枠 として 使 用 します 横 幅 は 100% 固 定 で 設 定 されているため 変 更 できません 本 クラス(list_border_bg) は <TABLE>タグ 内 の 領 域 をすべて 塗 りつぶしているだけなので 単 独 で 使 用 するだ けでは 一 覧 の 作 成 にはなりません <TD>タグに 指 定 するクラスとの 組 み 合 わせによって 一 覧 の 作 成 を 実 現 することができます ( 例 -1) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_title_bg"> + = ( 例 -2) 一 覧 のデータ 部 分 <TABLE class="list_border_bg"> + <TD class="list_data_bg"> + = 組 み 合 わせて 使 用 する <TD>タグのクラスについては 4.1.2.3 関 連 するクラス を 参 照 してください 4.1.2.3 関 連 するクラス タグ クラス 説 明 ページ <TD> list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 40 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 46 list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 48 list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 50 4.1.2.4 注 意 点 本 クラスを 記 述 した<TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 7

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.1.2.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TD width="40" class="list_title_bg_center"><input type="checkbox" name="ck1"> <TD width="80" class="list_title_sort_bg_center"><b>ユーザコード</b> <TD width="150" class="list_title_bg_center">ユーザ 名 <TD width="*" class="list_title_bg_center"> 会 社 / 組 織 <TD class="list_data_bg"><input type="checkbox" name="ck1"> <TD class="list_data_bg">user001 <TD class="list_data_bg">ユーザ001 <TD class="list_data_bg_left"> 会 社 / 事 業 部 <TD class="list_data_bg"><input type="checkbox" name="ck1"> <TD class="list_data_bg">user002 <TD class="list_data_bg">ユーザ002 <TD class="list_data_bg_left"> 会 社 / 事 業 部 / 課 横 幅 が 100% 固 定 で 設 定 されているので 画 面 いっぱいに 表 示 することができる Page 8 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.1.3 table_border_line 4.1.3.1 形 式 <TABLE class="table_border_line"> ~ 4.1.3.2 説 明 全 体 を 囲 う 枠 だけを 表 示 するときに 使 用 します <TABLE>タグに 属 性 width および 属 性 height を 指 定 することで 任 意 にサイズを 変 更 できます 4.1.3.3 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="table_border_line" height="100" width="450"> <TD align="center"> <TABLE> <TD width="30%" align="center" nowrap>ユーザ ID <TD> <IMART type="input" class="default" style="text" name="name_srch" size="30" value=name_srch> </IMART> <TD> <IMART type="imicon" name=" 検 索 " href="javascript:onsearchaccount();" icon="images/standard/search.gif"> </IMART> width="450" height="100" <TABLE>で 囲 った 外 枠 部 分 (border)を 表 示 している 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 9

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.1.4 edit 4.1.4.1 形 式 <TABLE class="edit"> ~ 4.1.4.2 説 明 登 録 系 や 更 新 系 の 画 面 で 各 ラベルや 入 力 項 目 を 作 成 するときに 以 下 の 4.1.4.3 関 連 するクラス に 示 すク ラスを 使 用 した 場 合 は 周 りを 囲 む<TABLE> タグに 必 ず 本 クラスを 指 定 してください また 以 下 の 表 4-2 入 力 項 目 を 作 成 する 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 して 入 力 項 目 を 作 成 する 場 合 は 周 りを 囲 む<TABLE>に 必 ず 本 クラスを 指 定 してください 表 4-2 入 力 項 目 を 作 成 する 画 面 共 通 モジュール 入 力 項 目 部 品 項 目 名 入 力 フィールド 選 択 ボックス 画 面 共 通 モジュール <IMART type="imitemname"></imart> <imarttag:imartitemnametd> <IMART type="iminputtd"></imart> <imarttag:imartinputtd> <IMART type="imselecttd"></imart> <imarttag:imartselecttd> 4.1.4.3 関 連 するクラス タグ クラス 説 明 ページ <TD> bottom ラベル& 入 力 項 目 のアンダーライン 27 <INPUT> default 入 力 項 目 の 背 景 色 90 default_right 数 値 用 の 入 力 項 目 の 背 景 色 (テキスト 右 寄 せ) 91 output readonly 用 の 入 力 項 目 の 背 景 色 93 <TEXTAREA> default 入 力 項 目 の 背 景 色 95 <SELECT> default 選 択 項 目 の 背 景 色 100 <FONT> attention ( 必 須 ) の 文 字 フォント 102 4.1.4.4 注 意 点 上 記 4.1.4.3 関 連 するクラス と 表 4-2 入 力 項 目 を 作 成 する 画 面 共 通 モジュール を 使 用 して 入 力 項 目 を 作 成 した 場 合 に 周 りを 囲 む<TABLE>タグに 本 クラス(edit) 記 述 しないと 画 面 のデザインが 崩 れてしまいます ( 例 ) <TABLE>タグに edit クラスを 指 定 しなかった 場 合 ラベルと 入 力 項 目 の 間 の 下 線 (ボーダ) 部 分 が 離 れてしまう Page 10 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.1.4.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します 4.1.4.5.1 関 連 するクラスを 使 用 した 場 合 <TABLE class="edit"> <TD class="bottom">ユーザ ID <TD class="bottom"> <INPUT class="default" type="text" name="userid" size="30"> <TD class="bottom"> <STRONG>ユーザ 名 </STRONG><FONT class="attention">( 必 須 )</FONT> <TD class="bottom"> <INPUT class="default" type="text" name="username" size="50"> 4.1.4.5.2 入 力 項 目 を 作 成 する 画 面 共 通 モジュールを 使 用 した 場 合 <TABLE class="edit"> <IMART type="imitemname" name="ユーザ ID"></IMART> <IMART type="iminputtd" style="text" name="userid" size="30" value="user00011" readonly> </IMART> <IMART type="imitemname" name="ユーザ 名 " require></imart> <IMART type="iminputtd" style="text" name="username" size="50" value="ユーザ 00011"> </IMART> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 11

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.1.5 button 4.1.5.1 形 式 <TABLE class="button"> ~ 4.1.5.2 説 明 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するときに 使 用 します 以 下 の 4.1.5.3 関 連 するクラス に 示 すクラスを 使 用 して 処 理 ボタン を 作 成 する 場 合 は 周 りを 囲 む <TABLE> タグに 必 ず 本 クラスを 指 定 してください 処 理 ボタン の 作 成 方 法 については 4.1.5.5 使 用 例 を 参 照 してください 4.1.5.3 関 連 するクラス タグ クラス 説 明 ページ <TD> button_padding ボタンの 余 白 を 取 り 除 く 28 button_bg ボタンの 背 景 色 29 <INPUT> button_bg ボタンの 背 景 色 (タイル 状 ) 92 4.1.5.4 注 意 点 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するには 本 クラス(button)と 上 記 4.1.5.3 関 連 する クラス に 示 すクラスを 全 て 記 述 しないと 画 面 のデザインが 崩 れてしまいます 必 ず 上 記 のクラスを 全 て 記 述 して 処 理 ボタンを 作 成 してください 処 理 ボタン の 作 成 方 法 については 4.1.5.5 使 用 例 を 参 照 してください ( 例 ) <TABLE>タグに button クラスを 指 定 しなかった 場 合 ボタン 部 品 (INPUT タグ)と 両 端 のイメージ 画 像 (IMG タグ) が 離 れてしまう 4.1.5.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="button"> <TD class="button_padding"><img src="images/standard/button_left.gif"> <TD class="button_bg"> <INPUT class="button_bg" name="regist" type="submit" value=" 登 録 "> <TD class="button_padding"><img src="images/standard/button_right.gif"> Page 12 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.1.6 portal_tab 4.1.6.1 形 式 <TABLE class="portal_tab"> ~ 4.1.6.2 説 明 ポータル 画 面 などで タブ を 作 成 するときに 使 用 します 以 下 の 4.1.6.3 関 連 するクラス に 示 すクラスを 使 用 して タブ を 作 成 する 場 合 は 本 クラスを 記 述 した <TABLE>タグで タブを 作 成 しているHTMLの 全 体 を 囲 むことで 不 必 要 なスペースやデザインの 崩 れを 整 えること ができます 横 幅 は 100% 固 定 で 設 定 されているため 本 クラスを 使 用 すると タブ 全 体 が 画 面 の 幅 いっぱいに 表 示 されます タブ の 作 成 方 法 については 4.1.6.5 使 用 例 を 参 照 してください タブ 全 体 の 表 示 幅 を 指 定 したい 場 合 は 4.1.6.5.2 タグ 全 体 の 表 示 幅 を 変 更 する で 紹 介 しています 参 考 にしてください 4.1.6.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab_button 1 つのタブのデザインを 整 える 19 portal_outer タブの 外 枠 22 <TD> portal_tab_button タブのボタン 部 分 のデザインを 整 える 53 portal_tab_button_left タブの 左 側 55 portal_tab_button_right タブの 右 側 57 portal_tab_button_bg タブのボタン 部 分 の 背 景 色 ( 未 選 択 時 ) 59 portal_tab_button_active タブのボタン 部 分 の 背 景 色 ( 選 択 時 ) 61 <IMG> portal_tab_button_left タブの 左 側 の 画 像 97 portal_tab_button_right タブの 右 側 の 画 像 98 4.1.6.4 注 意 点 上 記 4.1.6.3 関 連 するクラス に 示 すクラスを 使 用 してタブを 作 成 した 場 合 タブ 全 体 を 囲 む<TABLE>に 本 クラス を 記 述 しないと 画 面 のデザインが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 してください ( 例 ) タブ 全 体 を 囲 む <TABLE>タグに portal_tab クラスを 指 定 しなかった 場 合 タブと タブの 外 枠 との 境 界 線 が 離 れてしまう タブ の 作 成 方 法 については 4.1.6.5 使 用 例 を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 13

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.1.6.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します 4.1.6.5.1 タブを 作 成 する <!-- タブを 作 成 --> <TABLE class="portal_tab"> <!-- 1 つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif" > <TD class="portal_tab_button_bg"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> <!-- 2つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> : ( 省 略 ) : <!-- タブの 外 枠 を 表 示 --> <TABLE width="100%" class="portal_outer"> <TR height="100"><td> タブの 表 示 領 域 が 横 幅 100% 固 定 の 状 態 で 表 示 されている Page 14 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.1.6.5.2 タグ 全 体 の 表 示 幅 を 変 更 する 本 クラス(portal_tab) は 横 幅 が 100% 固 定 で 設 定 されているため 画 面 の 幅 いっぱいにタブが 表 示 されます タブの 表 示 幅 を 指 定 したい 場 合 は 本 クラスを 記 述 した<TABLE>タグの 周 りを 枠 線 なしの<TABLE>で 囲 い 属 性 width で 横 幅 を 指 定 してください <!-- タブの 表 示 幅 を 指 定 するための TABLE タグ --> <TABLE border="0" cellspacing="0" cellpadding="0" width="300"> <TD> <!-- タブを 作 成 --> <TABLE class="portal_tab"> <!-- 1 つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> この 部 分 にタブを 作 成 する HTML を 記 述 する : ( 省 略 ) : <!-- タブの 外 枠 を 表 示 --> <TABLE width="100%" class="portal_outer"> <TR height="100"><td> タブの 表 示 幅 が 属 性 width で 指 定 したサイズになっている width="300" 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 15

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.1.7 portal_tab_button_all 4.1.7.1 形 式 <TABLE class="portal_tab_button_all"> ~ 4.1.7.2 説 明 ポータル 画 面 などで タブ を 作 成 するときに 使 用 します 機 能 は <TABLE>タグに 指 定 する portal_tab クラスと 同 様 です 以 下 の 4.1.7.3 関 連 するクラス に 示 すクラスを 使 用 して タブ を 作 成 する 場 合 は 本 クラスを 記 述 した <TABLE>タグで タブを 作 成 しているHTMLの 全 体 を 囲 むことで 不 必 要 なスペースやデザインの 崩 れを 整 えること ができます 横 幅 は 100% 固 定 で 設 定 されているため 本 クラスを 使 用 すると タブ 全 体 が 画 面 の 幅 いっぱいに 表 示 されます 表 示 幅 を 変 更 したい 場 合 は 枠 線 なしの<TABLE>タグに 属 性 width で 幅 を 指 定 して そのテーブルのセルとして <TD>タグ 内 に 本 クラスを 使 用 した<TABLE>タグを 記 述 する 方 法 があります ( 詳 細 は 4.1.7.5.2 タグ 全 体 の 表 示 幅 を 変 更 する を 参 照 してください ) タブ の 作 成 方 法 については 4.1.7.5 使 用 例 を 参 照 してください 4.1.7.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab_button 1 つのタブのデザインを 整 える 19 portal_outer タブの 外 枠 22 <TD> portal_tab_button タブのボタン 部 分 のデザインを 整 える 53 portal_tab_button_left タブの 左 側 55 portal_tab_button_right タブの 右 側 57 portal_tab_button_bg タブのボタン 部 分 の 背 景 色 ( 未 選 択 時 ) 59 portal_tab_button_active タブのボタン 部 分 の 背 景 色 ( 選 択 時 ) 61 <IMG> portal_tab_button_left タブの 左 側 の 画 像 97 portal_tab_button_right タブの 右 側 の 画 像 98 4.1.7.4 注 意 点 上 記 4.1.7.3 関 連 するクラス に 示 すクラスを 使 用 してタブを 作 成 した 場 合 タブ 全 体 を 囲 む<TABLE>に 本 クラス を 記 述 しないと 画 面 のデザインが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 することをお 奨 めします ( 例 ) タブ 全 体 を 囲 む <TABLE>タグに portal_tab_button_all クラスを 指 定 しなかった 場 合 タブと タブの 外 枠 との 境 界 線 が 離 れてしまう タブ の 作 成 方 法 については 4.1.7.5 使 用 例 を 参 照 してください Page 16 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.1.7.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します 4.1.7.5.1 タブを 作 成 する <!-- タブを 作 成 --> <TABLE class="portal_tab_button_all"> <!-- 1 つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif" > <TD class="portal_tab_button_bg"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> <!-- 2つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> : ( 省 略 ) : <!-- タブの 外 枠 を 表 示 --> <TABLE width="100%" class="portal_outer"> <TR height="100"><td> タブの 表 示 領 域 が 横 幅 100% 固 定 の 状 態 で 表 示 されている 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 17

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.1.7.5.2 タグ 全 体 の 表 示 幅 を 変 更 する 本 クラス(portal_tab_button_all) は 横 幅 が 100% 固 定 で 設 定 されているため 画 面 の 幅 いっぱいにタブが 表 示 されます タブの 表 示 幅 を 変 更 したい 場 合 は 枠 線 なしの<TABLE>タグに 属 性 width で 幅 を 指 定 して そのテーブルの セルとして<TD>タグ 内 に 本 クラスを 使 用 した<TABLE>タグを 記 述 してください <!-- タブの 表 示 幅 を 指 定 するための TABLE タグ --> <TABLE border="0" cellspacing="0" cellpadding="0" width="300"> <TD> <!-- タブを 作 成 --> <TABLE class="portal_tab_button_all"> <!-- 1 つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> この 部 分 にタブを 作 成 する HTML を 記 述 する : ( 省 略 ) : <!-- タブの 外 枠 を 表 示 --> <TABLE width="100%" class="portal_outer"> <TR height="100"><td> タブの 表 示 幅 が 属 性 width で 指 定 したサイズになっている width="300" Page 18 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.1.8 portal_tab_button 4.1.8.1 形 式 <TABLE class="portal_tab_button"> ~ 4.1.8.2 説 明 タブ ボタンを 作 成 するときに 使 用 します 主 に ポータル 画 面 などで 使 用 します 1 つのタブを 作 成 する <TABLE>タグに 本 クラスを 指 定 することで 不 必 要 なスペースなどを 取 り 除 き デザインを 整 えることができます 以 下 の 4.1.8.3 関 連 するクラス に 示 すクラスを 使 用 して タブ を 作 成 する 場 合 は 1 つのタブを 作 成 している <TABLE> タグに 必 ず 本 クラスを 指 定 してください 横 幅 は 100% 固 定 で 設 定 されているため 1 つのタブが 画 面 の 幅 いっぱいに 表 示 されます 複 数 のタブを 横 並 びに 配 置 したい 場 合 は 枠 線 なしの<TABLE>タグのセルとして<TD>タグ 内 に 本 クラスを 使 用 し た<TABLE>タグを 記 述 する 方 法 があります ( 詳 細 は 4.1.8.5.2 複 数 のタブを 作 成 する を 参 照 してください ) タブ の 作 成 方 法 については 4.1.8.5 使 用 例 を 参 照 してください 4.1.8.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab タブ 全 体 のデザインを 整 える 13 portal_tab_button_all 16 portal_outer タブの 外 枠 22 <TD> portal_tab_button タブのボタン 部 分 のデザインを 整 える 53 portal_tab_button_left タブの 左 側 55 portal_tab_button_right タブの 右 側 57 portal_tab_button_bg タブのボタン 部 分 の 背 景 色 ( 未 選 択 時 ) 59 portal_tab_button_active タブのボタン 部 分 の 背 景 色 ( 選 択 時 ) 61 <IMG> portal_tab_button_left タブの 左 側 の 画 像 97 portal_tab_button_right タブの 右 側 の 画 像 98 4.1.8.4 注 意 点 上 記 4.1.8.3 関 連 するクラス に 示 すクラスを 使 用 して 1 つのタブを 作 成 した 場 合 <TABLE>タグに 本 クラスを 記 述 しないと 画 面 のデザインが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 することをお 奨 めします ( 例 ) 1つのタブを 作 成 している <TABLE>タグに portal_tab_button クラスを 指 定 しなかった 場 合 タブと タブの 両 側 の 画 像 が 離 れてしまう タブ の 作 成 方 法 については 4.1.8.5 使 用 例 を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 19

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.1.8.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します 4.1.8.5.1 1 つのタブを 作 成 する 本 クラスは 横 幅 が 100% 固 定 で 設 定 されているため 1 つのタブが 画 面 の 幅 いっぱいに 表 示 されます ( 機 能 的 に タブを 1 つのみ 作 成 することはあまり 無 いと 思 いますが ) 複 数 のタブを 横 並 びで 表 示 させたい 場 合 は 4.1.8.5.2 複 数 のタブを 作 成 する を 参 照 してください <!-- 1 つのタブを 作 成 --> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif"> <TD class="portal_tab_button_bg"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> <!-- タブの 外 枠 を 表 示 --> <TABLE width="100%" class="portal_outer"> <TR height="100"><td> 1 つのタブを 作 成 している Page 20 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.1.8.5.2 複 数 のタブを 作 成 する <!-- タブを 作 成 --> <TABLE class="portal_tab"> <!-- 1 つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif"> <TD class="portal_tab_button_active"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> <!-- 2つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif" > <TD class="portal_tab_button_bg"><a href="#"> 営 業 部 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> <!-- 3つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif"> <TD class="portal_tab_button_bg"><a href="#"> 経 理 部 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif" > <!-- タブの 外 枠 を 表 示 --> <TABLE width="100%" class="portal_outer"> <TR height="100"><td> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 21

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.1.9 portal_outer 4.1.9.1 形 式 <TABLE class="portal_outer"> ~ 4.1.9.2 説 明 タブ ボタンの 下 段 に 表 示 する タブの 外 枠 を 作 成 するときに 使 用 します 主 に ポータル 画 面 などで 使 用 します <TABLE>タグに 本 クラスを 指 定 することで タブの 外 枠 を 作 成 することができます 表 示 幅 は 設 定 されていないので <TABLE>タグに 属 性 width を 指 定 することで 任 意 に 変 更 できます ボーダー( 枠 線 )の 太 さは 1px で 設 定 されているので 本 クラスを 指 定 した<TABLE>タグに 属 性 border を 設 定 してもボーダーの 太 さを 変 更 することはできません 以 下 の 4.1.9.3 関 連 するクラス に 示 すクラスを 使 用 して タブ を 作 成 した 場 合 は その 下 段 に 必 ず 本 クラス を 指 定 した<TABLE>タグを 記 述 して タブの 外 枠 を 表 示 してください タブ と タブの 外 枠 の 両 方 が 表 示 されていることで ひとつの タブ 画 面 として 表 現 されます [タブ] [タブの 外 枠 ] + [タブ 画 面 ] タブの 外 枠 の 作 成 方 法 については 4.1.8.5 使 用 例 を 参 照 してください 4.1.9.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab タブ 全 体 のデザインを 整 える 13 portal_tab_button_all 16 portal_tab_button 1 つのタブのデザインを 整 える 19 <TD> portal_tab_button タブのボタン 部 分 のデザインを 整 える 53 portal_tab_button_left タブの 左 側 55 portal_tab_button_right タブの 右 側 57 portal_tab_button_bg タブのボタン 部 分 の 背 景 色 ( 未 選 択 時 ) 59 portal_tab_button_active タブのボタン 部 分 の 背 景 色 ( 選 択 時 ) 61 <IMG> portal_tab_button_left タブの 左 側 の 画 像 97 portal_tab_button_right タブの 右 側 の 画 像 98 Page 22 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.1.9.4 使 用 例 <!-- タブの 表 示 幅 を 指 定 するための TABLE タグ --> <TABLE border="0" cellspacing="0" cellpadding="0" width="300"> <TD> <!-- タブを 作 成 --> <TABLE class="portal_tab"> <!-- 1 つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> : ( 省 略 ) : <!-- タブの 外 枠 を 表 示 する --> <TABLE width="100%" class="portal_outer"> <TR height="200"> <TD> タブの 外 枠 の 表 示 幅 は 属 性 width で 指 定 したサイズになっている <TR height="200"> <TABLE width="100%" > 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 23

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.1.10 portlet_list_border_bg 4.1.10.1 形 式 <TABLE class="portlet_list_border_bg"> ~ 4.1.10.2 説 明 ポートレット 内 に 一 覧 ( 表 )を 作 成 するときの 枠 として 使 用 します 機 能 は <TABLE>タグに 指 定 する list_border_bg クラスと 同 様 です 横 幅 は 100% 固 定 で 設 定 されているため 変 更 できません ( 画 面 の 幅 いっぱいに 表 示 されます ) 表 示 幅 を 変 更 したい 場 合 は 枠 線 なしの<TABLE>タグのセルとして<TD>タグ 内 に 本 クラスを 使 用 した<TABLE>タ グを 記 述 する 方 法 があります ( 詳 細 は 4.1.10.4 使 用 例 を 参 照 してください ) 本 クラス(portlet_list_border_bg) は <TABLE>タグ 内 の 領 域 内 をすべて 塗 りつぶしているだけなので 単 独 で 使 用 するだけでは 一 覧 の 作 成 にはなりません <TD>タグに 指 定 するクラスとの 組 み 合 わせによって 一 覧 の 作 成 を 実 現 することができます ( 例 -1) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_title_bg"> + = ( 例 -2) 一 覧 のデータ 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_data_bg"> + = 組 み 合 わせて 使 用 する <TD>タグのクラスについては 4.1.10.3 関 連 するクラス を 参 照 してください 4.1.10.3 関 連 するクラス タグ クラス 説 明 ページ <TD> portlet_list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 63 portlet_list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 65 portlet_list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 67 portlet_list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 69 portlet_list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 71 portlet_list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 73 portlet_list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 75 portlet_list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 77 portlet_list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 79 portlet_list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 81 portlet_list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 83 portlet_list_data_gray_bg 一 覧 の 選 択 状 態 データ 85 portlet_attention_data_bg 一 覧 の 強 調 データ ( 文 字 色 : 赤 ) 87 Page 24 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.1.10.4 使 用 例 <TABLE width="350"> <TD> <TABLE class="portlet_list_border_bg"> <TD class="portlet_list_title_bg"> <TD class="portlet_list_title_bg_center">タイトル <TD class="portlet_list_title_bg_center"> 場 所 <TD class="portlet_list_title_bg_center"> 時 間 <TD class="portlet_list_data_bg"> 仮 <TD class="portlet_list_data_bg_left"> 進 捗 会 議 <TD class="portlet_list_data_bg"> 会 議 室 <TD class="portlet_list_data_bg">17:00~18:00 : ( 省 略 ) : 表 示 幅 が 属 性 width で 指 定 した サイズになっている width="350" 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 25

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2 <TD>に 指 定 するクラス ここでは HTML の<TD>タグで 属 性 class に 指 定 できるクラスについて 説 明 します 表 4-3 <TD>タグに 指 定 するクラス 一 覧 項 番 項 目 用 途 ページ 4.2.1 bottom ラベル& 入 力 項 目 のアンダーライン 27 4.2.2 button_padding ボタンの 余 白 28 4.2.3 button_bg ボタンの 背 景 色 29 4.2.4 list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 4.2.5 list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 4.2.6 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 4.2.7 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 4.2.8 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 4.2.9 list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 40 4.2.10 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 4.2.11 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 4.2.12 list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 46 4.2.13 list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 48 4.2.14 list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 50 4.2.15 output 外 枠 と 背 景 色 付 きの 出 力 項 目 52 4.2.16 portal_tab_button タブのボタン 部 分 のデザインを 整 える 53 4.2.17 portal_tab_button_left タブの 左 側 55 4.2.18 portal_tab_button_right タブの 右 側 57 4.2.19 portal_tab_button_bg タブのボタンの 背 景 色 ( 未 選 択 時 ) 59 4.2.20 portal_tab_button_active タブのボタンの 背 景 色 ( 選 択 時 ) 61 4.2.21 portlet_list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 63 4.2.22 portlet_list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 65 4.2.23 portlet_list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 67 4.2.24 portlet_list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 69 4.2.25 portlet_list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 71 4.2.26 portlet_list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 73 4.2.27 portlet_list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 75 4.2.28 portlet_list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 77 4.2.29 portlet_list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 79 4.2.30 portlet_list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 81 4.2.31 portlet_list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 83 4.2.32 portlet_list_data_gray_bg 一 覧 の 選 択 状 態 データ 85 4.2.33 portlet_attention_data_bg 一 覧 の 強 調 データ ( 文 字 色 : 赤 ) 87 Page 26 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.1 bottom 4.2.1.1 形 式 <TD class="bottom"> ~ 4.2.1.2 説 明 登 録 系 や 更 新 系 の 画 面 で 各 ラベルや 入 力 項 目 を 作 成 するときに 使 用 します 本 クラスを 使 用 すると <TD>~ 内 に 記 述 したラベルや 入 力 項 目 にアンダーラインを 表 示 します ラベルや 入 力 項 目 を 作 成 する 際 は 画 面 デザインガイドラインに 従 い 必 ず 本 クラスを 指 定 してください また 本 クラスを 使 用 して ラベルや 入 力 項 目 を 作 成 する 場 合 は <TABLE>タグに 必 ず 以 下 の 4.2.1.3 関 連 する クラス に 示 すクラスを 指 定 してください 4.2.1.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> edit ラベル& 入 力 項 目 を 囲 んでデザインを 整 える 10 <INPUT> default 入 力 項 目 の 背 景 色 90 default_right 数 値 用 の 入 力 項 目 の 背 景 色 (テキスト 右 寄 せ) 91 output readonly 用 の 入 力 項 目 の 背 景 色 93 <TEXTAREA> default 入 力 項 目 の 背 景 色 95 <SELECT> default 選 択 項 目 の 背 景 色 100 <FONT> attention ( 必 須 ) の 文 字 フォント 102 4.2.1.4 注 意 点 本 クラス を 使 用 してラベルや 入 力 項 目 を 作 成 した 場 合 は 周 りを 囲 む<TABLE>タグに 上 記 の 4.2.1.3 関 連 するク ラス を 記 述 しないと 画 面 のデザインが 崩 れてしまいます 詳 細 は <TABLE>タグに 指 定 するeditクラスの 4.1.4.4 注 意 点 を 参 照 してください 4.2.1.5 使 用 例 <TABLE class="edit"> <TD class="bottom">ユーザ ID <TD class="bottom"><input class="default" type="text" name="userid" size="30"> <TD class="bottom"> <STRONG>ユーザ 名 </STRONG><FONT class="attention">( 必 須 )</FONT> <TD class="bottom"><input class="default" type="text" name="username" size="50"> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 27

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.2 button_padding 4.2.2.1 形 式 <TD class="button_padding"> ~ 4.2.2.2 説 明 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するときに 使 用 します 以 下 の 4.2.2.3 関 連 するクラス に 示 すクラスを 使 用 して 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 する 場 合 は 必 ず 本 クラスを 指 定 してください 処 理 ボタン の 作 成 方 法 については 4.2.2.5 使 用 例 を 参 照 してください 4.2.2.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> button ボタンの 余 白 を 取 り 除 き デザインを 整 える 12 <TD> button_bg ボタンの 背 景 色 29 <INPUT> button_bg ボタンの 背 景 色 (タイル 状 ) 92 4.2.2.4 注 意 点 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するには 本 クラス(button)と 上 記 4.2.2.3 関 連 する クラス に 示 すクラスを 全 て 記 述 しないと 画 面 のデザインが 崩 れてしまいます 詳 細 は <TABLE>タグに 指 定 するbuttonクラスの 4.1.5.4 注 意 点 を 参 照 してください 4.2.2.5 使 用 例 <TABLE class="button"> <TD class="button_padding"><img src="images/standard/button_left.gif"> <TD class="button_bg"> <INPUT class="button_bg" name="regist" type="submit" value=" 登 録 "> <TD class="button_padding"><img src="images/standard/button_right.gif"> Page 28 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.3 button_bg 4.2.3.1 形 式 <TD class="button_bg"> ~ 4.2.3.2 説 明 以 下 の 4.2.3.3 関 連 するクラス に 示 すクラスを 使 用 して 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 する 場 合 は 必 ず 本 クラスを 指 定 してください 処 理 ボタン の 作 成 方 法 については 4.2.3.5 使 用 例 を 参 照 してください 4.2.3.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> button ボタンの 余 白 を 取 り 除 き デザインを 整 える 12 <TD> button_bg ボタンの 背 景 色 29 <INPUT> button_bg ボタンの 背 景 色 (タイル 状 ) 92 4.2.3.4 注 意 点 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するには 本 クラス(button)と 上 記 4.2.3.3 関 連 する クラス に 示 すクラスを 全 て 記 述 しないと 画 面 のデザインが 崩 れてしまいます 必 ず 上 記 のクラスを 全 て 記 述 して 処 理 ボタンを 作 成 してください ( 例 ) <TABLE>タグに button クラスを 指 定 しなかった 場 合 ボタン 部 品 (INPUT タグ)と 両 端 のイメージ 画 像 (IMG タグ) が 離 れてしまう 処 理 ボタン の 作 成 方 法 については 4.2.3.5 使 用 例 を 参 照 してください 4.2.3.5 使 用 例 <TABLE class="button"> <TD class="button_padding"><img src="images/standard/button_left.gif"> <TD class="button_bg"> <INPUT class="button_bg" name="regist" type="submit" value=" 登 録 "> <TD class="button_padding"><img src="images/standard/button_right.gif"> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 29

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.4 list_title_bg 4.2.4.1 形 式 <TD class="list_title_bg"> ~ 4.2.4.2 説 明 一 覧 ( 表 )で 通 常 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは 20px 固 定 で 設 定 されているため 変 更 することはできません <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は <TD>タグの align 属 性 または タグの align 属 性 で 任 意 に 指 定 してください タイトルの 表 示 位 置 を 中 央 表 示 左 寄 せ 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 強 調 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.4.3 関 連 するクラス を 参 照 してください 4.2.4.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 40 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 4.2.4.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.4.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_title_bg"> + = Page 30 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.4.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TD width="40" class="list_title_bg"> <TD width="80" class="list_title_bg">ユーザコード <TD width="150" class="list_title_bg">ユーザ 名 <TD width="*" class="list_title_bg" align="center"> 会 社 / 組 織 4.2.4.5.1 中 央 表 示 にする データの 表 示 位 置 を 中 央 表 示 にする 場 合 は または <TD>タグに 属 性 align="center" を 指 定 します と 表 示 例 <TD class="list_title_bg" align="center">ユーザ 名 <TD>タグに 指 定 するクラスに list_title_bg_center を 使 用 しても 同 様 の 表 示 結 果 が 得 られます 詳 細 は 4.2.5 list_title_bg_center を 参 照 してください 4.2.4.5.2 左 寄 せで 表 示 する データの 表 示 位 置 を 左 寄 せ で 表 示 する 場 合 は または <TD>タグに 属 性 align="left" を 指 定 します <TD class="list_title_bg" align="left">ユーザ 名 <TD>タグに 指 定 するクラスに list_title_bg_left を 使 用 しても 同 様 の 表 示 結 果 が 得 られます 詳 細 は 4.2.6 list_title_bg_left を 参 照 してください 4.2.4.5.3 右 寄 せで 表 示 する データの 表 示 位 置 を 右 寄 せ で 表 示 する 場 合 は または <TD>タグに 属 性 align="right" を 指 定 します <TD class="list_title_bg" align="right">ユーザ 名 <TD>タグに 指 定 するクラスに list_title_bg_right を 使 用 しても 同 様 の 表 示 結 果 が 得 られます 詳 細 は 4.2.7 list_title_bg_right を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 31

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.5 list_title_bg_center 4.2.5.1 形 式 <TD class="list_title_bg_center"> ~ 4.2.5.2 説 明 一 覧 ( 表 )で 通 常 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは 20px 固 定 で 設 定 されているため 変 更 することはできません <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 中 央 表 示 になります タイトルの 表 示 位 置 を 任 意 指 定 左 寄 せ 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 強 調 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.5.3 関 連 するクラス を 参 照 してください 4.2.5.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 40 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 4.2.5.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.5.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_title_bg_center"> + = Page 32 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.5.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TD width="40" class="list_title_bg_center"><input type="checkbox" name="ck1"> <TD width="80" class="list_title_bg_center">ユーザコード <TD width="150" class="list_title_bg_center">ユーザ 名 <TD width="*" class="list_title_bg_center"> 会 社 / 組 織 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 33

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.6 list_title_bg_left 4.2.6.1 形 式 <TD class="list_title_bg_left"> ~ 4.2.6.2 説 明 一 覧 ( 表 )で 通 常 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは 20px 固 定 で 設 定 されているため 変 更 することはできません <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 左 寄 せ になります データの 表 示 位 置 を 任 意 指 定 中 央 表 示 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 強 調 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.6.3 関 連 するクラス を 参 照 してください 4.2.6.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 40 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 4.2.6.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.6.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_title_bg_left"> + = Page 34 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.6.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TD width="40" class="list_title_bg_left"><input type="checkbox" name="ck1"> <TD width="80" class="list_title_bg_left">ユーザコード <TD width="150" class="list_title_bg_left">ユーザ 名 <TD width="*" class="list_title_bg_left"> 会 社 / 組 織 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 35

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.7 list_title_bg_right 4.2.7.1 形 式 <TD class="list_title_bg_right"> ~ 4.2.7.2 説 明 一 覧 ( 表 )で 通 常 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは 20px 固 定 で 設 定 されているため 変 更 することはできません <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 右 寄 せ になります タイトルの 表 示 位 置 を 任 意 指 定 中 央 表 示 左 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 強 調 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.7.3 関 連 するクラス を 参 照 してください 4.2.7.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 40 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 4.2.7.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.7.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_title_bg_right"> + = Page 36 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.7.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TD width="40" class="list_title_bg_right"><input type="checkbox" name="ck1"> <TD width="80" class="list_title_bg_right">ユーザコード <TD width="150" class="list_title_bg_right">ユーザ 名 <TD width="*" class="list_title_bg_right"> 会 社 / 組 織 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 37

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.8 list_title_sort_bg 4.2.8.1 形 式 <TD class="list_title_sort_bg"> ~ 4.2.8.2 説 明 一 覧 ( 表 )で 強 調 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは 20px 固 定 で 設 定 されているため 変 更 することはできません <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は <TD>タグの align 属 性 または タグの align 属 性 で 任 意 に 指 定 してください タイトルの 表 示 位 置 を 中 央 表 示 左 寄 せ 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 通 常 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.8.3 関 連 するクラス を 参 照 してください 4.2.8.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 40 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 4.2.8.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.8.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_title_sort_bg"> + = Page 38 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.8.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TD width="40" class="list_title_bg"><input type="checkbox" name="ck1"> <TD width="80" class="list_title_bg">ユーザコード <TD width="150" class="list_title_sort_bg">ユーザ 名 <TD width="*" class="list_title_bg"> 会 社 / 組 織 4.2.8.5.1 中 央 表 示 にする データの 表 示 位 置 を 中 央 表 示 にする 場 合 は または <TD>タグに 属 性 align="center" を 指 定 します と 表 示 例 <TD class="list_title_sort_bg" align="center">ユーザ 名 <TD>タグに 指 定 するクラスに list_title_sort_bg_center を 使 用 しても 同 様 の 表 示 結 果 が 得 られます 詳 細 は 4.2.9 list_title_sort_bg_center を 参 照 してください 4.2.8.5.2 左 寄 せで 表 示 する データの 表 示 位 置 を 左 寄 せ で 表 示 する 場 合 は または <TD>タグに 属 性 align="left" を 指 定 します <TD class="list_title_sort_bg" align="left">ユーザ 名 <TD>タグに 指 定 するクラスに list_title_sort_bg_left を 使 用 しても 同 様 の 表 示 結 果 が 得 られます 詳 細 は 4.2.10 list_title_sort_bg_left を 参 照 してください 4.2.8.5.3 右 寄 せで 表 示 する データの 表 示 位 置 を 右 寄 せ で 表 示 する 場 合 は または <TD>タグに 属 性 align="right" を 指 定 します <TD class="list_title_sort_bg" align="right">ユーザ 名 <TD>タグに 指 定 するクラスに list_title_sort_bg_right を 使 用 しても 同 様 の 表 示 結 果 が 得 られます 詳 細 は 4.2.11 list_title_sort_bg_right を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 39

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.9 list_title_sort_bg_center 4.2.9.1 形 式 <TD class="list_title_sort_bg_center"> ~ 4.2.9.2 説 明 一 覧 ( 表 )で 強 調 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは 20px 固 定 で 設 定 されているため 変 更 することはできません <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 中 央 表 示 になります タイトルの 表 示 位 置 を 任 意 指 定 左 寄 せ 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 通 常 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.9.3 関 連 するクラス を 参 照 してください 4.2.9.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 4.2.9.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.9.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_title_sort_bg_center"> + = Page 40 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.9.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TD width="40" class="list_title_bg_center"> <TD width="80" class="list_title_bg_center">ユーザコード <TD width="150" class="list_title_sort_bg_center">ユーザ 名 <TD width="*" class="list_title_bg_center"> 会 社 / 組 織 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 41

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.10 list_title_sort_bg_left 4.2.10.1 形 式 <TD class="list_title_sort_bg_left"> ~ 4.2.10.2 説 明 一 覧 ( 表 )で 強 調 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは 20px 固 定 で 設 定 されているため 変 更 することはできません <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 左 寄 せ になります タイトルの 表 示 位 置 を 任 意 指 定 中 央 表 示 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 通 常 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.10.3 関 連 するクラス を 参 照 してください 4.2.10.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 4.2.10.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.10.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_title_sort_bg_left"> + = Page 42 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.10.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TD width="40" class="list_title_bg_left"> <TD width="80" class="list_title_bg_left">ユーザコード <TD width="150" class="list_title_sort_bg_left">ユーザ 名 <TD width="*" class="list_title_bg_left"> 会 社 / 組 織 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 43

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.11 list_title_sort_bg_right 4.2.11.1 形 式 <TD class="list_title_sort_bg_right"> ~ 4.2.11.2 説 明 一 覧 ( 表 )で 強 調 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは 20px 固 定 で 設 定 されているため 変 更 することはできません <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 右 寄 せ になります タイトルの 表 示 位 置 を 任 意 指 定 中 央 表 示 左 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 通 常 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.11.3 関 連 するクラス を 参 照 してください 4.2.11.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 40 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 4.2.11.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.11.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_title_sort_bg_right"> + = Page 44 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.11.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TD width="40" class="list_title_bg_right"> <TD width="80" class="list_title_bg_right">ユーザコード <TD width="150" class="list_title_sort_bg_right">ユーザ 名 <TD width="*" class="list_title_bg_right"> 会 社 / 組 織 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 45

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.12 list_data_bg 4.2.12.1 形 式 <TD class="list_data_bg"> ~ 4.2.12.2 説 明 一 覧 ( 表 )の データ を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは 20px 固 定 で 設 定 されているため 変 更 することはできません <TD>~ 内 に 記 述 したデータの 表 示 位 置 は 中 央 表 示 になります データの 表 示 位 置 を 左 寄 せ 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.12.3 関 連 するクラス を 参 照 してください 4.2.12.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 48 list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 50 4.2.12.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.12.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_data_bg"> + = Page 46 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.12.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TR align="center"> <TD width="40" class="list_title_bg"><input type="checkbox" name="ck1"> <TD width="80" class="list_title_sort_bg">ユーザコード <TD width="150" class="list_title_bg">ユーザ 名 <TD width="*" class="list_title_bg"> 会 社 / 組 織 <TD class="list_data_bg"><input type="checkbox" name="ck1"> <TD class="list_data_bg">user001 <TD class="list_data_bg">ユーザ001 <TD class="list_data_bg"> 会 社 / 事 業 部 <TD class="list_data_bg"><input type="checkbox" name="ck1"> <TD class="list_data_bg">user002 <TD class="list_data_bg">ユーザ002 <TD class="list_data_bg"> 会 社 / 事 業 部 / 課 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 47

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.13 list_data_bg_left 4.2.13.1 形 式 <TD class="list_data_bg_left"> ~ 4.2.13.2 説 明 一 覧 ( 表 )の データ を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは 20px 固 定 で 設 定 されているため 変 更 することはできません <TD>~ 内 に 記 述 したデータの 表 示 位 置 は 左 寄 せ になります データの 表 示 位 置 を 中 央 表 示 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.13.3 関 連 するクラス を 参 照 してください 4.2.13.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 46 list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 50 4.2.13.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.13.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_data_bg_left"> + = Page 48 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.13.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TR align="left"> <TD width="40" class="list_title_bg"><input type="checkbox" name="ck1"> <TD width="80" class="list_title_sort_bg">ユーザコード <TD width="150" class="list_title_bg">ユーザ 名 <TD width="*" class="list_title_bg"> 会 社 / 組 織 <TD class="list_data_bg_left"><input type="checkbox" name="ck1"> <TD class="list_data_bg_left">user001 <TD class="list_data_bg_left">ユーザ001 <TD class="list_data_bg_left"> 会 社 / 事 業 部 <TD class="list_data_bg_left"><input type="checkbox" name="ck1"> <TD class="list_data_bg_left">user002 <TD class="list_data_bg_left">ユーザ002 <TD class="list_data_bg_left"> 会 社 / 事 業 部 / 課 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 49

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.14 list_data_bg_right 4.2.14.1 形 式 <TD class="list_data_bg_right"> ~ 4.2.14.2 説 明 一 覧 ( 表 )の データ を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは 20px 固 定 で 設 定 されているため 変 更 することはできません <TD>~ 内 に 記 述 したデータの 表 示 位 置 は 右 寄 せ になります データの 表 示 位 置 を 中 央 表 示 左 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.14.3 関 連 するクラス を 参 照 してください 4.2.14.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 46 list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 48 4.2.14.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.14.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="list_border_bg"> + <TD class="list_data_bg_right"> + = Page 50 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.14.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="list_border_bg"> <TR align="right"> <TD width="40" class="list_title_bg"><input type="checkbox" name="ck1"> <TD width="80" class="list_title_sort_bg">ユーザコード <TD width="150" class="list_title_bg">ユーザ 名 <TD width="*" class="list_title_bg"> 会 社 / 組 織 <TD class="list_data_bg_right"><input type="checkbox" name="ck1"> <TD class="list_data_bg_right">user001 <TD class="list_data_bg_right">ユーザ001 <TD class="list_data_bg_right"> 会 社 / 事 業 部 <TD class="list_data_bg_right"><input type="checkbox" name="ck1"> <TD class="list_data_bg_right">user002 <TD class="list_data_bg_right">ユーザ002 <TD class="list_data_bg_right"> 会 社 / 事 業 部 / 課 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 51

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.15 output 4.2.15.1 形 式 <TD class="output"> ~ 4.2.15.2 説 明 本 クラスを 使 用 すると 枠 と 背 景 色 付 きで データ が 表 示 されいます 枠 線 の 太 さは 1px に 設 定 されているので 変 更 することはできません 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 することができます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 することができます <TD>~ 内 に 記 述 したデータの 表 示 位 置 は <TD>タグの align 属 性 または タグの align 属 性 を 指 定 することで 任 意 に 変 更 することができます 4.2.15.3 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE width="100%"> <TD class="output" nowrap>/system このような 画 面 も class="output" を 使 用 して 作 成 しています Page 52 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.16 portal_tab_button 4.2.16.1 形 式 <TD class="portal_tab_button"> ~ 4.2.16.2 説 明 ポータル 画 面 などで タブ を 作 成 するときに 使 用 します 本 クラスを 使 用 することで タブのボタン 部 分 のデザインを 整 えます 以 下 の 4.2.16.3 関 連 するクラス を 使 用 してタブを 作 成 する 場 合 は 必 ず 本 クラスを 使 用 してください タブ の 作 成 方 法 については 4.2.16.5 使 用 例 を 参 照 してください 4.2.16.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab タブ 全 体 のデザインを 整 える 13 portal_tab_button_all 16 portal_tab_button 1 つのタブのデザインを 整 える 19 portal_outer タブの 外 枠 22 <TD> portal_tab_button_left タブの 左 側 55 portal_tab_button_right タブの 右 側 57 portal_tab_button_bg タブのボタン 部 分 の 背 景 色 ( 未 選 択 時 ) 59 portal_tab_button_active タブのボタン 部 分 の 背 景 色 ( 選 択 時 ) 61 <IMG> portal_tab_button_left タブの 左 側 の 画 像 97 portal_tab_button_right タブの 右 側 の 画 像 98 4.2.16.4 注 意 点 上 記 4.2.16.3 関 連 するクラス に 示 すクラスを 使 用 してタブを 作 成 した 場 合 本 クラスを 記 述 しないと 画 面 のデ ザインが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 してください ( 例 ) ひとつのタブ 全 体 を 囲 む <TD>タグに portal_tab_button クラスを 指 定 しなかった 場 合 タブと タブの 外 枠 との 境 界 線 が 離 れてしまう タブ の 作 成 方 法 については 4.2.16.5 使 用 例 を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 53

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.16.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します 4.2.16.5.1 タブを 作 成 する <!-- タブを 作 成 --> <TABLE class="portal_tab"> <!-- 1 つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif"> <TD class="portal_tab_button_bg"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> <!-- 2つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> : ( 省 略 ) : <!-- タブの 外 枠 を 表 示 --> <TABLE width="100%" class="portal_outer"> <TR height="100"><td> Page 54 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.17 portal_tab_button_left 4.2.17.1 形 式 <TD class="portal_tab_button_left"> ~ 4.2.17.2 説 明 ポータル 画 面 などで タブ を 作 成 するときに 使 用 します 本 クラスを 使 用 することで タブのボタン 左 側 部 分 のデザインを 整 えます 以 下 の 4.2.17.3 関 連 するクラス を 使 用 してタブを 作 成 する 場 合 は 必 ず 本 クラスを 使 用 してください タブ の 作 成 方 法 については 4.2.17.5 使 用 例 を 参 照 してください 4.2.17.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab タブ 全 体 のデザインを 整 える 13 portal_tab_button_all 16 portal_tab_button 1 つのタブのデザインを 整 える 19 portal_outer タブの 外 枠 22 <TD> portal_tab_button 1 つのタブのデザインを 整 える 53 portal_tab_button_right タブの 右 側 57 portal_tab_button_bg タブのボタン 部 分 の 背 景 色 ( 未 選 択 時 ) 59 portal_tab_button_active タブのボタン 部 分 の 背 景 色 ( 選 択 時 ) 61 <IMG> portal_tab_button_left タブの 左 側 の 画 像 97 portal_tab_button_right タブの 右 側 の 画 像 98 4.2.17.4 注 意 点 上 記 4.2.17.3 関 連 するクラス に 示 すクラスを 使 用 してタブを 作 成 する 場 合 本 クラスを 記 述 しないと 画 面 のデ ザインが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 してください ( 例 ) タブのボタン 左 側 部 分 の <TD>タグに portal_tab_button_left クラスを 指 定 しなかった 場 合 左 側 のボタン 部 分 のデザインが 崩 れてしまう タブ の 作 成 方 法 については 4.2.17.5 使 用 例 を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 55

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.17.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <!-- 1 つのタブを 作 成 --> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif"> <TD class="portal_tab_button_bg"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> Page 56 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.18 portal_tab_button_right 4.2.18.1 形 式 <TD class="portal_tab_button_right"> ~ 4.2.18.2 説 明 ポータル 画 面 などで タブ を 作 成 するときに 使 用 します 本 クラスを 使 用 することで タブのボタン 右 側 部 分 のデザインを 整 えます 以 下 の 4.2.18.3 関 連 するクラス を 使 用 してタブを 作 成 する 場 合 は 必 ず 本 クラスを 使 用 してください タブ の 作 成 方 法 については 4.2.18.5 使 用 例 を 参 照 してください 4.2.18.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab タブ 全 体 のデザインを 整 える 13 portal_tab_button_all 16 portal_tab_button 1 つのタブのデザインを 整 える 19 portal_outer タブの 外 枠 22 <TD> portal_tab_button 1 つのタブのデザインを 整 える 53 portal_tab_button_left タブの 左 側 55 portal_tab_button_bg タブのボタン 部 分 の 背 景 色 ( 未 選 択 時 ) 59 portal_tab_button_active タブのボタン 部 分 の 背 景 色 ( 選 択 時 ) 61 <IMG> portal_tab_button_left タブの 左 側 の 画 像 97 portal_tab_button_right タブの 右 側 の 画 像 98 4.2.18.4 注 意 点 上 記 4.2.18.3 関 連 するクラス に 示 すクラスを 使 用 してタブを 作 成 する 場 合 本 クラスを 記 述 しないと 画 面 のデ ザインが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 してください ( 例 ) タブのボタン 右 側 部 分 の <TD>タグに portal_tab_button_right クラスを 指 定 しなかった 場 合 右 側 のボタン 部 分 のデザインが 崩 れてしまう タブ の 作 成 方 法 については 4.2.18.5 使 用 例 を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 57

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.18.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <!-- 1 つのタブを 作 成 --> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif"> <TD class="portal_tab_button_bg"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> Page 58 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.19 portal_tab_button_bg 4.2.19.1 形 式 <TD class="portal_tab_button_bg"> ~ 4.2.19.2 説 明 ポータル 画 面 などで タブ を 作 成 するときに 使 用 します 未 選 択 時 のタブボタンを 表 示 します 本 クラスを 使 用 することで タブのボタン 中 央 部 分 のデザインを 整 えます 以 下 の 4.2.19.3 関 連 するクラス を 使 用 してタブを 作 成 する 場 合 は 必 ず 本 クラスを 使 用 してください タブ の 作 成 方 法 については 4.2.19.5 使 用 例 を 参 照 してください 4.2.19.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab タブ 全 体 のデザインを 整 える 13 portal_tab_button_all 16 portal_tab_button 1 つのタブのデザインを 整 える 19 portal_outer タブの 外 枠 22 <TD> portal_tab_button 1 つのタブのデザインを 整 える 53 portal_tab_button_left タブの 左 側 55 portal_tab_button_right タブの 右 側 57 portal_tab_button_active タブのボタン 部 分 の 背 景 色 ( 選 択 時 ) 61 <IMG> portal_tab_button_left タブの 左 側 の 画 像 97 portal_tab_button_right タブの 右 側 の 画 像 98 4.2.19.4 注 意 点 上 記 4.2.19.3 関 連 するクラス に 示 すクラスを 使 用 してタブを 作 成 する 場 合 本 クラスを 記 述 しないと 画 面 のデ ザインが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 してください ( 例 ) タブのボタン 中 央 部 分 の <TD>タグに portal_tab_button_bg クラスを 指 定 しなかった 場 合 右 側 のボタン 部 分 のデザインが 崩 れてしまう タブ の 作 成 方 法 については 4.2.19.5 使 用 例 を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 59

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.19.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <!-- 1 つのタブを 作 成 --> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif"> <TD class="portal_tab_button_bg"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> Page 60 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.20 portal_tab_button_active 4.2.20.1 形 式 <TD class="portal_tab_button_active"> ~ 4.2.20.2 説 明 ポータル 画 面 などで タブ を 作 成 するときに 使 用 します 選 択 時 のタブボタンを 表 示 します 本 クラスを 使 用 することで タブのボタン 中 央 部 分 のデザインを 整 えます 以 下 の 4.2.20.3 関 連 するクラス を 使 用 してタブを 作 成 する 場 合 は 必 ず 本 クラスを 使 用 してください タブ の 作 成 方 法 については 4.2.20.5 使 用 例 を 参 照 してください 4.2.20.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab タブ 全 体 のデザインを 整 える 13 portal_tab_button_all 16 portal_tab_button 1 つのタブのデザインを 整 える 19 portal_outer タブの 外 枠 22 <TD> portal_tab_button 1 つのタブのデザインを 整 える 53 portal_tab_button_left タブの 左 側 55 portal_tab_button_right タブの 右 側 57 portal_tab_button_bg タブのボタン 部 分 の 背 景 色 ( 未 選 択 時 ) 59 <IMG> portal_tab_button_left タブの 左 側 の 画 像 97 portal_tab_button_right タブの 右 側 の 画 像 98 4.2.20.4 注 意 点 上 記 4.2.20.3 関 連 するクラス に 示 すクラスを 使 用 してタブを 作 成 する 場 合 本 クラスを 記 述 しないと 画 面 のデ ザインが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 してください ( 例 ) タブのボタン 中 央 部 分 の <TD>タグに portal_tab_button_active クラスを 指 定 しなかった 場 合 右 側 のボタン 部 分 のデザインが 崩 れてしまう タブ の 作 成 方 法 については 4.2.20.5 使 用 例 を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 61

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.20.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <!-- 1 つのタブを 作 成 --> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif"> <TD class="portal_tab_button_active"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> Page 62 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.21 portlet_list_title_bg 4.2.21.1 形 式 <TD class="portlet_list_title_bg"> ~ 4.2.21.2 説 明 ポートレット 内 に 作 成 する 一 覧 ( 表 )に 関 して 通 常 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は <TD>タグの align 属 性 または タグの align 属 性 で 任 意 に 指 定 してください タイトルの 表 示 位 置 を 中 央 表 示 左 寄 せ 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 強 調 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.21.3 関 連 するクラス を 参 照 してください 4.2.21.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 65 portlet_list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 67 portlet_list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 69 portlet_list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 71 portlet_list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 73 portlet_list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 75 portlet_list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 77 4.2.21.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.21.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_title_bg"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 63

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.21.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TD class="portlet_list_title_bg" width="20"> <TD class="portlet_list_title_bg" width="200">タイトル <TD class="portlet_list_title_bg" width="150"> 場 所 <TD class="portlet_list_title_bg" align="center"> 時 間 4.2.21.5.1 中 央 表 示 にする データの 表 示 位 置 を 中 央 表 示 にする 場 合 は または <TD>タグに 属 性 align="center" を 指 定 します と 表 示 例 <TD class="portlet_list_title_bg" align="center">ユーザ 名 <TD>タグに 指 定 するクラスに portlet_list_title_bg_center を 使 用 しても 同 様 に 表 示 されます 詳 細 は 4.2.22 portlet_list_title_bg_center を 参 照 してください 4.2.21.5.2 左 寄 せで 表 示 する データの 表 示 位 置 を 左 寄 せ で 表 示 する 場 合 は または <TD>タグに 属 性 align="left" を 指 定 します <TD class="portlet_list_title_bg" align="left">ユーザ 名 <TD>タグに 指 定 するクラスに portlet_list_title_bg_left を 使 用 しても 同 様 に 表 示 されます 詳 細 は 4.2.23 portlet_list_title_bg_left を 参 照 してください 4.2.21.5.3 右 寄 せで 表 示 する データの 表 示 位 置 を 右 寄 せ で 表 示 する 場 合 は または <TD>タグに 属 性 align="right" を 指 定 します <TD class="portlet_list_title_bg" align="right">ユーザ 名 <TD>タグに 指 定 するクラスに portlet_list_title_bg_right を 使 用 しても 同 様 に 表 示 されます 詳 細 は 4.2.24 portlet_list_title_bg_right を 参 照 してください Page 64 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.22 portlet_list_title_bg_center 4.2.22.1 形 式 <TD class="portlet_list_title_bg_center"> ~ 4.2.22.2 説 明 ポートレット 内 に 作 成 する 一 覧 ( 表 )に 関 して 通 常 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 中 央 表 示 になります タイトルの 表 示 位 置 を 任 意 指 定 左 寄 せ 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 強 調 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.22.3 関 連 するクラス を 参 照 してください 4.2.22.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 63 portlet_list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 67 portlet_list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 69 portlet_list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 71 portlet_list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 73 portlet_list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 75 portlet_list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 77 4.2.22.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.22.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_title_bg_center"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 65

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.22.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TD class="portlet_list_title_bg_center" width="20"> <TD class="portlet_list_title_bg_center" width="200">タイトル <TD class="portlet_list_title_bg_center" width="150"> 場 所 <TD class="portlet_list_title_bg_center" align="center"> 時 間 Page 66 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.23 portlet_list_title_bg_left 4.2.23.1 形 式 <TD class="portlet_list_title_bg_left"> ~ 4.2.23.2 説 明 ポートレット 内 に 作 成 する 一 覧 ( 表 )に 関 して 通 常 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 左 寄 せ になります タイトルの 表 示 位 置 を 任 意 指 定 中 央 表 示 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 強 調 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.23.3 関 連 するクラス を 参 照 してください 4.2.23.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 63 portlet_list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 65 portlet_list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 69 portlet_list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 71 portlet_list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 73 portlet_list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 75 portlet_list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 77 4.2.23.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.23.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_title_bg_left"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 67

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.23.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TD class="portlet_list_title_bg_left" width="20"> <TD class="portlet_list_title_bg_left" width="200">タイトル <TD class="portlet_list_title_bg_left" width="150"> 場 所 <TD class="portlet_list_title_bg_left" align="center"> 時 間 Page 68 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.24 portlet_list_title_bg_right 4.2.24.1 形 式 <TD class="portlet_list_title_bg_right"> ~ 4.2.24.2 説 明 ポートレット 内 に 作 成 する 一 覧 ( 表 )に 関 して 通 常 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 右 寄 せ になります タイトルの 表 示 位 置 を 任 意 指 定 中 央 表 示 左 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 強 調 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.24.3 関 連 するクラス を 参 照 してください 4.2.24.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 63 portlet_list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 65 portlet_list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 67 portlet_list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 71 portlet_list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 73 portlet_list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 75 portlet_list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 77 4.2.24.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.24.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_title_bg_right"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 69

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.24.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TD class="portlet_list_title_bg_right" width="20"> <TD class="portlet_list_title_bg_right" width="200">タイトル <TD class="portlet_list_title_bg_right" width="150"> 場 所 <TD class="portlet_list_title_bg_right" align="center"> 時 間 Page 70 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.25 portlet_list_title_sort_bg 4.2.25.1 形 式 <TD class="portlet_list_title_sort_bg"> ~ 4.2.25.2 説 明 ポートレット 内 に 作 成 する 一 覧 ( 表 )に 関 して 強 調 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は <TD>タグの align 属 性 または タグの align 属 性 で 任 意 に 指 定 してください タイトルの 表 示 位 置 を 中 央 表 示 左 寄 せ 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 通 常 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.25.3 関 連 するクラス を 参 照 してください 4.2.25.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 63 portlet_list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 65 portlet_list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 67 portlet_list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 69 portlet_list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 73 portlet_list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 75 portlet_list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 77 4.2.25.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.25.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_title_sort_bg"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 71

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.25.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TD class="portlet_list_title_bg" width="20"> <TD class="portlet_list_title_sort_bg" width="200">タイトル <TD class="portlet_list_title_bg" width="150"> 場 所 <TD class="portlet_list_title_bg" align="center"> 時 間 4.2.25.5.1 中 央 表 示 にする データの 表 示 位 置 を 中 央 表 示 にする 場 合 は または <TD>タグに 属 性 align="center" を 指 定 します と 表 示 例 <TD class="portlet_list_title_sort_bg" align="center">ユーザ 名 <TD>タグに 指 定 するクラスに portlet_list_title_sort_bg_center を 使 用 しても 同 様 に 表 示 されます 詳 細 は 4.2.26 portlet_list_title_sort_bg_center を 参 照 してください 4.2.25.5.2 左 寄 せで 表 示 する データの 表 示 位 置 を 左 寄 せ で 表 示 する 場 合 は または <TD>タグに 属 性 align="left" を 指 定 します <TD class="portlet_list_title_sort_bg" align="left">ユーザ 名 <TD>タグに 指 定 するクラスに portlet_list_title_sort_bg_left を 使 用 しても 同 様 に 表 示 されます 詳 細 は 4.2.27 portlet_list_title_sort_bg_left を 参 照 してください 4.2.25.5.3 右 寄 せで 表 示 する データの 表 示 位 置 を 右 寄 せ で 表 示 する 場 合 は または <TD>タグに 属 性 align="right" を 指 定 します <TD class="portlet_list_title_sort_bg" align="right">ユーザ 名 <TD>タグに 指 定 するクラスに portlet_list_title_sort_bg_right を 使 用 しても 同 様 に 表 示 されます 詳 細 は 4.2.28 portlet_list_title_sort_bg_right を 参 照 してください Page 72 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.26 portlet_list_title_sort_bg_center 4.2.26.1 形 式 <TD class="portlet_list_title_sort_bg_center"> ~ 4.2.26.2 説 明 ポートレット 内 に 作 成 する 一 覧 ( 表 )に 関 して 強 調 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 中 央 表 示 になります タイトルの 表 示 位 置 を 任 意 指 定 左 寄 せ 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 通 常 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.26.3 関 連 するクラス を 参 照 してください 4.2.26.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 63 portlet_list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 65 portlet_list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 67 portlet_list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 69 portlet_list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 71 portlet_list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 75 portlet_list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 77 4.2.26.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.26.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_title_sort_bg_center"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 73

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.26.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TD class="portlet_list_title_bg_center" width="20"> <TD class="portlet_list_title_sort_bg_center" width="200">タイトル <TD class="portlet_list_title_bg_center" width="150"> 場 所 <TD class="portlet_list_title_bg_center"> 時 間 Page 74 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.27 portlet_list_title_sort_bg_left 4.2.27.1 形 式 <TD class="portlet_list_title_sort_bg_left"> ~ 4.2.27.2 説 明 ポートレット 内 に 作 成 する 一 覧 ( 表 )に 関 して 強 調 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 左 寄 せ になります タイトルの 表 示 位 置 を 任 意 指 定 中 央 表 示 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 通 常 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.27.3 関 連 するクラス を 参 照 してください 4.2.27.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 63 portlet_list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 65 portlet_list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 67 portlet_list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 69 portlet_list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 71 portlet_list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 73 portlet_list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 77 4.2.27.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.27.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_title_sort_bg_left"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 75

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.27.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TD class="portlet_list_title_bg_left" width="20"> <TD class="portlet_list_title_sort_bg_left" width="200">タイトル <TD class="portlet_list_title_bg_left" width="150"> 場 所 <TD class="portlet_list_title_bg_left"> 時 間 Page 76 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.28 portlet_list_title_sort_bg_right 4.2.28.1 形 式 <TD class="portlet_list_title_sort_bg_right"> ~ 4.2.28.2 説 明 ポートレット 内 に 作 成 する 一 覧 ( 表 )に 関 して 強 調 表 示 の タイトル を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したタイトルの 表 示 位 置 は 右 寄 せ になります タイトルの 表 示 位 置 を 任 意 指 定 中 央 表 示 左 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています また 通 常 表 示 の タイトル を 作 成 する 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.28.3 関 連 するクラス を 参 照 してください 4.2.28.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 63 portlet_list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 65 portlet_list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 67 portlet_list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 69 portlet_list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 71 portlet_list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 73 portlet_list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 75 4.2.28.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.28.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_title_bg_right"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 77

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.28.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TD class="portlet_list_title_bg_right" width="20"> <TD class="portlet_list_title_sort_bg_right" width="200">タイトル <TD class="portlet_list_title_bg_right" width="150"> 場 所 <TD class="portlet_list_title_bg_right"> 時 間 Page 78 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.29 portlet_list_data_bg 4.2.29.1 形 式 <TD class="portlet_list_data_bg"> ~ 4.2.29.2 説 明 ポートレット 内 に 表 示 する 一 覧 ( 表 )の データ を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したデータの 表 示 位 置 は 中 央 表 示 になります データの 表 示 位 置 を 左 寄 せ 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.29.3 関 連 するクラス を 参 照 してください 4.2.29.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 81 portlet_list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 83 portlet_list_data_gray_bg 一 覧 の 選 択 状 態 データ 85 portlet_attention_data_bg 一 覧 の 強 調 データ ( 文 字 色 : 赤 ) 87 4.2.29.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.29.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_data_bg"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 79

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.29.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TR align="center"> <TD class="portlet_list_title_bg" width="20"> <TD class="portlet_list_title_bg" width="200">タイトル <TD class="portlet_list_title_bg" width="150"> 場 所 <TD class="portlet_list_title_bg"> 時 間 <TD class="portlet_list_data_bg"> 仮 <TD class="portlet_list_data_bg"> 進 捗 会 議 <TD class="portlet_list_data_bg"> 会 議 室 <TD class="portlet_list_data_bg">17:00~18:00 <TD class="portlet_list_data_bg"> <TD class="portlet_list_data_bg"> 打 ち 合 わせ <TD class="portlet_list_data_bg"> 応 接 室 <TD class="portlet_list_data_bg">14:00~16:00 <TD class="portlet_list_data_bg"> <TD class="portlet_list_data_bg">j2ee 初 級 研 修 <TD class="portlet_list_data_bg">セミナールーム <TD class="portlet_list_data_bg">10:00~17:00 Page 80 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.30 portlet_list_data_bg_left 4.2.30.1 形 式 <TD class="portlet_list_data_bg_left"> ~ 4.2.30.2 説 明 ポートレット 内 に 表 示 する 一 覧 ( 表 )の データ を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したデータの 表 示 位 置 は 左 寄 せ になります データの 表 示 位 置 を 中 央 表 示 右 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.30.3 関 連 するクラス を 参 照 してください 4.2.30.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 79 portlet_list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 83 portlet_list_data_gray_bg 一 覧 の 選 択 状 態 データ 85 portlet_attention_data_bg 一 覧 の 強 調 データ ( 文 字 色 : 赤 ) 87 4.2.30.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.30.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_data_bg_left"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 81

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.30.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TR align="center"> <TD class="portlet_list_title_bg" width="20"> <TD class="portlet_list_title_bg" width="200">タイトル <TD class="portlet_list_title_bg" width="150"> 場 所 <TD class="portlet_list_title_bg"> 時 間 <TD class="portlet_list_data_bg_left"> 仮 <TD class="portlet_list_data_bg_left"> 進 捗 会 議 <TD class="portlet_list_data_bg_left"> 会 議 室 <TD class="portlet_list_data_bg_left">17:00~18:00 <TD class="portlet_list_data_bg_left"> <TD class="portlet_list_data_bg_left"> 打 ち 合 わせ <TD class="portlet_list_data_bg_left"> 応 接 室 <TD class="portlet_list_data_bg_left">14:00~16:00 <TD class="portlet_list_data_bg_left"> <TD class="portlet_list_data_bg_left">j2ee 初 級 研 修 <TD class="portlet_list_data_bg_left">セミナールーム <TD class="portlet_list_data_bg_left">10:00~17:00 Page 82 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.31 portlet_list_data_bg_right 4.2.31.1 形 式 <TD class="portlet_list_data_bg_right"> ~ 4.2.31.2 説 明 ポートレット 内 に 表 示 する 一 覧 ( 表 )の データ を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したデータの 表 示 位 置 は 右 寄 せ になります データの 表 示 位 置 を 中 央 表 示 左 寄 せ にする 場 合 は 別 途 クラスが 用 意 されています 以 下 の 4.2.31.3 関 連 するクラス を 参 照 してください 4.2.31.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 79 portlet_list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 81 portlet_list_data_gray_bg 一 覧 の 選 択 状 態 データ 85 portlet_attention_data_bg 一 覧 の 強 調 データ ( 文 字 色 : 赤 ) 87 4.2.31.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.31.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_data_bg_right"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 83

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.31.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TR align="center"> <TD class="portlet_list_title_bg" width="20"> <TD class="portlet_list_title_bg" width="200">タイトル <TD class="portlet_list_title_bg" width="150"> 場 所 <TD class="portlet_list_title_bg"> 時 間 <TD class="portlet_list_data_bg_right"> 仮 <TD class="portlet_list_data_bg_right"> 進 捗 会 議 <TD class="portlet_list_data_bg_right"> 会 議 室 <TD class="portlet_list_data_bg_right">17:00~18:00 <TD class="portlet_list_data_bg_right"> <TD class="portlet_list_data_bg_right"> 打 ち 合 わせ <TD class="portlet_list_data_bg_right"> 応 接 室 <TD class="portlet_list_data_bg_right">14:00~16:00 <TD class="portlet_list_data_bg_right"> <TD class="portlet_list_data_bg_right">j2ee 初 級 研 修 <TD class="portlet_list_data_bg_right">セミナールーム <TD class="portlet_list_data_bg_right">10:00~17:00 Page 84 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.32 portlet_list_data_gray_bg 4.2.32.1 形 式 <TD class="portlet_list_data_gray_bg"> ~ 4.2.32.2 説 明 ポートレット 内 に 表 示 する 一 覧 ( 表 )の 選 択 状 態 データ を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したデータの 表 示 位 置 は <TD>タグの align 属 性 または タグの align 属 性 で 任 意 に 指 定 してください その 他 通 常 のデータを 表 示 する 場 合 などは 別 途 クラスが 用 意 されています 以 下 の 4.2.32.3 関 連 するクラス を 参 照 してください 4.2.32.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 79 portlet_list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 81 portlet_list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 83 portlet_attention_data_bg 一 覧 の 強 調 データ ( 文 字 色 : 赤 ) 87 4.2.32.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.32.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_list_data_gray_bg"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 85

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.32.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TR align="center"> <TD class="portlet_list_title_bg" width="20"> <TD class="portlet_list_title_bg" width="200">タイトル <TD class="portlet_list_title_bg" width="150"> 場 所 <TD class="portlet_list_title_bg"> 時 間 <TD class="portlet_list_data_bg"> 仮 <TD class="portlet_list_data_bg_left"> 進 捗 会 議 <TD class="portlet_list_data_bg"> 会 議 室 <TD class="portlet_list_data_bg">17:00~18:00 <TR align="center"> <TD class="portlet_list_data_gray_bg"> <TD class="portlet_list_data_gray_bg" align="left"> 打 ち 合 わせ <TD class="portlet_list_data_gray_bg"> 応 接 室 <TD class="portlet_list_data_gray_bg">14:00~16:00 <TD class="portlet_list_data_bg"> <TD class="portlet_list_data_bg_left">j2ee 初 級 研 修 <TD class="portlet_list_data_bg">セミナールーム <TD class="portlet_list_data_bg">10:00~17:00 Page 86 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.2.33 portlet_attention_data_bg 4.2.33.1 形 式 <TD class="portlet_attention_data_bg"> ~ 4.2.33.2 説 明 ポートレット 内 に 表 示 する 一 覧 ( 表 )の 強 調 データ を 作 成 するときに 使 用 します 横 幅 は <TD>タグに width 属 性 を 指 定 することで 任 意 に 変 更 できます 高 さは <TD>タグに height 属 性 を 指 定 することで 任 意 に 変 更 できます <TD>~ 内 に 記 述 したデータは 赤 色 の 太 字 で 表 示 されます データの 表 示 位 置 は <TD>タグの align 属 性 または タグの align 属 性 で 任 意 に 指 定 してください その 他 通 常 のデータを 表 示 する 場 合 などは 別 途 クラスが 用 意 されています 以 下 の 4.2.33.3 関 連 するクラス を 参 照 してください 4.2.33.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 79 portlet_list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 81 portlet_list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 83 portlet_list_data_gray_bg 一 覧 の 選 択 状 態 データ 85 4.2.33.4 注 意 点 本 クラスを 使 用 して 一 覧 のタイトルを 作 成 する 場 合 は 必 ず<TABLE>タグに 4.2.33.3 関 連 するクラス に 示 すクラ スを 指 定 して 一 覧 の 枠 を 表 示 させてください また <TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください <TABLE>タグにクラスを 指 定 しなかったり 属 性 border を 指 定 すると デザインが 崩 れてしまいます 本 クラスと <TABLE>タグに 指 定 するクラスとの 組 み 合 わせによって 画 面 デザインガイドラインに 従 った 一 覧 の 作 成 を 実 現 することができます ( 例 ) 一 覧 のタイトル 部 分 <TABLE class="portlet_list_border_bg"> + <TD class="portlet_attention_data_bg"> + = 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 87

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2.33.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portlet_list_border_bg"> <TR align="center"> <TD class="portlet_list_title_bg" width="20"> <TD class="portlet_list_title_bg" width="200">タイトル <TD class="portlet_list_title_bg" width="150"> 場 所 <TD class="portlet_list_title_bg"> 時 間 <TD class="portlet_list_data_bg"> 仮 <TD class="portlet_list_data_bg_left"> 進 捗 会 議 <TD class="portlet_list_data_bg"> 会 議 室 <TD class="portlet_list_data_bg">17:00~18:00 <TR align="center"> <TD class="portlet_attention_data_bg"> <TD class="portlet_attention_data_bg" align="left"> 打 ち 合 わせ <TD class="portlet_attention_data_bg"> 応 接 室 <TD class="portlet_attention_data_bg">14:00~16:00 <TD class="portlet_list_data_bg"> <TD class="portlet_list_data_bg_left">j2ee 初 級 研 修 <TD class="portlet_list_data_bg">セミナールーム <TD class="portlet_list_data_bg">10:00~17:00 Page 88 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.3 <INPUT>に 指 定 するクラス ここでは HTML の<INPUT>タグで 属 性 class に 指 定 できるクラスについて 説 明 します 表 4-4 <INPUT>タグに 指 定 するクラス 一 覧 項 番 項 目 用 途 ページ 4.3.1 default 入 力 項 目 の 背 景 色 90 4.3.2 default_right 数 値 用 の 入 力 項 目 の 背 景 色 (テキスト 右 寄 せ) 91 4.3.3 button_bg ボタンの 背 景 画 像 92 4.3.4 output readonly 用 の 入 力 項 目 の 背 景 色 93 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 89

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.3.1 default 4.3.1.1 形 式 <INPUT class="default"> ~ </INPUT> 4.3.1.2 説 明 <INPUT>タグに 本 クラスを 記 述 すると 入 力 フォームに 背 景 色 を 付 けることができます <INPUT>タグの 属 性 value で 指 定 した 値 は 左 寄 せ で 表 示 されます 右 寄 せ で 表 示 したい 場 合 は クラス default_right を 使 用 してください ( 詳 細 は 4.3.2 default_right を 参 照 してください ) 4.3.1.3 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="edit"> <TD class="bottom"> <STRONG>ユーザ ID</STRONG><FONT class="attention">( 必 須 )</FONT> <TD class="bottom"> <INPUT class="default" type="text" name="userid" value="user001" size="30"> <TD class="bottom">ユーザ 名 <TD class="bottom"> <INPUT class="default" type="text" name="username" value="ユーザ1" size="50"> <TD class="bottom">パスワード <TD class="bottom"> <INPUT class="default" type="password" name="pass" value="user001" size="30"> Page 90 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.3.2 default_right 4.3.2.1 形 式 <INPUT class="default_right"> ~ </INPUT> 4.3.2.2 説 明 <INPUT>タグに 本 クラスを 記 述 すると 入 力 フォームに 背 景 色 を 付 けることができます <INPUT>タグの 属 性 value で 指 定 した 値 は 右 寄 せ で 表 示 されます 数 値 などを 右 寄 せで 表 示 したいときに 使 用 してください 通 常 表 示 ( 左 寄 せ) で 表 示 したい 場 合 は クラス default を 使 用 してください ( 詳 細 は 4.3.1 default を 参 照 してください ) 4.3.2.3 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="edit"> <TD class="bottom"> <STRONG> 商 品 名 </STRONG><FONT class="attention">( 必 須 )</FONT> <TD class="bottom"> <INPUT class="default" type="text" name="name" value="みかん" size="30"> <TD class="bottom"> 数 量 <TD class="bottom"> <INPUT class="default_right" type="text" name="num" value="10" size="5"> <TD class="bottom"> 値 段 <TD class="bottom"> <INPUT class="default_right" type="text" name="price" value="50,000" size="10"> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 91

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.3.3 button_bg 4.3.3.1 形 式 <INPUT class="button_bg"> ~ </INPUT> 4.3.3.2 説 明 ボタンの 背 景 画 像 を 表 示 します 以 下 の 4.3.3.3 関 連 するクラス に 示 すクラスを 使 用 して 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 する 場 合 は 必 ず 本 クラスを 指 定 してください 処 理 ボタン の 作 成 方 法 については 4.3.3.5 使 用 例 を 参 照 してください 4.3.3.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> button ボタンの 余 白 を 取 り 除 き デザインを 整 える 12 <TD> button_padding ボタンの 余 白 を 取 り 除 く 28 button_bg ボタンの 背 景 色 29 4.3.3.4 注 意 点 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するには 本 クラス(button_bg)と 上 記 4.3.3.3 関 連 するクラス に 示 すクラスを 全 て 記 述 しないと 画 面 のデザインが 崩 れてしまいます 必 ず 定 められた 全 てのクラスを 記 述 して 処 理 ボタンを 作 成 してください ( 例 ) <INPUT>タグに button_bg クラスを 指 定 しなかった 場 合 ボタン 部 品 (INPUT タグ) の 画 像 が 表 示 されない 4.3.3.5 使 用 例 <TABLE class="button"> <TD class="button_padding"><img src="images/standard/button_left.gif"> <TD class="button_bg"> <INPUT class="button_bg" name="regist" type="submit" value=" 登 録 "> <TD class="button_padding"><img src="images/standard/button_right.gif"> Page 92 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.3.4 output 4.3.4.1 形 式 <INPUT class="output" readonly> ~ </INPUT> 4.3.4.2 説 明 <INPUT>タグに 本 クラスを 記 述 すると 入 力 項 目 に 背 景 色 を 付 けることができます readonly 用 の 入 力 項 目 のときに 使 用 してください <INPUT>タグの 属 性 value で 指 定 した 値 は 左 寄 せ で 表 示 されます 4.3.4.3 注 意 点 本 クラスは 読 み 出 し 専 用 ( 入 力 不 可 )の <INPUT>タグ 用 に 用 意 されています <INPUT>タグに 本 クラスを 指 定 した 場 合 は 必 ず タグ 内 に readonly を 記 述 してください 4.3.4.4 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="edit"> <TD class="bottom">ユーザ ID <TD class="bottom"> <INPUT class="output" type="text" name="userid" value="user001" size="30" readonly> <TD class="bottom"> <STRONG>ユーザ 名 </STRONG><FONT class="attention">( 必 須 )</FONT> <TD class="bottom"> <INPUT class="default" type="text" name="username" size="50"> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 93

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.4 <TEXTAREA>に 指 定 するクラス ここでは HTML の<TEXTAREA>タグで 属 性 class に 指 定 できるクラスについて 説 明 します 表 4-5 <TEXTAREA>タグに 指 定 するクラス 一 覧 項 番 項 目 用 途 ページ 4.4.1 default 入 力 項 目 の 背 景 色 95 Page 94 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.4.1 default 4.4.1.1 形 式 <TEXTAREA class="default"> ~ </TEXTAREA> 4.4.1.2 説 明 <TEXTAREA>タグに 本 クラスを 記 述 すると 入 力 フォームに 背 景 色 を 付 けることができます <TEXTAREA>タグを 使 用 するときは デザインを 統 一 するために 必 ず 本 クラスを 使 用 してください 4.4.1.3 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="edit"> <TD class="bottom"> 備 考 <TD class="bottom"> <TEXTAREA class="default" name="note" cols="40" rows="5"></textarea> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 95

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.5 <IMG>に 指 定 するクラス ここでは HTML の<IMG>タグで 属 性 class に 指 定 できるクラスについて 説 明 します 表 4-6 <IMG>タグに 指 定 するクラス 一 覧 項 番 項 目 用 途 ページ 4.5.1 portal_tab_button_left ポータルのタブボタンの 左 側 97 4.5.2 portal_tab_button_right ポータルのタブボタンの 右 側 98 Page 96 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.5.1 portal_tab_button_left 4.5.1.1 形 式 <IMG class="portal_tab_button_left"> ~ </IMG> 4.5.1.2 説 明 ポータル 画 面 などで タブ を 作 成 するときに 使 用 します 本 クラスを 使 用 することで タブのボタン 左 側 部 分 の 画 像 を 整 えます 以 下 の 4.5.1.3 関 連 するクラス を 使 用 してタブを 作 成 する 場 合 は 必 ず 本 クラスを 使 用 してください タブ の 作 成 方 法 については 4.5.1.5 使 用 例 を 参 照 してください 4.5.1.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab タブ 全 体 のデザインを 整 える 13 portal_tab_button_all 16 portal_tab_button 1 つのタブのデザインを 整 える 19 portal_outer タブの 外 枠 22 <TD> portal_tab_button 1 つのタブのデザインを 整 える 53 portal_tab_button_left タブの 左 側 55 portal_tab_button_right タブの 右 側 57 portal_tab_button_bg タブのボタン 部 分 の 背 景 色 ( 未 選 択 時 ) 59 portal_tab_button_active タブのボタン 部 分 の 背 景 色 ( 選 択 時 ) 61 <IMG> portal_tab_button_right タブの 右 側 の 画 像 98 4.5.1.4 注 意 点 上 記 4.5.1.3 関 連 するクラス に 示 すクラスを 使 用 してタブを 作 成 する 場 合 本 クラスを 記 述 しないと 画 面 のデザ インが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 してください 4.5.1.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif"> <TD class="portal_tab_button_bg"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 97

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.5.2 portal_tab_button_right 4.5.2.1 形 式 <IMG class="portal_tab_button_right"> ~ </IMG> 4.5.2.2 説 明 ポータル 画 面 などで タブ を 作 成 するときに 使 用 します 本 クラスを 使 用 することで タブのボタン 左 側 部 分 の 画 像 を 整 えます 以 下 の 4.5.2.3 関 連 するクラス を 使 用 してタブを 作 成 する 場 合 は 必 ず 本 クラスを 使 用 してください タブ の 作 成 方 法 については 4.5.2.5 使 用 例 を 参 照 してください 4.5.2.3 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab タブ 全 体 のデザインを 整 える 13 portal_tab_button_all 16 portal_tab_button 1 つのタブのデザインを 整 える 19 portal_outer タブの 外 枠 22 <TD> portal_tab_button 1 つのタブのデザインを 整 える 53 portal_tab_button_left タブの 左 側 55 portal_tab_button_right タブの 右 側 57 portal_tab_button_bg タブのボタン 部 分 の 背 景 色 ( 未 選 択 時 ) 59 portal_tab_button_active タブのボタン 部 分 の 背 景 色 ( 選 択 時 ) 61 <IMG> portal_tab_button_left タブの 左 側 の 画 像 97 4.5.2.4 注 意 点 上 記 4.5.2.3 関 連 するクラス に 示 すクラスを 使 用 してタブを 作 成 する 場 合 本 クラスを 記 述 しないと 画 面 のデザ インが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 してください 4.5.2.5 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif"> <TD class="portal_tab_button_bg"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> Page 98 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.6 <SELECT>に 指 定 するクラス ここでは HTML の<SELECT>タグで 属 性 class に 指 定 できるクラスについて 説 明 します 表 4-7 <SELECT>タグに 指 定 するクラス 一 覧 項 番 項 目 用 途 ページ 4.6.1 default 選 択 項 目 の 背 景 色 100 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 99

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.6.1 default 4.6.1.1 形 式 <SELECT class="default"> ~ </SELECT> 4.6.1.2 説 明 <TEXTAREA>タグに 本 クラスを 記 述 すると 入 力 フォームに 背 景 色 を 付 けることができます <TEXTAREA>タグを 使 用 するときは デザインを 統 一 するために 必 ず 本 クラスを 使 用 してください 4.6.1.3 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="edit"> <TD class="bottom"> 出 身 地 <TD class="bottom"> <SELECT class="default" name="sel_from"> <OPTION value=""> <OPTION value="tokyo"> 東 京 <OPTION value="kanagawa"> 神 奈 川 <OPTION value="chiba"> 千 葉 <OPTION value="other">その 他 </SELECT> Page 100 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

4 クラスリファレンス 4.7 <FONT>に 指 定 するクラス ここでは HTML の<FONT>タグで 属 性 class に 指 定 できるクラスについて 説 明 します 表 4-8 <FONT>タグに 指 定 するクラス 一 覧 項 番 項 目 用 途 ページ 4.7.1 attention ( 必 須 ) の 文 字 フォント 102 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 101

intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.7.1 attention 4.7.1.1 形 式 <FORM class="attention"> ~ </FORM> 4.7.1.2 説 明 項 目 名 称 で ( 必 須 ) の 文 字 を 表 示 するときに 使 用 してください <FORM>タグに 本 クラスを 指 定 すると <FORM>~</FORM> 内 に 記 述 した 文 字 が 赤 色 の 太 文 字 で 表 示 されます 必 須 項 目 を 作 成 する 場 合 は 以 下 の 4.7.1.3 使 用 例 に 従 って 必 ず 本 クラスを 使 用 してください 4.7.1.3 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE class="edit"> <TD class="bottom"> <STRONG>ユーザ ID</STRONG><FONT class="attention">( 必 須 )</FONT> <TD class="bottom"> <INPUT class="default" type="text" name="userid" value="user001" size="30"> <TD class="bottom"> <STRONG>ユーザ 名 </STRONG><FONT class="attention">( 必 須 )</FONT> <TD class="bottom"> <INPUT class="default" type="text" name="username" value="ユーザ1" size="50"> <TD class="bottom">パスワード <TD class="bottom"> <INPUT class="default" type="password" name="pass" value="user001" size="30"> Page 102 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

5 用 途 別 リファレンス 5 用 途 別 リファレンス 使 用 目 的 から 画 面 を 作 成 する 上 で 必 要 となるクラスを 説 明 します 表 5-1 用 途 別 リファレンス 一 覧 項 番 用 途 ページ 5.1 表 示 幅 100%の 一 覧 を 作 成 する 104 5.2 一 覧 の 表 示 幅 を 変 更 する 105 5.3 ポートレット 内 に 一 覧 ( 表 )を 作 成 する 106 5.4 いろいろな 部 品 を 囲 む 枠 を 作 成 する 107 5.5 ボタンを 作 成 する 108 5.6 タブを 作 成 する 109 5.7 入 力 項 目 を 作 成 する 110 5.8 入 力 項 目 のラベルを 作 成 する 112 5.9 必 須 項 目 のラベルを 作 成 する 113 5.10 <INPUT>タグで 入 力 フォームを 作 成 する 114 5.11 右 寄 せ 表 示 の 入 力 フォームを 作 成 する 115 5.12 読 み 出 し 専 用 の 入 力 フォームを 作 成 する 116 5.13 <TEXTAREA>タグで 入 力 フォームを 作 成 する 117 5.14 <SELECT>タグで 選 択 項 目 を 作 成 する 118 5.15 <TD>タグに 外 枠 と 背 景 色 を 付 けて 表 示 する 119 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 103

intra-mart スタイルシート 仕 様 書 (Version 6.1) 5.1 表 示 幅 100%の 一 覧 を 作 成 する 表 示 幅 を 100% 固 定 で 一 覧 を 作 成 するには <TABLE>タグにクラス list_border_bg を 指 定 します <TABLE>タグに クラス list_border_bg を 指 定 すると 横 幅 が 100% 固 定 で 設 定 されているので 変 更 することは できません その 他 以 下 の 5.1.1 関 連 するクラス に 示 すクラスを 使 用 してください ( 詳 細 は 各 クラスを 参 照 してください ) 横 幅 を 指 定 して 一 覧 を 作 成 する 場 合 は 5.2 一 覧 の 表 示 幅 を 変 更 する を 参 照 してください 5.1.1 関 連 するクラス タグ クラス 説 明 ページ <TABLE> list_border_bg 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 7 <TD> list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 40 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 46 list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 48 list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 50 5.1.2 使 用 例 <TABLE class="list_border_bg"> <TD width="40" class="list_title_bg_center"><input type="checkbox" name="ck1"> <TD width="80" class="list_title_sort_bg_center"><b>ユーザコード</b> <TD width="150" class="list_title_bg_center">ユーザ 名 <TD width="*" class="list_title_bg_center"> 会 社 / 組 織 <TD class="list_data_bg"><input type="checkbox" name="ck1"> <TD class="list_data_bg">user001 <TD class="list_data_bg">ユーザ001 <TD class="list_data_bg_left"> 会 社 / 事 業 部 <TD class="list_data_bg"><input type="checkbox" name="ck1"> <TD class="list_data_bg">user002 <TD class="list_data_bg">ユーザ002 <TD class="list_data_bg_left"> 会 社 / 事 業 部 / 課 Page 104 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

5 用 途 別 リファレンス 5.2 一 覧 の 表 示 幅 を 変 更 する 表 示 幅 を 指 定 して 一 覧 を 作 成 するには <TABLE>タグにクラス table_border_bg を 指 定 します 表 示 幅 は 設 定 されていないので <TABLE>タグに 属 性 width を 記 述 して 任 意 に 指 定 してください その 他 以 下 の 5.1.1 関 連 するクラス に 示 すクラスを 使 用 してください ( 詳 細 は 各 クラスを 参 照 してください ) 表 示 幅 を 100% 固 定 で 一 覧 を 作 成 する 場 合 は 5.1 表 示 幅 100%の 一 覧 を 作 成 する を 参 照 してください 5.2.1 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_bg 一 覧 ( 表 )の 外 枠 ( 表 示 幅 任 意 指 定 ) 5 <TD> list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 30 list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 32 list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 34 list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 36 list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 38 list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 40 list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 42 list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 44 list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 46 list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 48 list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 50 5.2.2 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <TABLE width="550" class="table_border_bg"> <TD width="40" class="list_title_bg_center"><input type="checkbox" name="ck1"> <TD width="80" class="list_title_sort_bg_center"><b>ユーザコード</b> <TD width="150" class="list_title_bg_center">ユーザ 名 <TD width="*" class="list_title_bg_center"> 会 社 / 組 織 <TD class="list_data_bg"><input type="checkbox" name="ck1"> <TD class="list_data_bg">user001 <TD class="list_data_bg">ユーザ001 <TD class="list_data_bg_left"> 会 社 / 事 業 部 <TD class="list_data_bg"><input type="checkbox" name="ck1"> <TD class="list_data_bg">user002 <TD class="list_data_bg">ユーザ002 <TD class="list_data_bg_left"> 会 社 / 事 業 部 / 課 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 105

intra-mart スタイルシート 仕 様 書 (Version 6.1) 5.3 ポートレット 内 に 一 覧 ( 表 )を 作 成 する ポートレット 内 に 一 覧 ( 表 )を 作 成 するには <TABLE>タグにクラス portlet_list_border_bg を 指 定 します <TABLE>タグに クラス portlet_list_border_bg を 指 定 すると 横 幅 は 100% 固 定 で 設 定 されているため 変 更 できません ( 画 面 の 幅 いっぱいに 表 示 されます ) 表 示 幅 を 変 更 したい 場 合 は 枠 線 なしの<TABLE>タグのセルとして<TD>タグ 内 に 本 クラスを 使 用 した<TABLE>タ グを 記 述 する 方 法 があります ( 詳 細 は 4.1.10.4 使 用 例 を 参 照 してください ) その 他 以 下 の 5.3.1 関 連 するクラス に 示 すクラスを 使 用 してください ( 詳 細 は 各 クラスを 参 照 してください ) 5.3.1 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portlet_list_border_bg ポートレット 一 覧 の 外 枠 ( 表 示 幅 100% 固 定 ) 24 <TD> portlet_list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) 63 portlet_list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) 65 portlet_list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) 67 portlet_list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) 69 portlet_list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) 71 portlet_list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) 73 portlet_list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) 75 portlet_list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) 77 portlet_list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) 79 portlet_list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) 81 portlet_list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) 83 portlet_list_data_gray_bg 一 覧 の 選 択 状 態 データ 85 portlet_attention_data_bg 一 覧 の 強 調 データ ( 文 字 色 : 赤 ) 87 5.3.2 使 用 例 <TABLE class="portlet_list_border_bg"> <TD class="portlet_list_title_bg"> <TD class="portlet_list_title_bg_center">タイトル <TD class="portlet_list_title_bg_center"> 場 所 <TD class="portlet_list_title_bg_center"> 時 間 <TD class="portlet_list_data_bg"> 仮 <TD class="portlet_list_data_bg_left"> 進 捗 会 議 <TD class="portlet_list_data_bg"> 会 議 室 <TD class="portlet_list_data_bg">17:00~18:00 : ( 省 略 ) : Page 106 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

5 用 途 別 リファレンス 5.4 いろいろな 部 品 を 囲 む 枠 を 作 成 する 全 体 を 囲 う 枠 だけを 表 示 するには <TABLE>タグにクラス table_border_line を 指 定 します 表 示 幅 は 設 定 されていないので <TABLE>タグに 属 性 width および 属 性 height を 指 定 して 任 意 に 変 更 でき ます 5.4.1 関 連 するクラス タグ クラス 説 明 ページ <TABLE> table_border_line <TABLE>で 囲 った 外 枠 のみ 表 示 9 5.4.2 使 用 例 <TABLE class="table_border_line" height="100" width="450"> <TD align="center"> <TABLE> <TD width="30%" align="center" nowrap>ユーザ ID <TD> <IMART type="input" class="default" style="text" name="name_srch" size="30" value=name_srch> </IMART> <TD> <IMART type="imicon" name=" 検 索 " href="javascript:onsearchaccount();" icon="images/standard/search.gif"> </IMART> width="450" height="100" <TABLE>で 囲 った 外 枠 部 分 (border)を 表 示 している 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 107

intra-mart スタイルシート 仕 様 書 (Version 6.1) 5.5 ボタンを 作 成 する 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するには 以 下 の 5.5.1 関 連 するクラス に 示 すクラ スを 使 用 します 詳 細 は 各 クラスを 参 照 してください 5.5.1 関 連 するクラス タグ クラス 説 明 ページ <TABLE> button ボタンの 余 白 を 取 り 除 き デザインを 整 える 12 <TD> button_padding ボタンの 余 白 を 取 り 除 く 28 button_bg ボタンの 背 景 色 29 <INPUT> button_bg ボタンの 背 景 色 (タイル 状 ) 92 5.5.2 使 用 例 <TABLE class="button"> <TD class="button_padding"><img src="images/standard/button_left.gif"> <TD class="button_bg"> <INPUT class="button_bg" name="regist" type="submit" value=" 登 録 "> <TD class="button_padding"><img src="images/standard/button_right.gif"> Page 108 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

5 用 途 別 リファレンス 5.6 タブを 作 成 する ポータル 画 面 などで タブ を 作 成 するには 以 下 の 5.6.1 関 連 するクラス に 示 すクラスを 使 用 します ( 詳 細 は 各 クラスを 参 照 してください ) 5.6.1 関 連 するクラス タグ クラス 説 明 ページ <TABLE> portal_tab タブ 全 体 のデザインを 整 える 13 portal_tab_button 1 つのタブのデザインを 整 える 19 portal_outer タブの 外 枠 22 <TD> portal_tab_button タブのボタン 部 分 のデザインを 整 える 53 portal_tab_button_left タブの 左 側 55 portal_tab_button_right タブの 右 側 57 portal_tab_button_bg タブのボタン 部 分 の 背 景 色 ( 未 選 択 時 ) 59 portal_tab_button_active タブのボタン 部 分 の 背 景 色 ( 選 択 時 ) 61 <IMG> portal_tab_button_left タブの 左 側 の 画 像 97 portal_tab_button_right タブの 右 側 の 画 像 98 5.6.2 使 用 例 <!-- タブを 作 成 --> <TABLE class="portal_tab"> <!-- 1 つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> <TABLE class="portal_tab_button"> <TD class="portal_tab_button_left"> <IMG class="portal_tab_button_left" src="images/standard/portal_tab_left.gif"> <TD class="portal_tab_button_bg"><a href="#"> 自 社 </A> <TD class="portal_tab_button_right"> <IMG class="portal_tab_button_right" src="images/standard/portal_tab_right.gif"> <!-- 2つ 目 のタブを 作 成 --> <TD class="portal_tab_button"> : ( 省 略 ) : <!-- タブの 外 枠 を 表 示 --> <TABLE width="100%" class="portal_outer"> <TR height="100"><td> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 109

intra-mart スタイルシート 仕 様 書 (Version 6.1) 5.7 入 力 項 目 を 作 成 する 登 録 系 や 更 新 系 の 画 面 で ラベルや 入 力 項 目 を 作 成 するには 以 下 の 5.7.1 関 連 するクラス に 示 すクラスを 使 用 します ( 詳 細 は 各 クラスを 参 照 してください ) 入 力 項 目 の 周 りを 囲 む <TABLE>タグには 必 ず class="edit" を 指 定 してください また 以 下 の 表 5-2 入 力 項 目 を 作 成 する 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 して 入 力 項 目 を 作 成 する 場 合 にも 周 りを 囲 む<TABLE>には 必 ず class="edit" を 指 定 してください 表 5-2 入 力 項 目 を 作 成 する 画 面 共 通 モジュール 入 力 項 目 部 品 項 目 名 入 力 フィールド 選 択 ボックス 画 面 共 通 モジュール <IMART type="imitemname"></imart> <imarttag:imartitemnametd> <IMART type="iminputtd"></imart> <imarttag:imartinputtd> <IMART type="imselecttd"></imart> <imarttag:imartselecttd> 5.7.1 関 連 するクラス タグ クラス 説 明 ページ <TABLE> edit 登 録 更 新 系 画 面 でラベル& 入 力 項 目 を 囲 む 10 <TD> bottom ラベル& 入 力 項 目 のアンダーライン 27 <INPUT> default 入 力 項 目 の 背 景 色 90 default_right 数 値 用 の 入 力 項 目 の 背 景 色 (テキスト 右 寄 せ) 91 output readonly 用 の 入 力 項 目 の 背 景 色 93 <TEXTAREA> default 入 力 項 目 の 背 景 色 95 <SELECT> default 選 択 項 目 の 背 景 色 100 <FONT> attention ( 必 須 ) の 文 字 フォント 102 Page 110 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

5 用 途 別 リファレンス 5.7.2 使 用 例 5.7.2.1 関 連 するクラスを 使 用 した 場 合 <TABLE class="edit"> <TD class="bottom">ユーザ ID <TD class="bottom"> <INPUT class="default" type="text" name="userid" size="30"> <TD class="bottom"> <STRONG>ユーザ 名 </STRONG><FONT class="attention">( 必 須 )</FONT> <TD class="bottom"> <INPUT class="default" type="text" name="username" size="50"> 5.7.2.2 入 力 項 目 を 作 成 する 画 面 共 通 モジュールを 使 用 した 場 合 <TABLE class="edit"> <IMART type="imitemname" name="ユーザ ID"></IMART> <IMART type="iminputtd" style="text" name="userid" size="30" value="user00011" readonly> </IMART> <IMART type="imitemname" name="ユーザ 名 " require></imart> <IMART type="iminputtd" style="text" name="username" size="50" value="ユーザ 00011"> </IMART> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 111

intra-mart スタイルシート 仕 様 書 (Version 6.1) 5.8 入 力 項 目 のラベルを 作 成 する 登 録 系 や 更 新 系 の 画 面 で 入 力 項 目 のラベルを 作 成 するには 以 下 の 5.7.1 関 連 するクラス に 示 すクラスを 使 用 します ( 詳 細 は 各 クラスを 参 照 してください ) 入 力 項 目 の 周 りを 囲 む <TABLE>タグには 必 ず class="edit" を 指 定 してください また 以 下 の 表 5-3 ラベルを 作 成 する 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 して 入 力 項 目 のラベルを 作 成 する 場 合 にも 周 りを 囲 む<TABLE>には 必 ず class="edit" を 指 定 してください 表 5-3 ラベルを 作 成 する 画 面 共 通 モジュール 入 力 項 目 部 品 項 目 名 画 面 共 通 モジュール <IMART type="imitemname"></imart> <imarttag:imartitemnametd> 5.8.1 関 連 するクラス タグ クラス 説 明 ページ <TABLE> edit 登 録 更 新 系 画 面 でラベル& 入 力 項 目 を 囲 む 10 <TD> bottom ラベル& 入 力 項 目 のアンダーライン 27 5.8.2 使 用 例 <TABLE class="edit"> <TD class="bottom">ユーザ ID <TD class="bottom"> <INPUT class="default" type="text" name="userid" size="30"> <TABLE class="edit"> <IMART type="imitemname" name="ユーザ ID"></IMART> <IMART type="iminputtd" style="text" name="userid" size="30" value="user00011" readonly> </IMART> Page 112 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

5 用 途 別 リファレンス 5.9 必 須 項 目 のラベルを 作 成 する 登 録 系 や 更 新 系 の 画 面 で 必 須 項 目 のラベルを 作 成 するには 以 下 の 5.7.1 関 連 するクラス に 示 すクラスを 使 用 します ( 詳 細 は 各 クラスを 参 照 してください ) 入 力 項 目 の 周 りを 囲 む <TABLE>タグには 必 ず class="edit" を 指 定 してください また 以 下 の 表 5-3 ラベルを 作 成 する 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 して 必 須 項 目 のラベルを 作 成 する 場 合 にも 周 りを 囲 む<TABLE>には 必 ず class="edit" を 指 定 してください 表 5-4 ラベルを 作 成 する 画 面 共 通 モジュール 入 力 項 目 部 品 項 目 名 画 面 共 通 モジュール <IMART type="imitemname"></imart> <imarttag:imartitemnametd> 5.9.1 関 連 するクラス タグ クラス 説 明 ページ <TABLE> edit 登 録 更 新 系 画 面 でラベル& 入 力 項 目 を 囲 む 10 <TD> bottom ラベル& 入 力 項 目 のアンダーライン 27 <FONT> attention ( 必 須 ) の 文 字 フォント 102 5.9.2 使 用 例 <TABLE class="edit"> <TD class="bottom"> <STRONG>ユーザ 名 </STRONG><FONT class="attention">( 必 須 )</FONT> <TD class="bottom"> <INPUT class="default" type="text" name="username" size="50"> <TABLE class="edit"> <IMART type="imitemname" name="ユーザ 名 " require></imart> <IMART type="iminputtd" style="text" name="username" size="50" value="ユーザ 00011"> </IMART> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 113

intra-mart スタイルシート 仕 様 書 (Version 6.1) 5.10 <INPUT>タグで 入 力 フォームを 作 成 する <INPUT>タグで 入 力 フォームを 作 成 するには <INPUT>タグに 必 ず class="default" を 指 定 します ( 詳 細 は 各 クラスを 参 照 してください ) <INPUT>タグの 属 性 value で 指 定 した 値 は 左 寄 せ で 表 示 されます 5.10.1 関 連 するクラス タグ クラス 説 明 ページ <TD> default 入 力 項 目 の 背 景 色 90 5.10.2 使 用 例 <INPUT class="default" type="text" name="userid" value="user001" size="30"> Page 114 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

5 用 途 別 リファレンス 5.11 右 寄 せ 表 示 の 入 力 フォームを 作 成 する <INPUT>タグで 右 寄 せ 表 示 の 入 力 フォームを 作 成 するには <INPUT>タグに 必 ず class="default_right" を 指 定 します ( 詳 細 は 各 クラスを 参 照 してください ) <INPUT>タグの 属 性 value で 指 定 した 値 は 右 寄 せ で 表 示 されます 5.11.1 関 連 するクラス タグ クラス 説 明 ページ <TD> default_right 数 値 用 の 入 力 項 目 の 背 景 色 (テキスト 右 寄 せ) 91 5.11.2 使 用 例 <INPUT class="default_right" type="text" name="price" value="5000" size="10"> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 115

intra-mart スタイルシート 仕 様 書 (Version 6.1) 5.12 読 み 出 し 専 用 の 入 力 フォームを 作 成 する <INPUT>タグで 読 み 出 し 専 用 の 入 力 フォームを 作 成 するには <INPUT>タグに 必 ず class="output" と 属 性 readonly を 指 定 します ( 詳 細 は 各 クラスを 参 照 してください ) 5.12.1 関 連 するクラス タグ クラス 説 明 ページ <TD> output readonly 用 の 入 力 項 目 の 背 景 色 93 5.12.2 使 用 例 <INPUT class="output" type="text" name="userid" value="user001" size="30" readonly> Page 116 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

5 用 途 別 リファレンス 5.13 <TEXTAREA>タグで 入 力 フォームを 作 成 する <TEXTAREA>タグで 複 数 行 入 力 可 能 な 入 力 フォームを 作 成 するには <TEXTAREA>タグに 必 ず class="default" を 指 定 します ( 詳 細 は 各 クラスを 参 照 してください ) 5.13.1 関 連 するクラス タグ クラス 説 明 ページ <TEXTAREA> default 入 力 項 目 の 背 景 色 95 5.13.2 使 用 例 <TEXTAREA class="default" name="note" cols="40" rows="5"></textarea> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 117

intra-mart スタイルシート 仕 様 書 (Version 6.1) 5.14 <SELECT>タグで 選 択 項 目 を 作 成 する <SELECT>タグで 選 択 項 目 を 作 成 するには <SELECT>タグに 必 ず class="default" を 指 定 します ( 詳 細 は 各 クラスを 参 照 してください ) 5.14.1 関 連 するクラス タグ クラス 説 明 ページ <SELECT> default 入 力 項 目 の 背 景 色 95 5.14.2 使 用 例 <SELECT class="default" name="sel_from"> <OPTION value=""> <OPTION value="tokyo"> 東 京 <OPTION value="kanagawa"> 神 奈 川 <OPTION value="chiba"> 千 葉 <OPTION value="other">その 他 </SELECT> Page 118 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

5 用 途 別 リファレンス 5.15 <TD>タグに 外 枠 と 背 景 色 を 付 けて 表 示 する <TD>タグに 枠 と 背 景 色 を 付 けて 表 示 するには <TD>タグに class="output" を 指 定 します 枠 線 の 太 さは 1px に 設 定 されているので 変 更 することはできません ( 詳 細 は 各 クラスを 参 照 してください ) 5.15.1 関 連 するクラス タグ クラス 説 明 ページ <TD> output 外 枠 と 背 景 色 付 きの 出 力 項 目 52 5.15.2 使 用 例 <TABLE width="100%"> <TD class="output" nowrap>/system 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 119

intra-mart スタイルシート 仕 様 書 (Version 6.1) Page 120 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved.

スタイルシート 仕 様 書 Version 6.1 初 版 : July 31, 2007 Copyright 2000-2007 ( 株 )NTT データイントラマート All rights Reserved. TEL: 03-5549-2821 FAX: 03-5549-2816 URL: http://www.intra-mart.jp/

2026 © docsplayer.net プライバシー | 利用規約 | フィードバック