分けとは？/ マイワン
[ 217] スタイルシートを分けて管理する方法をまとめる - 2xup.org
[引用サイト] http://2xup.org/log/2006/10/17-2115
|
スタイルシートを書く時のガイドラインでは、セットフォーマットルールや、プロパティの出現順序についてまとめました。そちらで用意したガイドラインだけでも、簡単な管理は可能なのですが、現在、2xup のリニューアルを進めていて、ちょうど各々用意した CSS の分割をどのように整えていこうかと考えていました。今回はそのリニューアル作業の一環として、サイトで管理する CSS ファイルをどのように分けるか、現状の考えをメモすることにしてみました。リニューアルをきっかけにまとめましたが、この方法はスタイルを適用する HTML がどんなものか。また、目的によってファイルの数は若干変化する可能性はありますが、この分け方や構成は様々なサイトで流用できるのではないかと考えています。 スタイルシートを分けて管理する理由というのは、人それぞれだと思いますが、ほとんどの方があてはまるのが管理効率の向上ではないでしょうか。例えば、フォントの指定に関する CSS ファイルの場合、ファイルを別にしておくと後でフォントの指定を変更したい場合、長い CSS ファイルからどこに対象のセレクタがあるのか、ぐりぐりスクロールして探したりしなくても、フォントの指定のみを行っている CSS ファイルを編集すれば良いわけです。また、リニューアルなどに伴い、大きくフォントの指定を変更したい場合は、いくつか指定パターンの違うフォント用 CSS ファイルを用意しておけば、そのファイルを入れ替えるだけで変更することができます。 それだけではなく、作成したいウェブサイトの仕様にあわせて分けたスタイルシートを選択し、合体ロボットのように組み合わせれば、ウェブサイト構築のほとんどの作業ステップをスキップできるということも実現できますね。つまり、自分用スタイルシートライブラリを作成するような感じでしょうか。組み合わせ方法によっては、様々な用途に向けたスタイルシートファイルの作成が可能になりますね。 リニューアル中の 2xup を例に、スタイルシートをどのように分けているか実際にまとめてみます。ディレクトリ構造なども明示しておきますが、実際には変更になるかもしれません。 テーマごとディレクトリに含まれるデザインに関するスタイルシートや、そのテーマで利用される画像を格納するディレクトリを含むディレクトリ。基本的にデザインのリニューアルはこのディレクトリ内のみで完了する。 ブラウザによって微妙な違いのある、各要素のデフォルトスタイルの差異を無くすとともに、再定義する CSS ファイル。僕自身が CSS でデザインを初めて以来、足したり引いたりしており現在に至。通称ぬかみそ けっこう多く見えますが、実際にサイトを構成する際に選択する CSS ファイルは、最低5個で可能なので、問題ナッスウィング? しかも個人サイトの利用なのに、こんなに管理面を重視せんでも！という声も聞こえてきそうですが、こうして効率化を計るのもスタイルシートを理解する良い勉強になるはずだ！と自分を催眠にかけてやってみます。 うまく CSS ファイルを分けることができても、それをどう HTML に反映させるか。うまく読み込ませないとリニューアル時に設定した目的 (こちらはリニューアル後にでも詳細を) が達成できない可能性だってあります。今回の場合は以下のようにしました。 これらのスタイルシート (themeディレクトリはのぞくかもしれません) と、このスタイルを適用する基本 XHTML ファイルは、共有しようと考えています。共有することで、スタイルシートを書く時のガイドラインの時のように、たくさんの方からのフィードバックを得られて知識を深めることができるかもしれないし、誰かがこれを元に効率よくサイトを構築・管理できるきっかけになるかもしれませんね。こうした共有はいくつもハックを知るよりもきっと得るものが多いのではないかと考えています。また、今回から subversion によるバーション管理もおこなっているので、簡単に最新版や少し前のバージョンのものが手に入るようにしようと考えています。 ボクも以前より一つのHTMLをもとに、ユーザが複数のレイアウトCSSを選んで切り替えられるサイトをつくりたいと思っていました！ 比較的、柔軟に使えるようにファイル構成を考えたのですが、これだとファイル数が多くなってしまうのが少し難点です。でも、モジュール・フレームワーク化しておくと再利用が便利ですね。 最近は、便利だけど無駄な規則集合が増えてしまうので、最終的に必要な箇所を抜き出して再構成してしまうのが良いかな、と思ってます。 私もファイルの数はやはりずっと課題となりそうです。修正項目へのアクセススピードを上げるには、やはりファイルの分割をどうやるかが大きなポイントになると思うのですが、それを意識しすぎてファイル数が多くなってしまう事を気にしています。 ぜひ、mixi という参加ユーザーしかみれない場所ではなく、ご自身のポートフォリオなどで共有してみるのも良いかもしれませんね。 kennsu さんのコーディングに関する考えも拝見しました。個人サイトではなかなか複数人での管理を実践できませんが、普段から意識していると良いですね。 デザイン気に入ってくださってありがとうございます。僕も今のデザインは嫌いでないので、すこし残してみたいとかんがえています。 |
マイワンのサイトです。
