スタイルシート仕様書

スタイルシート 仕 様 書 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.