CSS標準化

TaskwareのCSS標準化に伴い制定された基本ルールです。

基本概念について

TWV2では、cssをその用途や意図によっていくつかのファイルに分別しています。
またclass名を作成するのにルールを設けており、これによって新しい要素が増えた際にも法則に沿って作成することで、ファイル管理を考慮しています。

基本的な取り決めについて

基本的に命名にid属性は用いず、class属性を使います。これを基本ルールとしておくことで、テンプレートのソースを見た時に、大きく分けて class＝表現的な調整が施されており、デザイン側で管理しているものと、 id＝動的な処理が施されており、開発側で管理しているものと区分けるようにしています。

アンカーリンクの指定先には id が使用されます。

CSSファイルの種類について

cssは、役割に応じていくつかのcssファイルに分けられています。また一部の parts 表現を調整するにあたって一部の parts やフレームルールに、javascript を使用しています。

	ファイル名	簡易説明	編集
CSS	base.css	基本構造体や、全テンプレートの共通箇所に対するcssが指定されています。	×
	common.css	フォント、幅、余白、縦横の並びなどレイアウトを指定するcssが指定されています。	×
	parts.css	複数のPartsを形成するためのcssが指定されています。	×
	set.css	複数のBoxやPartsをまとめ、それら全てで1つの纏まりとして使用するためのcssが指定されています。またset要素は、レスポンシブ構築ルール（ data属性）による制御のできない纏まりを構築するために使用します。	×
	visiual.css	表現に関わる、いくつかのプロパティを纏めたファイルです。レスポンシブな動きは考慮されません。	○
	custom.css	これまでに指定されたものを上書いて変更したり、顧客単位で表現を変更したい場合に用いるファイルです。	○
	それ以外	DataPickerやCalendarPickerといった、Partsに含まれる表現要素を形成するためのファイルです。	×
Javascript	styleControl.js	cssで管理された要素の、UIを向上させるためのjavascriptが記載されています。	×
Javascript	それ以外	DataPickerやCalendarPickerといった、javascriptの処理によって表現要素を形成するためのファイルです。	×

base.css

cssのリセット及び、どのテンプレートでも使用される、共通のFlameやBox構築に関する共通要素に関するcssがまとめられています。

common.css

色やpxといった、特に汎用的な要素をルールに沿って使用できるよう変数化されています。
その他、プロパティと値を1つのclass名に置き換えたcssが纏められています。

class属性だけでなく、レスポンシブに対応したdata属性として使用するための記述もこのファイルに含みます。

parts.css

各種Partsと、それに伴うオプションを表現するためのcssが管理されています。

Partsは基本的に、Parts自身（または内包する要素）に依存した幅（ width: auto ）を持ちます。器に対して最大の幅まで広げたい場合は、set.cssを用いて親要素のブロックと同様に100%を指定してあげます。

parts.cssで管理されたcssは、［ pa-*** ］といった形式で表記されます。

set.css

各種set要素に関するcssが管理されています。
set要素にはレスポンシブな表現を含んだものもあり、html階層を含めて、基本的にそのまま使用してください。

set.css は必ず b1 を軸に指定します。骨組みのルール上、必ず［ b1 > b2 ］の構成になるため、b1に指定しておくことで set 要素としての css を最適化しています。

set要素はレスポンシブに対応しているため、配置するBoxレベルでレスポンシブを考慮しないようにしてください。

set.cssで管理されたcssは、［ se-*** ］といった形式で表記されます。

visiual.css

表現に関するいくつかのプロパティと値をまとめたcssが管理されています。基本的にはcommon.cssを複数指定するのと同様ですが、汎用的に使われる表現に焦点をあて、ソースの簡潔化を図っています。

visiual.cssでは、レスポンシブは考慮されません。また、common.cssを併用して使用した場合は、common.cssが優先されます。

visiual.cssで管理されたcssは、［ vi-*** ］といった形式で表記されます。

custom.css

parts.cssやset.css、visual.cssを納品先にあわせてカスタマイズする際に使用するファイルです。

styleControl.js

各種cssで管理された要素の、UIを向上させるためのjavascriptが記載されています。