メモ帳日記

CSS管理方法変更

Created Date

2007-01-22T20:41:23+09:00

Modified Date

2007-01-26T01:23:57+09:00

Category

• HTML / CSS

PermaLink

http://bsakatu.s201.xrea.com/mt/2007/01/22/20-41-23

前々からやろうと思っていた CSS の管理方法に，センター休みを利用して移行した。この管理方法は，この前移転が完了したまうんとらんオンラインでもやっている。詳しくは以下。ただし，以下に示したのは最小限の構成。個別の CSS が必要になったら，css/ に HTML ファイルと同じ構成，ファイル名で置く。

/css/
 │
 ├ common/
 │ ├ default.css
 │ ├ default.css.gz
 │ ├ minimum.css
 │ └ module.css
 │
 ├ mt/
 │ ├ mt.css
 │ └ mt.css.gz
 │
 └ theme/
    └ theme-first.css

default.css

本来，reset.css，display.css，fonts.css，default.css というふうに分けるつもりでいたのを統合したもの。

reset.css

ファイル名のとおり，ブラウザのデフォルトスタイルをリセットする。これをやらないと後で果てしなく苦労する。

display.css

仕様書通りの display の値を宣言する。

fonts.css

Yahoo! UI Library (YUI) の CSS Fonts にある CSS を参考にしたもの。ブラウザのフォントサイズを統一する。他に，標準の font-family も宣言している。

default.css

ブラウザのデフォルトスタイルに当たるものを再定義したもの。

minimum.css

最小限のスタイルをインポートするもの。個別のスタイルの先頭でこれをさらにインポートしている。

module.css

共通の部品をモジュールみたいにしてまとめてあるもの。

mt.css

名前のとおりこの blog （Movable Type）のスタイルを宣言している。このファイル名には納得していない。

theme-first.css

default.css では定義していない，色関連を定義している。これを変えることで色を変える。これも名前には納得していない。いずれはテーマ毎の名前を付ける。

いやー，超便利。ブラウザ毎の微妙な差があんまりでないから手間が減った。アメリカの Yahoo! はいいね。日本のはくそだけど。

今回の管理方法変更は，スタイルシートを分けて管理する方法をまとめる - 2xup.org を見て，やろうと思い試してみた。ここをこのサイトぐらいのレベルまでデザインしたいな（たぶん無理）。