例えば、Webサービスのフロントエンドのコードを書き始める時にまず何をするでしょうか？ デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。 少なくとも僕はそうですね。 理論的にはHTMLだけでもWebサービスを作ることはもちろんできますが、 見た目を少しでも調整したいとなるとCSSが必要になります。 例えばCSSを使わないHTMLの場合、いくら単純なレイアウトだとしても、 デフォルトのリンクの色を変えたかったり、フォントを変更したかったり、 要素ごとの余白をどうにかしかったりと最低限の要望が出てきます。 こうした最低限のCSSに対するニーズは共通化して自分なりのCSS Frameworkとして持っておくとよいと思います。 近頃、一からCSSを記述しなくなったのもこうした考え方のおかげです。
今Web上で配布されて利用可能なCSS Framworkが非常に増えています。 僕も色々と探しては使ってみています。よく使われている、 もしくは僕が使っているCSS Framworkには以下のようなものがあります。
- Blueprint
- 960.gs
- Bluetrip
- YUI CSS
- inuit.css
- Twitter bootstrap
- jQuery UI CSS Framework
- Less Framework
こうした数あるFramworkのうち、お気に入りを見つけるのもよし、 参考にして自分なりのCSS Frameworkを作るのもよいと思います。 そして結果的に「CSS Frameworkを持つ」ことになると開発が効率的になるのかなぁと。
では、CSS Frameworkでは何が出来るのかを見て行きます。 そのことで、自作のFrameworkを作る際にもどのような要素を考慮すればいいかが分かると思います。 分かりやすい例として以前から使っているBluetripというCSS Frameworkを紹介します。 BluetripはBlueprintや960.gsなど様々なFrameworkのいいとこ取りをした、けれども最低限のFrameworkです。
スタイルの初期化
CSS Frameworkではスタイルの初期化をしてくれるのが一番の効用かもしれません。 Bluetripの.cssファイルを見ると最初の冒頭でリセットと呼ばれる該当する要素に対してのマージンやパディングの無効化、 行間の調整などが一気に行われています。 ヘッダー要素、マージンとパディングに限れば以下のようなCSSになります。
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
そしてその後、要素ごとに適切なスタイルを、この場合だとマージンやパディングを設定しています。 以下はヘッダー要素の記述です。
h1 { margin: 1em 0 .5em; }
h2 { margin: 1.07em 0 .535em; }
h3 { margin: 1.14em 0 .57em; }
h4 { margin: 1.23em 0 .615em; }
h5 { margin: 1.33em 0 .67em; }
h6 { margin: 1.6em 0 .8em; }
配布されているCSS Frameworkはおそらく作者のポリシーも含んだマージンや行間、 配色などの設定がなされていると思われます。そのまま使ってもよいですし、 多少の修正を加えることもCSSを上書きするか、修正などすれば容易です。 このスタイルの初期化によってプレーンな構造のHTMLがより見やすくなってくれます。 また、ブラウザごとの依存を吸収してくれる作用もあります。
タイポグラフィー
スタイルの初期化とも呼べるかもしれませんが、CSS Frameworkはそれぞれなりのフォントを要素ごとに設定してくれます。 Webで共通的に使える日本語のフォントが非常に少ないために日本人にはあまり恩恵がないかもしれませんが、 英字に限っては効果的です。 Bluetripはhtml要素全体と太字に対して以下のようなタイポグラフィーを設定しています。
html { font-size: 62.5%; font-family: "Liberation Sans", Helvetica, Arial, sans-serif; }
strong, th, thead td, h1, h2, h3, h4, h5, h6 { font-weight: bold; }
また、Bluetripの面白いところは「.fancy」クラスを付けた要素に対しては「かわいらしいフォント」を表示する機能があります。
CSSの実装はこのような具合でした。
.fancy { color: #666; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; font-style: italic; font-weight: normal; }
グリッドレイアウト
スタイルの初期化の次にCSS Frameworkに欲しい機能なのがグリッドレイアウトです。
例えば横幅が分かりやすいように900pxのページだとして、3つの領域に分けるとしたら、300pxのグリッドが3つできます。
このグリッドに基づきコンテンツを配置していくのがグリッドレイアウトの使い方です。
Bluetripは、ページ大枠の幅は950pxなのですが、それを最適に24個のグリッドに分けています。
例えば、左側に8個のグリッドのサイドメニュー、右側に16個のグリッドのメインコンテンツというレイアウトにしたければ、
以下のようなHTMLを記述します。
<div class="span-8">
サイドメニュー
</div>
<div class="span-16 last">
メインコンテンツ
</div>
タブーと言われているようなtableレイアウトを使わずにこうしたグリッドレイアウトを記述するには、 ちょっとした苦労とノウハウが必要なのですが既存のCSS Frameworkを使ったり、真似したりすると楽ですね。
パーツ
Bluetripでは、クラスを指定することでアンカー要素をボタンっぽく見せるための機能があったりします。 UIを構成するパーツのスタイリングですね。
<a class="button">OK</a>
とするだけで、見栄えの効くパーツに変換してくれます。
印刷用CSS
印刷用CSSが付いてくるCSS FrameworkもありBluetripもその一つです。 このようにHTMLのhead要素内で.cssを指定します。
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
あまり意識をすることが無い印刷用CSSですが、サイトの種類によっては印刷する人が結構いるかもしれないので、 侮れないと思いました。
スターターキット
Bluetripの優れている点はサイトからZIPやTarをダウンロードして解凍すると、 中身のフォルダ・ファイル構造がいきなり使えるようになっていることです。
./ ├── css │ ├── ie.css │ ├── print.css │ ├── screen.css │ └── style.css ├── images └── index.html
フォルダ内のindex.htmlにHTMLを書いて、style.cssには自分でカスタムしたいCSSを記載します。 フォルダのレイアウトを作ったり.cssへのパスを調べてhead内に書く作業が減るだけですが、 それだけでも時間短縮になってよいですね。
まとめ
BluetripというCSS Frameworkには以下の要素が備わっていることが分かりました。
- スタイル初期化
- タイポグラフィー
- グリッドレイアウト
- パーツ
- 印刷用CSS
- スターターキット
これはあくまで一例なのですが、他のCSS Frameworkを吟味する際に参考にしてもらったり、 自分でFrameworkを作る際の指針になるかと思います。 CSS Frameworkを持つことはこうした要素を効率化していく効果があるのだと思います。
メルマガ「ゆーすけべーラジオ」でもこうしたWebサービスを作ることにまつわるエッセイを連載中です。 よろしければお試し購読を！