スタイルシート仕様書

Transcription

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

2

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

4

5 目 次 << 目 次 >> 1 はじめに 概 要 JavaEE 開 発 モデルのprefix 属 性 デザインスタイルシートタグの 設 定 カラーパターン 標 準 カラーパターン カラーコントラスト スタイルシート スタイルシートの 注 意 点 用 語 スタイルシートファイル クラスリファレンス <TABLE>に 指 定 するクラス table_border_bg list_border_bg table_border_line edit button portal_tab portal_tab_button_all portal_tab_button portal_outer portlet_list_border_bg <TD>に 指 定 するクラス bottom button_padding button_bg list_title_bg list_title_bg_center list_title_bg_left list_title_bg_right list_title_sort_bg list_title_sort_bg_center list_title_sort_bg_left list_title_sort_bg_right list_data_bg list_data_bg_left list_data_bg_right output portal_tab_button portal_tab_button_left portal_tab_button_right portal_tab_button_bg portal_tab_button_active portlet_list_title_bg portlet_list_title_bg_center...65 作 成 者 : 株 式 会 社 NTT データ イントラマート Page i

6 intra-mart スタイルシート 仕 様 書 (Version 6.1) portlet_list_title_bg_left portlet_list_title_bg_right portlet_list_title_sort_bg portlet_list_title_sort_bg_center portlet_list_title_sort_bg_left portlet_list_title_sort_bg_right portlet_list_data_bg portlet_list_data_bg_left portlet_list_data_bg_right portlet_list_data_gray_bg portlet_attention_data_bg <INPUT>に 指 定 するクラス default default_right button_bg output <TEXTAREA>に 指 定 するクラス default <IMG>に 指 定 するクラス portal_tab_button_left portal_tab_button_right <SELECT>に 指 定 するクラス default <FONT>に 指 定 するクラス attention 用 途 別 リファレンス 表 示 幅 100%の 一 覧 を 作 成 する 関 連 するクラス 使 用 例 一 覧 の 表 示 幅 を 変 更 する 関 連 するクラス 使 用 例 ポートレット 内 に 一 覧 ( 表 )を 作 成 する 関 連 するクラス 使 用 例 いろいろな 部 品 を 囲 む 枠 を 作 成 する 関 連 するクラス 使 用 例 ボタンを 作 成 する 関 連 するクラス 使 用 例 タブを 作 成 する 関 連 するクラス 使 用 例 入 力 項 目 を 作 成 する 関 連 するクラス 使 用 例 Page ii Copyright ( 株 )NTT データイントラマート All rights Reserved.

7 目 次 5.8 入 力 項 目 のラベルを 作 成 する 関 連 するクラス 使 用 例 必 須 項 目 のラベルを 作 成 する 関 連 するクラス 使 用 例 <INPUT>タグで 入 力 フォームを 作 成 する 関 連 するクラス 使 用 例 右 寄 せ 表 示 の 入 力 フォームを 作 成 する 関 連 するクラス 使 用 例 読 み 出 し 専 用 の 入 力 フォームを 作 成 する 関 連 するクラス 使 用 例 <TEXTAREA>タグで 入 力 フォームを 作 成 する 関 連 するクラス 使 用 例 <SELECT>タグで 選 択 項 目 を 作 成 する 関 連 するクラス 使 用 例 <TD>タグに 外 枠 と 背 景 色 を 付 けて 表 示 する 関 連 するクラス 使 用 例 作 成 者 : 株 式 会 社 NTT データ イントラマート Page iii

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

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

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

11 3 スタイルシート 3 スタイルシート 3.1 スタイルシートの 注 意 点 ブラウザによって 未 対 応 のスタイルシートもあるため 同 じ 画 面 でも 動 作 や 見 栄 えが 異 なる 場 合 があります また 同 じブラウザでもバージョンによって 動 作 や 見 栄 えが 異 なる 場 合 があります 新 しくスタイルシートの 定 義 を 行 うときは 多 種 のブラウザで 確 認 することをお 奨 めします どのブラウザを 使 用 しても 全 体 的 に 見 栄 えがいいように スタイルシートの 定 義 をしてください 弊 社 で 動 作 検 証 済 みバージョンのブラウザ( 推 奨 )は 下 記 の 通 りです InternetExplorer6 Netscape 用 語 スタイルシートの 基 本 的 な 用 語 について 以 下 に 定 義 します ( 例 ) 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

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

13 4 クラスリファレンス table_border_bg 形 式 <TABLE class="table_border_bg"> ~ 説 明 一 覧 ( 表 ) を 作 成 するときの 枠 として 使 用 します 横 幅 は<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>タグのクラスについては 関 連 するクラス を 参 照 してください 関 連 するクラス タグ クラス 説 明 ページ <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 一 覧 のデータ 部 ( 右 寄 せ) 注 意 点 本 クラスを 記 述 した<TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 5

14 intra-mart スタイルシート 仕 様 書 (Version 6.1) 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <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 ( 株 )NTT データイントラマート All rights Reserved.

15 4 クラスリファレンス list_border_bg 形 式 <TABLE class="list_border_bg"> ~ 説 明 一 覧 ( 表 ) を 作 成 するときの 枠 として 使 用 します 横 幅 は 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>タグのクラスについては 関 連 するクラス を 参 照 してください 関 連 するクラス タグ クラス 説 明 ページ <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 一 覧 のデータ 部 ( 右 寄 せ) 注 意 点 本 クラスを 記 述 した<TABLE>タグには 属 性 border により 枠 線 の 太 さを 指 定 しないでください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 7

16 intra-mart スタイルシート 仕 様 書 (Version 6.1) 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <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 ( 株 )NTT データイントラマート All rights Reserved.

17 4 クラスリファレンス table_border_line 形 式 <TABLE class="table_border_line"> ~ 説 明 全 体 を 囲 う 枠 だけを 表 示 するときに 使 用 します <TABLE>タグに 属 性 width および 属 性 height を 指 定 することで 任 意 にサイズを 変 更 できます 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <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

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

19 4 クラスリファレンス 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します 関 連 するクラスを 使 用 した 場 合 <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"> 入 力 項 目 を 作 成 する 画 面 共 通 モジュールを 使 用 した 場 合 <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

20 intra-mart スタイルシート 仕 様 書 (Version 6.1) button 形 式 <TABLE class="button"> ~ 説 明 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するときに 使 用 します 以 下 の 関 連 するクラス に 示 すクラスを 使 用 して 処 理 ボタン を 作 成 する 場 合 は 周 りを 囲 む <TABLE> タグに 必 ず 本 クラスを 指 定 してください 処 理 ボタン の 作 成 方 法 については 使 用 例 を 参 照 してください 関 連 するクラス タグ クラス 説 明 ページ <TD> button_padding ボタンの 余 白 を 取 り 除 く 28 button_bg ボタンの 背 景 色 29 <INPUT> button_bg ボタンの 背 景 色 (タイル 状 ) 注 意 点 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するには 本 クラス(button)と 上 記 関 連 する クラス に 示 すクラスを 全 て 記 述 しないと 画 面 のデザインが 崩 れてしまいます 必 ず 上 記 のクラスを 全 て 記 述 して 処 理 ボタンを 作 成 してください 処 理 ボタン の 作 成 方 法 については 使 用 例 を 参 照 してください ( 例 ) <TABLE>タグに button クラスを 指 定 しなかった 場 合 ボタン 部 品 (INPUT タグ)と 両 端 のイメージ 画 像 (IMG タグ) が 離 れてしまう 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <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 ( 株 )NTT データイントラマート All rights Reserved.

21 4 クラスリファレンス portal_tab 形 式 <TABLE class="portal_tab"> ~ 説 明 ポータル 画 面 などで タブ を 作 成 するときに 使 用 します 以 下 の 関 連 するクラス に 示 すクラスを 使 用 して タブ を 作 成 する 場 合 は 本 クラスを 記 述 した <TABLE>タグで タブを 作 成 しているHTMLの 全 体 を 囲 むことで 不 必 要 なスペースやデザインの 崩 れを 整 えること ができます 横 幅 は 100% 固 定 で 設 定 されているため 本 クラスを 使 用 すると タブ 全 体 が 画 面 の 幅 いっぱいに 表 示 されます タブ の 作 成 方 法 については 使 用 例 を 参 照 してください タブ 全 体 の 表 示 幅 を 指 定 したい 場 合 は タグ 全 体 の 表 示 幅 を 変 更 する で 紹 介 しています 参 考 にしてください 関 連 するクラス タグ クラス 説 明 ページ <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 タブの 右 側 の 画 像 注 意 点 上 記 関 連 するクラス に 示 すクラスを 使 用 してタブを 作 成 した 場 合 タブ 全 体 を 囲 む<TABLE>に 本 クラス を 記 述 しないと 画 面 のデザインが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 してください ( 例 ) タブ 全 体 を 囲 む <TABLE>タグに portal_tab クラスを 指 定 しなかった 場 合 タブと タブの 外 枠 との 境 界 線 が 離 れてしまう タブ の 作 成 方 法 については 使 用 例 を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 13

22 intra-mart スタイルシート 仕 様 書 (Version 6.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 ( 株 )NTT データイントラマート All rights Reserved.

23 4 クラスリファレンス タグ 全 体 の 表 示 幅 を 変 更 する 本 クラス(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

24 intra-mart スタイルシート 仕 様 書 (Version 6.1) portal_tab_button_all 形 式 <TABLE class="portal_tab_button_all"> ~ 説 明 ポータル 画 面 などで タブ を 作 成 するときに 使 用 します 機 能 は <TABLE>タグに 指 定 する portal_tab クラスと 同 様 です 以 下 の 関 連 するクラス に 示 すクラスを 使 用 して タブ を 作 成 する 場 合 は 本 クラスを 記 述 した <TABLE>タグで タブを 作 成 しているHTMLの 全 体 を 囲 むことで 不 必 要 なスペースやデザインの 崩 れを 整 えること ができます 横 幅 は 100% 固 定 で 設 定 されているため 本 クラスを 使 用 すると タブ 全 体 が 画 面 の 幅 いっぱいに 表 示 されます 表 示 幅 を 変 更 したい 場 合 は 枠 線 なしの<TABLE>タグに 属 性 width で 幅 を 指 定 して そのテーブルのセルとして <TD>タグ 内 に 本 クラスを 使 用 した<TABLE>タグを 記 述 する 方 法 があります ( 詳 細 は タグ 全 体 の 表 示 幅 を 変 更 する を 参 照 してください ) タブ の 作 成 方 法 については 使 用 例 を 参 照 してください 関 連 するクラス タグ クラス 説 明 ページ <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 タブの 右 側 の 画 像 注 意 点 上 記 関 連 するクラス に 示 すクラスを 使 用 してタブを 作 成 した 場 合 タブ 全 体 を 囲 む<TABLE>に 本 クラス を 記 述 しないと 画 面 のデザインが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 することをお 奨 めします ( 例 ) タブ 全 体 を 囲 む <TABLE>タグに portal_tab_button_all クラスを 指 定 しなかった 場 合 タブと タブの 外 枠 との 境 界 線 が 離 れてしまう タブ の 作 成 方 法 については 使 用 例 を 参 照 してください Page 16 Copyright ( 株 )NTT データイントラマート All rights Reserved.

25 4 クラスリファレンス 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します タブを 作 成 する <!-- タブを 作 成 --> <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

26 intra-mart スタイルシート 仕 様 書 (Version 6.1) タグ 全 体 の 表 示 幅 を 変 更 する 本 クラス(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 ( 株 )NTT データイントラマート All rights Reserved.

27 4 クラスリファレンス portal_tab_button 形 式 <TABLE class="portal_tab_button"> ~ 説 明 タブ ボタンを 作 成 するときに 使 用 します 主 に ポータル 画 面 などで 使 用 します 1 つのタブを 作 成 する <TABLE>タグに 本 クラスを 指 定 することで 不 必 要 なスペースなどを 取 り 除 き デザインを 整 えることができます 以 下 の 関 連 するクラス に 示 すクラスを 使 用 して タブ を 作 成 する 場 合 は 1 つのタブを 作 成 している <TABLE> タグに 必 ず 本 クラスを 指 定 してください 横 幅 は 100% 固 定 で 設 定 されているため 1 つのタブが 画 面 の 幅 いっぱいに 表 示 されます 複 数 のタブを 横 並 びに 配 置 したい 場 合 は 枠 線 なしの<TABLE>タグのセルとして<TD>タグ 内 に 本 クラスを 使 用 し た<TABLE>タグを 記 述 する 方 法 があります ( 詳 細 は 複 数 のタブを 作 成 する を 参 照 してください ) タブ の 作 成 方 法 については 使 用 例 を 参 照 してください 関 連 するクラス タグ クラス 説 明 ページ <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 タブの 右 側 の 画 像 注 意 点 上 記 関 連 するクラス に 示 すクラスを 使 用 して 1 つのタブを 作 成 した 場 合 <TABLE>タグに 本 クラスを 記 述 しないと 画 面 のデザインが 崩 れてしまいます 正 しい 記 述 方 法 でタブを 作 成 することをお 奨 めします ( 例 ) 1つのタブを 作 成 している <TABLE>タグに portal_tab_button クラスを 指 定 しなかった 場 合 タブと タブの 両 側 の 画 像 が 離 れてしまう タブ の 作 成 方 法 については 使 用 例 を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 19

28 intra-mart スタイルシート 仕 様 書 (Version 6.1) 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します つのタブを 作 成 する 本 クラスは 横 幅 が 100% 固 定 で 設 定 されているため 1 つのタブが 画 面 の 幅 いっぱいに 表 示 されます ( 機 能 的 に タブを 1 つのみ 作 成 することはあまり 無 いと 思 いますが ) 複 数 のタブを 横 並 びで 表 示 させたい 場 合 は 複 数 のタブを 作 成 する を 参 照 してください <!-- 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 ( 株 )NTT データイントラマート All rights Reserved.

29 4 クラスリファレンス 複 数 のタブを 作 成 する <!-- タブを 作 成 --> <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

30 intra-mart スタイルシート 仕 様 書 (Version 6.1) portal_outer 形 式 <TABLE class="portal_outer"> ~ 説 明 タブ ボタンの 下 段 に 表 示 する タブの 外 枠 を 作 成 するときに 使 用 します 主 に ポータル 画 面 などで 使 用 します <TABLE>タグに 本 クラスを 指 定 することで タブの 外 枠 を 作 成 することができます 表 示 幅 は 設 定 されていないので <TABLE>タグに 属 性 width を 指 定 することで 任 意 に 変 更 できます ボーダー( 枠 線 )の 太 さは 1px で 設 定 されているので 本 クラスを 指 定 した<TABLE>タグに 属 性 border を 設 定 してもボーダーの 太 さを 変 更 することはできません 以 下 の 関 連 するクラス に 示 すクラスを 使 用 して タブ を 作 成 した 場 合 は その 下 段 に 必 ず 本 クラス を 指 定 した<TABLE>タグを 記 述 して タブの 外 枠 を 表 示 してください タブ と タブの 外 枠 の 両 方 が 表 示 されていることで ひとつの タブ 画 面 として 表 現 されます [タブ] [タブの 外 枠 ] + [タブ 画 面 ] タブの 外 枠 の 作 成 方 法 については 使 用 例 を 参 照 してください 関 連 するクラス タグ クラス 説 明 ページ <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 ( 株 )NTT データイントラマート All rights Reserved.

31 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

32 intra-mart スタイルシート 仕 様 書 (Version 6.1) portlet_list_border_bg 形 式 <TABLE class="portlet_list_border_bg"> ~ 説 明 ポートレット 内 に 一 覧 ( 表 )を 作 成 するときの 枠 として 使 用 します 機 能 は <TABLE>タグに 指 定 する list_border_bg クラスと 同 様 です 横 幅 は 100% 固 定 で 設 定 されているため 変 更 できません ( 画 面 の 幅 いっぱいに 表 示 されます ) 表 示 幅 を 変 更 したい 場 合 は 枠 線 なしの<TABLE>タグのセルとして<TD>タグ 内 に 本 クラスを 使 用 した<TABLE>タ グを 記 述 する 方 法 があります ( 詳 細 は 使 用 例 を 参 照 してください ) 本 クラス(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>タグのクラスについては 関 連 するクラス を 参 照 してください 関 連 するクラス タグ クラス 説 明 ページ <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 ( 株 )NTT データイントラマート All rights Reserved.

33 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

34 intra-mart スタイルシート 仕 様 書 (Version 6.1) 4.2 <TD>に 指 定 するクラス ここでは HTML の<TD>タグで 属 性 class に 指 定 できるクラスについて 説 明 します 表 4-3 <TD>タグに 指 定 するクラス 一 覧 項 番 項 目 用 途 ページ bottom ラベル& 入 力 項 目 のアンダーライン button_padding ボタンの 余 白 button_bg ボタンの 背 景 色 list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) output 外 枠 と 背 景 色 付 きの 出 力 項 目 portal_tab_button タブのボタン 部 分 のデザインを 整 える portal_tab_button_left タブの 左 側 portal_tab_button_right タブの 右 側 portal_tab_button_bg タブのボタンの 背 景 色 ( 未 選 択 時 ) portal_tab_button_active タブのボタンの 背 景 色 ( 選 択 時 ) portlet_list_title_bg 一 覧 のタイトル ( 通 常 表 示 ) portlet_list_title_bg_center 一 覧 のタイトル ( 通 常 表 示 / 中 央 表 示 ) portlet_list_title_bg_left 一 覧 のタイトル ( 通 常 表 示 / 左 寄 せ) portlet_list_title_bg_right 一 覧 のタイトル ( 通 常 表 示 / 右 寄 せ) portlet_list_title_sort_bg 一 覧 のタイトル ( 強 調 表 示 ) portlet_list_title_sort_bg_center 一 覧 のタイトル ( 強 調 表 示 / 中 央 表 示 ) portlet_list_title_sort_bg_left 一 覧 のタイトル ( 強 調 表 示 / 左 寄 せ) portlet_list_title_sort_bg_right 一 覧 のタイトル ( 強 調 表 示 / 右 寄 せ) portlet_list_data_bg 一 覧 のデータ 部 ( 中 央 表 示 ) portlet_list_data_bg_left 一 覧 のデータ 部 ( 左 寄 せ) portlet_list_data_bg_right 一 覧 のデータ 部 ( 右 寄 せ) portlet_list_data_gray_bg 一 覧 の 選 択 状 態 データ portlet_attention_data_bg 一 覧 の 強 調 データ ( 文 字 色 : 赤 ) 87 Page 26 Copyright ( 株 )NTT データイントラマート All rights Reserved.

35 4 クラスリファレンス bottom 形 式 <TD class="bottom"> ~ 説 明 登 録 系 や 更 新 系 の 画 面 で 各 ラベルや 入 力 項 目 を 作 成 するときに 使 用 します 本 クラスを 使 用 すると <TD>~ 内 に 記 述 したラベルや 入 力 項 目 にアンダーラインを 表 示 します ラベルや 入 力 項 目 を 作 成 する 際 は 画 面 デザインガイドラインに 従 い 必 ず 本 クラスを 指 定 してください また 本 クラスを 使 用 して ラベルや 入 力 項 目 を 作 成 する 場 合 は <TABLE>タグに 必 ず 以 下 の 関 連 する クラス に 示 すクラスを 指 定 してください 関 連 するクラス タグ クラス 説 明 ページ <TABLE> edit ラベル& 入 力 項 目 を 囲 んでデザインを 整 える 10 <INPUT> default 入 力 項 目 の 背 景 色 90 default_right 数 値 用 の 入 力 項 目 の 背 景 色 (テキスト 右 寄 せ) 91 output readonly 用 の 入 力 項 目 の 背 景 色 93 <TEXTAREA> default 入 力 項 目 の 背 景 色 95 <SELECT> default 選 択 項 目 の 背 景 色 100 <FONT> attention ( 必 須 ) の 文 字 フォント 注 意 点 本 クラス を 使 用 してラベルや 入 力 項 目 を 作 成 した 場 合 は 周 りを 囲 む<TABLE>タグに 上 記 の 関 連 するク ラス を 記 述 しないと 画 面 のデザインが 崩 れてしまいます 詳 細 は <TABLE>タグに 指 定 するeditクラスの 注 意 点 を 参 照 してください 使 用 例 <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

36 intra-mart スタイルシート 仕 様 書 (Version 6.1) button_padding 形 式 <TD class="button_padding"> ~ 説 明 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するときに 使 用 します 以 下 の 関 連 するクラス に 示 すクラスを 使 用 して 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 する 場 合 は 必 ず 本 クラスを 指 定 してください 処 理 ボタン の 作 成 方 法 については 使 用 例 を 参 照 してください 関 連 するクラス タグ クラス 説 明 ページ <TABLE> button ボタンの 余 白 を 取 り 除 き デザインを 整 える 12 <TD> button_bg ボタンの 背 景 色 29 <INPUT> button_bg ボタンの 背 景 色 (タイル 状 ) 注 意 点 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するには 本 クラス(button)と 上 記 関 連 する クラス に 示 すクラスを 全 て 記 述 しないと 画 面 のデザインが 崩 れてしまいます 詳 細 は <TABLE>タグに 指 定 するbuttonクラスの 注 意 点 を 参 照 してください 使 用 例 <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 ( 株 )NTT データイントラマート All rights Reserved.

37 4 クラスリファレンス button_bg 形 式 <TD class="button_bg"> ~ 説 明 以 下 の 関 連 するクラス に 示 すクラスを 使 用 して 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 する 場 合 は 必 ず 本 クラスを 指 定 してください 処 理 ボタン の 作 成 方 法 については 使 用 例 を 参 照 してください 関 連 するクラス タグ クラス 説 明 ページ <TABLE> button ボタンの 余 白 を 取 り 除 き デザインを 整 える 12 <TD> button_bg ボタンの 背 景 色 29 <INPUT> button_bg ボタンの 背 景 色 (タイル 状 ) 注 意 点 画 面 デザインガイドラインに 従 った 処 理 ボタン を 作 成 するには 本 クラス(button)と 上 記 関 連 する クラス に 示 すクラスを 全 て 記 述 しないと 画 面 のデザインが 崩 れてしまいます 必 ず 上 記 のクラスを 全 て 記 述 して 処 理 ボタンを 作 成 してください ( 例 ) <TABLE>タグに button クラスを 指 定 しなかった 場 合 ボタン 部 品 (INPUT タグ)と 両 端 のイメージ 画 像 (IMG タグ) が 離 れてしまう 処 理 ボタン の 作 成 方 法 については 使 用 例 を 参 照 してください 使 用 例 <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

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

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

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

41 4 クラスリファレンス 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <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

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

43 4 クラスリファレンス 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <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

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

45 4 クラスリファレンス 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <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

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

47 4 クラスリファレンス 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <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"> 会 社 / 組 織 中 央 表 示 にする データの 表 示 位 置 を 中 央 表 示 にする 場 合 は または <TD>タグに 属 性 align="center" を 指 定 します と 表 示 例 <TD class="list_title_sort_bg" align="center">ユーザ 名 <TD>タグに 指 定 するクラスに list_title_sort_bg_center を 使 用 しても 同 様 の 表 示 結 果 が 得 られます 詳 細 は list_title_sort_bg_center を 参 照 してください 左 寄 せで 表 示 する データの 表 示 位 置 を 左 寄 せ で 表 示 する 場 合 は または <TD>タグに 属 性 align="left" を 指 定 します <TD class="list_title_sort_bg" align="left">ユーザ 名 <TD>タグに 指 定 するクラスに list_title_sort_bg_left を 使 用 しても 同 様 の 表 示 結 果 が 得 られます 詳 細 は list_title_sort_bg_left を 参 照 してください 右 寄 せで 表 示 する データの 表 示 位 置 を 右 寄 せ で 表 示 する 場 合 は または <TD>タグに 属 性 align="right" を 指 定 します <TD class="list_title_sort_bg" align="right">ユーザ 名 <TD>タグに 指 定 するクラスに list_title_sort_bg_right を 使 用 しても 同 様 の 表 示 結 果 が 得 られます 詳 細 は list_title_sort_bg_right を 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 39

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

49 4 クラスリファレンス 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <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

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

51 4 クラスリファレンス 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <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

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

53 4 クラスリファレンス 使 用 例 本 クラスの 使 用 例 と 画 面 表 示 例 を 以 下 に 示 します <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

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