Blueprint CSS

Google app engine patchには、Blueprint CSSなるものが入っています。

これは、CSSフレームワークなるものらしいです。
CSSフレームワークとは、なんじゃらほい？という感じだったのですが、
フレームワークで準備したcssのクラスとかをいい感じでつかうと
いい感じのサイトが簡単にできちゃいますというものようです。

Blueprintの場合ですが、グリッドレイアウトというものが簡単に出来るようになるようです。
グリッドレイアウトとは、画面上の各要素をグリッドにきちんとあわせることできれいなサイトができあがるというもののようです。
そして、そのグリッドにきちんとあわせるというのが、私のような素人には結構たいへんな気配がするのです。
Blueprintでは、グリッドレイアウト意外にもブラウザのデフォルトの見た目をリセットしてBlueprintのいい感じの見た目を設定してくれているようでもあります。
それをできるようになるということなので、私も使ってみることにします。

Blueprintに関しては、
http://www.ideaxidea.com/archives/2009/01/blueprint_css.html
で情報がまとまっていて参考になります。

Blueprintは、グリッドが24個（デフォルトで変えられるようです）に分かれており、それぞれの要素で何個のグリッドを使うかを指定していく感じです。

具体的な利用法は、以下のような感じです。

CSS指定方法

<link rel="stylesheet" href="/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

実際にBlueprintを適用する範囲は、classでcontainerで指定したdiv範囲となります。
一緒に指定してあるshowgridを指定すると背景にうっすらグリッドを表示してくれてテスト時のデザインの参考になります。

<div class="container showgrid">
</div>

24個のグリッドをいくつかにdiv要素で分割して指定するには、span-*というクラスを指定します。
そして、一行に配置するグリッドは、合計24になるようにします。
そして、一行の終わりとなる要素にはlastというクラスを指定します。

<div class="container showgrid">
 <div class="span-24 last">
   <p>一行目は、24個のグリッドを一つの要素で使い切ります。</p>
 </div>
 <div class="span-8">
   <p>2行目は3つの要素を配置します。</p>
 </div>
 <div class="span-8">
   <p>2つ目の要素です。</p>
 </div>
 <div class="span-8 last">
   <p>３つ目の要素です。行の最後なのでlastクラスを指定しています。</p>
 </div>
</div>

div要素は、入れ子にできます。入れ子で指定するときは、利用グリッドの合計を親要素で利用しているグリッドの合計にする必要があります。

<div class="container showgrid">
 <div class="span-12">
   <p>この中を入れ子で指定します。</p>
   <div class="span-5 colborder">
    <p>ここで親グリッド12のうち5個利用します。colborderを指定したことで、5個のグリッドの後にグリッド一つ分の空白をあけることになります。なので合計6個分のグリッドをココで指定しています。</p>
   </div>
   <div class="span-6 last">
    <p>入れ子でも、入れ子内で行の最後になった場合はlastクラスを指定します。</p>
   </div>
 </div>
 <div class="span-12 last">
   <p>行の最後なのでlastを指定しています。</p>
 </div>
</div>

グリッド配置するときには、必ずしも1個目のグリッドから利用するわけでなく、途中のグリッドから利用したいこともあります。
そのときは、prepend-*とappend-*を利用します。prependを指定すると指定グリッド前に指定した数だけグリッドをあけてから要素を配置することになります。appendは要素の後に指定グリッド分あけることになります。

<div class="container showgrid">
 <div class="span-8 prepend-4 append-5">
   <p>グリッド4つ分あけてからグリッド8個分確保します。そしてその後に5個分のグリッドをあけます。つまり17個分ここで指定したことになります。</p>
 </div>
 <div class="span-7 last">
   <p>隣の要素との間に5グリッド分の間が開いています。</p>
 </div>
</div>

ここまで書いた要素をすべて一つのcontainerの中に入れたとしたら、以下のようなイメージになります。
あくまでもこんな感じになるというだけで、実際に以下はBlueprintを利用したものではないです。

一行目は、24個のグリッドを一つの要素で使い切ります。

2行目は3つの要素を配置します。

2つ目の要素です。

３つ目の要素です。行の最後なのでlastクラスを指定しています。

この中を入れ子で指定します。 ここで親グリッド12のうち5個利用します。colborderを指定したことで、5個のグリッドの後にグリッド一つ分の空白をあけることになります。なので合計6個分のグリッドをココで指定しています。 　 入れ子でも、入れ子内で行の最後になった場合はlastクラスを指定します。

行の最後なのでlastを指定しています。

グリッド4つ分あけてからグリッド8個分確保します。そしてその後に5個分のグリッドをあけます。つまり17個分ここで指定したことになります。

隣の要素との間に5グリッド分の間が開いています。

他にも、見た目系をいじるクラスとかもあるようなのですが、そこまではまだ理解ができていません。