CSS Archive

CSSのフレームワーク「blueprintcss」というものがあるそうです。

Blueprint CSS（GoogleCode）
blueprintcss - Google Code

国内では殆ど取り上げられてないのが現状なんですかね・・・？

国内で取り上げているサイト

MOONGIFT「ついに登場！CSSフレームワーク「Blueprint」」

WEBDESIGN＆AJAX「CSSのFramework　Blueprint」

秋元@サイボウズラボ・プログラマー・ブログ「Blueprint CSSデザインのためのオープンライブラリ」

CREAMU「CSSフレームワークでWebサイトを構築できる『Blueprint』」

ブラウザ対応が完璧じゃないとは言っていますが、主要ブラウザのIE（6.xと7系）、Firefox、Safariに対応していれば問題ないかと。

このオープンソースはなんぞやと申しますと、CSSをもっと構造化して一定のルールに従って使えばブラウザ依存等々考える事無くページの作成できる
というものです。
私も今から使ってみないとなんともいえないので、ドキュメントを読もう。

とりあえずGoogleCodeに書いてあるチュートリアルの日本語訳を作ってみましょう。
（注：私は英語が出来ません。フィーリング訳です・・・誰か英語出来る方、修正コメントあればお願いします；；）

Tutorial
Here’s a quick tutorial on how you start using Blueprint.

In addition to the tutorial below, this tutorial by Blueflavor gives you a good intro to Blueprint.

まぁここは特に訳さなくても。簡単なBlueprintを使うためのチュートリアルってことで。
で、このチュートリアルに加えてBlueflaverのチュートリアルはもっと良いでしょう。

Installation

Blueprint should be put in your site’s CSS directory. After you’ve done that, add these two lines to the of your pages. Remember to make sure the href path is correct:
[code]

[/code]
BP is now ready for consumption.

インストール。
BlueprintをCSSディレクトリに入れてください。それで終わり。あとは2行のコードをタグの間に書いてください。
Blueprintはこれで消費の準備が整いました？？

ま、2行書けば良いって事ですね。うん。

Blueprintファイル構成

screen.css　このフレームワークのメインファイル。libディレクトリに入っているほかのCSSファイルをインポートしているので、全てのページに読み込むほうが良い

print.css　印刷用の設定。普段の印刷画面より見栄えがよくなる。

lib/grid.css　gridのセットアップをするもの。

lib/typography.css　いくつかのタイポグラフィのセット。

lib/reset.css　CSSリセット用

lib/button.css　ボタン用CSS

lib/compressed.css　全ての圧縮バージョン

typography
typography.cssはカスタマイズの必要が無い。投げ込むだけで良いテキストスタイルを提供できる。
typography.cssは行の高さ（base-line)が18pxに設定してあります。これは全て18の倍数でイメージサイズや高さを設定しているという意味です。
これは使いにくいように思えますが、見た目の結果は素晴らしいです。基本の(baseline）に関してはA List Apartを見てください。

Grid
基本は幅950px、24のカラムが30pxごとに並んでいて、カラム間は10pxのマージンを設けてあります。

っていうことは、24*30px + 23*10px =950px。おぉなるほど。

もっと行が必要な場合は別途計算をしろということで。
でも計算しなくてもこのBlueprint Grid CSS Generatorを使えば簡単に作れそうですね！

使い方

まず最初はDivタグでContainerを作る。
[code]

[/code]

で、ColumnをDivのクラスタグにつけると動作が見えますよと・・・。

[code]

[/code]

ポイントは、最後のカラムに「last」をつけること。他のカラムがこれを見ているそうで。

で、Blueprintのこのカラム構造は入れ子状態でも反応をするらしいです。
ためしに入れ子をしたのがこれ。

[code]

[/code]

あとはたくましく生きろという事ですか・・・。grid.cssでも見てみるなりどうぞ。って書いてある。

もう雑記状態ですね・・・すんません。

あとで詳しく図を入れて書いてみたいし、テストも作ってみたいと思います。