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

SPONSORED LINK

Pocket

bp_top

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

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

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

■ Blueprint CSSって何?

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

bp_demo

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

その秘密はこれ。

bp_grid

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

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

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

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

■ お役立ちリンク集

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

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

■ で、どうなの?

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

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

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

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

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

SPONSORED LINK

  1. I’ve heard a lot about different CSS grid layouts. It’s always interesting to see frameworks people come out with.