Object.CSSプロジェクト (1)


当サイトの管理人は、普段はWeb制作を生業にしています。デザインとシステム開発以外の全て、サイト企画→サイト要件定義→サイトマップ作成→ワイヤーフレーム作成→XHTMLマークアップ→CSSコーディング→サーバ構築→CMSカスタマイズ(主にWordPress)と幅広いワークフローを一人で網羅しています。社内の制作スタッフが自分とあとデザイナーと編集しかいないからなのですが…

そんな中で最も効率化が求められるのがXHTMLマークアップ→CSSコーディングの作業。一頃はW3Cの勧告に準拠しているだけで威張れた甘っちょろい時代もありましたが、今や仕様に準拠した標準化コーディングは当たり前。準拠している以上、そこからは効率化の世界に入ってきます。そこで、コーディング時間を短縮するために昨年から取り組んでいるのが、XHTML+CSSコーディングのためのフレームワーク作りです。

なぜ今、コーディングフレームワークか?

この手のものは実は世の中に色々ありますが、わざわざ自分で作ろうと思った理由は3つ。

  1. 自分が使いやすいものを作りたい(当然)
  2. XHTMLをよりXMLらしく表現できるフレームワークが良い(個人的趣向)
  3. 記述は簡潔に、よけいなものは容れない(従って誰にでもすぐに使える)。

では次に、「XHTML+CSSコーディングのためのフレームワーク」とは何か。ぶっちゃけて言うと、「コーディングの際のルール作り」です。あらかじめ決まったルールに基づいてコーディングすることで、よけいな悩みを減らす。例えば…

  • つまずきやすいブラウザ間のCSS実装の差異は、あらかじめ埋めておく。
  • 頻度の高いCSS設定は、あらかじめクラスを用意しておく。
  • DIVの入れ子構造もあらかじめデフォルトのものを決めてしまう。

ダウンロード

で、現在ベータバージョンとして作成中で、実際の案件でも使用しているフレームワークモドキ、「Object.CSS」をダウンロードしていただこう。

Object.CSS

CSS reset

ブラウザによって各要素にはデフォルトのCSSが当たっている。これが、Web制作の現場では百害あって一利無しだ。従って、あらかじめマージン・パディング・フォントサイズを統一させる。「このブラウザで見たらなんか違うんだけど」というクライアントからのクレームを確実に減らせる。

世の中には「*」(ユニバーサルセレクタ)を用いてリセットする方法もあるようだが、自分の意図しない影響を及ぼす可能性もあるので、なるべくなら避けた方がいい。

Basic Classes

いざと言うときに用意しておくと便利なクラス群が宣言されている。これらのクラスはクラス名に表示上の見た目が関係しているので、XHTMLには見た目に関することを書かないという原則からは外れている。基本的には使用せず、困ったときに使おう。

各クラスの説明は省く。「clearfix」についても有名なクラスなので、特にココで言及する必要はないだろう。

box object

object.cssの名前の由来ともなっている部分。DIVの入れ子構造の基本をあらかじめ宣言してある。

<div id="このパーツを的確に表す名前を付けよう。">
  <div class="objHeader">
    <h2>このパーツの見出しとなる部分。</h2>
  </div>
  <div class="objBody">
    <p>このパーツの中身となる部分。</p>
  </div>
  <div class="objFooter">
    <p>このパーツの補足情報や関連リンクなど。</p>
  </div>
</div>

ウェブページのデザインは様々なパーツが組み合わさって出来ているが、それぞれのパーツをこの書き方に則って書く様にする。もちろん、いちいちDIVを入れ子にしなくても書ける場合もあるだろう。しかし、仕事と言うのは突然の修正や追加がつきものだ。そんな時、慌ててdivを増やすと他の部分に影響が及ぶ場合もある。しかし、あらかじめ2重のDIVで要素を囲っておけば、たいていのCSSの記述に耐えられる。また、ヘッダ・本体・フッタのそれぞれにclearfixをかけてあるのもポイントだ。あとから内部にフロートを追加したときでも、表示が崩れる心配は無い。

この書き方をCSSファイル中にコメントで書こうと思っているのだが、良い方法が無いか思案中。

さて、長くなって来たので続きは次回に回すことにします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です