デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。少なくとも僕はそうですね。見た目を少しでも調整したいとなるとCSSが必要になります。要素ごとの余白をどうにかしかったりと最低限の要望が出てきます。Frameworkとして持っておくとよいと思います。近頃、一からCSSを記述しなくなったのもこうした考え方のおかげです。Framworkが非常に増えています。僕も色々と探しては使ってみています。Framworkには以下のようなものがあります。Frameworkを作るのもよいと思います。Frameworkを持つ」ことになると開発が効率的になるのかなぁと。Frameworkでは何が出来るのかを見て行きます。そのことで、自作のFrameworkを作る際にもどのような要素を考慮すればいいかが分かると思います。Frameworkを紹介します。BluetripはBlueprintや960.gsなど様々なFrameworkのいいとこ取りをした、けれども最低限のFrameworkです。Frameworkではスタイルの初期化をしてくれるのが一番の効用かもしれません。行間の調整などが一気に行われています。ヘッダー要素、マージンとパディングに限れば以下のようなCSSになります。h1,h2,h3,h4,h5,h6{margin:0;padding:0;}そしてその後、要素ごとに適切なスタイルを、この場合だとマージンやパディングを設定しています。以下はヘッダー要素の記述です。配色などの設定がなされていると思われます。多少の修正を加えることもCSSを上書きするか、修正などすれば容易です。このスタイルの初期化によってプレーンな構造のHTMLがより見やすくなってくれます。ブラウザごとの依存を吸収してくれる作用もあります。Frameworkはそれぞれなりのフォントを要素ごとに設定してくれます。英字に限っては効果的です。Bluetripはhtml要素全体と太字に対して以下のようなタイポグラフィーを設定しています。}また、Bluetripの面白いところは「.fancy」クラスを付けた要素に対しては「かわいらしいフォント」を表示する機能があります。CSSの実装はこのような具合でした。Frameworkに欲しい機能なのがグリッドレイアウトです。横幅が分かりやすいように900pxのページだとして、3つの領域に分けるとしたら、300pxのグリッドが3つできます。このグリッドに基づきコンテンツを配置していくのがグリッドレイアウトの使い方です。Bluetripは、ページ大枠の幅は950pxなのですが、それを最適に24個のグリッドに分けています。以下のようなHTMLを記述します。Frameworkを使ったり、真似したりすると楽ですね。パーツBluetripでは、クラスを指定することでアンカー要素をボタンっぽく見せるための機能があったりします。UIを構成するパーツのスタイリングですね。class="button">OK</a>とするだけで、見栄えの効くパーツに変換してくれます。FrameworkもありBluetripもその一つです。このようにHTMLのhead要素内で.cssを指定します。侮れないと思いました。中身のフォルダ・ファイル構造がいきなり使えるようになっていることです。index.htmlフォルダ内のindex.htmlにHTMLを書いて、style.cssには自分でカスタムしたいCSSを記載します。それだけでも時間短縮になってよいですね。Frameworkには以下の要素が備わっていることが分かりました。自分でFrameworkを作る際の指針になるかと思います。Frameworkを持つことはこうした要素を効率化していく効果があるのだと思います。メルマガ「ゆーすけべーラジオ」でもこうしたWebサービスを作ることにまつわるエッセイを連載中です。