Go my way

最近、エントリーが滞りがちですね(すみません…)。近々、リニューアルを予定しておりまして、そちらの作業に時間を取られています。

さて、今回のリニューアルでは、CSSを分割して管理するつもりです。CSS分割管理に関しましては、2xup.orgの「CSS分割管理の実践編」を参照してください。まだ未完成ですが、とりあえず現段階の案を公開したいと思います。

1. common.css
2. layout.css
3. theme.css
4. mose.css

上から順に読み込んでいきます。これらのほかに、印刷用のCSSファイルも用意する予定ですが、今回は省きます。

まず、common.cssですが、これはデフォルトスタイルの差異をなくすとともに、各要素の基本的なスタイルを定義しています。今後、リニューアルを行う際にも、このファイルは共通して使えるように設計しています。

次に、layout.cssですが、名前のとおりレイアウトを定義しています。左右のカラムを入れ替えるなどの際も、このファイルに手を加えれば実現できます。また、代替スタイルシートを用意することで、ユーザーがレイアウトを選べるようにもなります。

3つ目のtheme.cssは、サイトのデザインに関するスタイルをまとめています。デザインを修正をする際は、このファイルに手を加えることになります。

最後のmose.cssは、このブログで何度も取り上げているMOSeを定義します。先進的なモダンブラウザによりリッチな表示を提供するためです。MOSeを別ファイルで定義することで、theme.cssの肥大化を防ぎ、メンテナンス性を向上させます。また、一時的に無効にする際も、読み込みをやめるだけなので、MOSeを施す前と後を比べやすくなります。

もしかすると変更があるかもしれませんが、現段階ではこのように分割する予定です。

Tag

CSS