CSSのフレームワーク『Blueprint CSS』まとめ

ちょっと調べ物をしていたのでわかったことをシェア。CSSフレームワークのBlueprint CSSについてです。

CSSはブラウザハックとかが面倒でレイアウトに悩んでいる人も多いですよね。そこでブラウザ間の差異を吸収してくれるフレームワークがいろいろ出てきています。有名なのはYUIですが、Blueprint CSSもわりとメジャーですよね。

今回はそのBlueprint CSSをちょっといじってみました。以下、ざっくりと。

■ Blueprint CSSって何？

まずこういうレイアウトが直感的なマークアップで簡単に作れちゃいます。

↑ このぐらいだったらすごい簡単。

その秘密はこれ。

↑ 画面をグリッドで捉えるグリッドシステムが最大の特徴。

デフォルトでは画面は横24個のグリッドに分割されていて、「ここに17個分のブロックを置いて、次にここに1個余白ブロックを置いて、次に3個のブロックを2個置いちゃおう！」ってな具合にレイアウトしていきます。

またブロックを一つ使ってBorderを置いたり、ブロック内の一部だけを右に1ブロックだけずらす、といったことも自由自在ですね。

ただ、フレームワークだけにある程度割り切っていて、手を加えずに使うなら、中央配置の固定幅レイアウトのみです（950px幅）。リキッドレイアウトを使ったり、幅を変更するとなるとちょっと面倒ですが、ざっくりデフォルト設定で雑誌のようなサイトを作りたいならおすすめです。

■ お役立ちリンク集

Blueprint CSSについて調べたのですが、まだあまり情報がまとまっていないですね。自分用メモもかねてリンク集的に紹介してみます。

• A Closer Look At the Blueprint CSS Framework – NETTUTS

まずはこれでしょう。一番わかりやすいチュートリアルです。Blueprint CSSって何？がよくわかります。英語ですが・・・。

• POINT3　Blueprint CSSを利用する

さらにこちらもあわせて読めばだいたいわかるのでは。日本語なのでさくっと読めます。

• Blueprint: A CSS Framework

公式サイト。しかしここはリンク集ちっくなのでもっと濃い内容はgithubにて。

• joshuaclayton’s blueprint-css at master

ソースのダウンロードをはじめ、いざはじめるにあたって必要な情報はほぼここで。コンセプトを理解したら/tests/フォルダをのぞけばほぼ理解できることでしょう。

• Quick-Start Tutorial – blueprint-css – GitHub

公式サイトのチュートリアルです。上記に比べるとちょっと簡単すぎかな。ちょっとはしょってありますが、和訳もありますね（素晴らしいです！）。

» Blueprintcss Tutorial 和訳 – minorio のプログラミング・メモ

• Blueprint Grid CSS Generator

デフォルトのグリッドで物足りなかったらこれを使います。グリッドの幅、数などを指定すればスタイルシートを自動生成してくれます。

• チートシート（PDF）

慣れてきたらチートシートもダウンロードしておきましょう。

他にも有用そうなリンクがあれば是非教えてください。

■ で、どうなの？

さて使ってみた結果ですが、簡単なウェブにはいいですが、ちょっと複雑なことをしはじめるとやっぱりいろいろ崩れちゃいますね。

で、崩れないためにはCSSを勉強している必要があるのですが、CSSを理解していたらそもそもフレームワークを使わなくていい、という矛盾にぶちあたったりします・・・。

あと微妙に命令が効かないことがしばしば・・・。まだまだ開発途中ですかね。今後に期待したいところです。

それにしてもレイアウトは奥が深いですよね（というか、過去のブラウザをなんとかしてほしい）。このCSSフレームワークについてはすごいシンプルなウェブでしたらおすすめです。

ツイッターもやっています！