4.1.1 ASP.NETのファイル構成
・ソリューション配下の各種管理ファイル（.sln、.csproj、AssemblyInfo.cs、Global.asax等一式）
・作成した画面関係ファイル（.aspx、.aspx.cs、.aspx.resx）
・実行ファイル（\binフォルダごと全部）※ただし、開発Ｇからのリリース物件からは除く
・画面個別cssファイル(\common\css内)
・画面個別jsファイル(\common\js内)
・gif等の画像情報ファイル(\common\image内)
・web.configファイル（サブシステム単位のフォルダ内）
4.1.2 ソースファイルの内部構成
ソースファイルは、以下の様に構成される。
このうち、で始まりで終わる部分（ヘッダ部と本文）がhtml文書と呼ばれる。
・文書宣言部
・head部
・body部
4.3.6 タグの包含関係
画面上にコントロール等の要素を配置していく場合、その要素の位置と大きさを正しく指定できることがポイントになる。
このためには各要素をボックスとして扱う概念と、絶対座標による位置指定方法を掴むことが大切である。
デザインの前提として、htmlタグ一つひとつを「長方形の箱（ボックス）」として扱うことが必要になる。や等は感覚を掴み易いと思われるが、
や等も全てボックスとして扱う。この考え方は「ボックスモデル」と呼ばれている。
通常のhtmlタグの属性としてはheightやwidthが指定できないものも多々あるが、スタイルシートでは指定可能である
このボックスには、以下の４つのエリアが存在する。
・コンテンツ ：文章や画像等の実質的な内容が入るエリア
・枠線 ：コンテンツを囲む線
・詰め ：コンテンツと枠線の間のエリア
・余白 ：枠線から外側のエリア（密着して並べた場合の、枠線どうしの隙間に相当する）
4.3.7 スタイルシート
(1) セレクタの記述について
cssファイル中でのセレクタの指定方法は、以下に示す方法に限定する。
A) セレクタにタグを指定する
セレクタに指定したhtmlのタグ（画面中の全て）にスタイルシートが適用される。
ただし、本標準規約で定められるデザインは全体共通cssファイルで定義されるので、基本的には画面個別cssファイルで使用することはない。
B) セレクタにIDを指定する
画面中のある特定の箇所にだけ適用したいスタイルシートのセレクタにはIDを使用する。
画面個別cssファイルでは、ほとんどがこの指定方法になる。
C) セレクタにclassを指定する
複数個のコントロールに一律に適用したいスタイルシートのセレクタにはclassを使用する。
スタイルシートの適用対象が画面中に１箇所しかない場合は、classではなくIDを使用すること。
ASP.NETのWebコントロールではCssClassという属性になる。
D) タグ、ID、classを組み合わせて指定する
より限定した範囲にスタイルシートを細かく指定したい場合に使用する。
E) 包含する子要素を指定する
あるタグの中に含まれる要素に対して指定したい場合に使用する。
(2) 属性の記述規則
ひとつのスタイルシートの中での属性の記述順序によって結果が変わることはないが、可読性を確保するため以下の順序で記述することとする。
順序 分類 属性内容 属性 集合 備考
１ 表示 可視状態 visibility
２ 表示の重なり z-index
３ 位置 配置方法 position
４ 配置位置 上端 top right、bottomは使用禁止
５ 左端 left
６ 寄せ float positionを指定した場合は指定不可
７ 領域 サイズ 高さ height
８ 幅 width
９ 外余白 margin ◎ "上 右 下 左"の４方向指定方法のみ
１０ 枠線 固定線 border ◎ "太さ 形状 色"の指定方法のみ
１１ フォーカス表示 outline
１２ 内余白 padding ◎ "上 右 下 左" の４方向指定方法のみ
１３ 背景 background ◎ "ファイル 繰返し はみ出し 寄せ"の指定方法のみ
１４ はみ出し時の挙動 overflow
１５ 文字 フォント font ◎ "斜体 小文字 太さ サイズ 行高 日本語フォント 英字フォント"の指定方法のみ
１６ 文字色 color
１７ テキスト インデント text-indent
１８ 文字揃え text-align
１９ 上下線 text-decoration
２０ 影 text-shadow
２１ リスト list-style ◎ "形状 場所 画像ファイル"の指定方法のみ
２２ UI 漢字変換 ime-mode
順序
/可否 属性 属性の部分指定 指定の意味 説明
× margin margin-top, margin-right, margin-bottom,
margin-left 上下左右を別々に指定 ４方向を一括して指定する
10-1 border border-top 上の枠線を単独で指定 特定の方向のみ枠線を引く場合や方向によって枠線の形状を変える場合にのみ使用可
４方向とも同じ枠線を引く場合はborderでまとめて指定する
10-2 border-right 右の枠線を単独で指定
10-3 border-bottom 下の枠線を単独で指定
10-4 border-left 左の枠線を単独で指定
× border-width, border-style,
border-color 線幅、形状、色を個別に指定 枠線のデザインは３要素を一括して指定する
× border-top-width, border-
left-color 等上記の組合せ 枠線についての最小の指定 枠線のデザインは３要素を一括して指定する
× padding padding-top, padding-right, padding-bottom,
padding-left 上下左右を別々に指定 ４方向を一括して指定する
１３ background background-color 背景色を指定 背景画像を用いない場合にのみ使用可
× background-image 背景画像を指定 背景画像はbackgroundでまとめて指定する
× background-repeat 背景画像の並べ方を指定 背景画像はbackgroundでまとめて指定する
× background-position 背景画像の位置を指定 背景画像はbackgroundでまとめて指定する
15-1 font font-style 正体/斜体の区別を指定 文章の一部のみを斜体にする場合にのみ使用可
× font-variant 大文字固定可を指定 通常使用しない
15-2 font-weight 文字の太さを指定 文章の一部のみを太字にする場合にのみ使用可
× font-size 大きさを指定 font-familyとセットで指定する
15-3 line-height 行の高さを指定 "font-"ではなく"line-"であることに注意
× font-family フォントを指定 font-sizeとセットで指定する
× list-style list-style-type リストマーカーの形状を指定 形状、位置、画像はlist-styleでまとめて指定する
× list-style-position リストマーカーの位置を指定 形状、位置、画像はlist-styleでまとめて指定する
× list-style-image リストマーカーの画像を指定 形状、位置、画像はlist-styleでまとめて指定する
(3) サイズ等の単位について
文字やコントロールの大きさを指定する場合の単位はpxのみとする。
(4) 色の指定方法について
画面個別cssファイルで色を定義することは少ないが、指定する場合は16進数（#RRGGBB）形式で指定する。
「＃」記号に続けてRGB(Red、Green、Blue)の各値を2桁ずつの16進数で示し、赤を指定する場合は「#ff0000」となる。
(5) スタイルシートの表記法
・セレクタの後に１バイトの空白を置いて"{"を記述する
・最初の属性は次の行の先頭から１タブ空けて記述する。
・セレクタの":"の後は１つ以上のタブを空けてから値を記述する
・一つのスタイルシートの中では、属性、値の開始位置を揃えること。
・１行に属性は１つしか記述しない。次の属性は改行してから同様に記述する
・最後の行を記述したら、改行して行頭に"}"を記述する
例：
.XTR00_apContainer {
margin: 0px 0px 0px 0px;
border: 1px solid #808080;
padding: 0px 0px 0px 0px;
background-color: #dfe8ea;
overflow: auto;
font: normal normal normal 12px/16px "ＭＳ ゴシック" ,Arial;
}
4.3.8 外部呼出し
(1) JavaScriptファイル
jsファイルの呼び込みには<ｓｃｒipt>タグを使用する。また、<ｓｃｒipt>タグは必ず<ｈead>～の範囲内に記述する。
複数のjsファイルを呼び込む場合は、<ｓｃｒpt>タグを並べて記述する。
例：
<ｓcript src="/common/js/XTR00.js" type="text/javascript">
<ｓcript src="/common/js/GOG01G1.js" type="text/javascript">
(2) cssファイル
cssファイルはaspxファイルからリンクすることで、その内容を適用させることができる。
このリンクにはタグを使用する。また、タグは必ず～の範囲内に記述する。
画面個別cssファイルを使用する場合、全体共通cssファイルと合わせて以下のように記述する。この記述順序を入れ替えると正しく適用されない場合があるので注意する。
例：プロジェクト名がGOG01の場合
<ｌink rel=”StyleSheet” href=”/common/css/XTR00.css”
type=”text/css”>
<ｌink rel=”StyleSheet” href=”/common/css/GOG01G1.css”
type=”text/css”>
