Home > 開発ツール・技術 > CSSのフレームワーク『Blueprint CSS』まとめ

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

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フレームワークについてはすごいシンプルなウェブでしたらおすすめです。

@taguchiをフォロー！
Twitterもやっています！
Posted on January 21st, 2009

Comments:1

Timothy 09-02-03 (Tue) 0:06

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

Comment Form
Remember personal info

Trackbacks:1

Trackback URL for this entry
http://www.ideaxidea.com/archives/2009/01/blueprint_css.html/trackback
Listed below are links to weblogs that reference
CSSのフレームワーク『Blueprint CSS』まとめ from IDEA*IDEA ～ 百式管理人のライフハックブログ
pingback from 群馬県沼田市で開発合宿してきたよ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～ 09-01-30 (Fri) 17:13

[...] なお、勘を取り戻すにあたってはここが一番参考になりました。NETTUTSっていいチュートリアル記事が多いですね。先日のBlueprint CSSでもそうだったし。 [...]

Home > 開発ツール・技術 > CSSのフレームワーク『Blueprint CSS』まとめ

百式ジョブボード（求人情報）
TwitterCounter
最近のつぶやき
Powered by…

ユーザー中心 ビービット
『IDEA*IDEA』のユーザビリティは、ユーザー中心のウェブサイト構築を手がけるビービット社によって検証・改善されています。

いろいろ

誠Biz.まID Webサービス図鑑
誠Biz.IDの「Webサービス図鑑」を応援中です！

あわせて読みたいブログパーツ
SEO
人気の商品
管理人の著書
Image of はじめてのGTD ストレスフリーの整理術
Image of シャングリラ・ダイエット~全米ベストセラー!「食事制限」なし!「運動」なし!の魔法のダイエット~
Image of 起業・企画・営業・雑談のネタは日常の諦めている不便利から
Image of アイデア×アイデア
Image of ストレスフリーの仕事術―仕事と人生をコントロールする52の法則
最近の写真
茹で豚肉とかぶのマヨポン酢あえきのことサーモンのクリームリゾット。白子のムニエルF-03B電車笑わせる機能画像合成指輪サイズ打ち上げ機能前科タグロック解除ポイント加算セピアウォーリーいくら！大トロ！しらこ！お刺身！今日の戦利品店長さん
モバイル版
最近の記事
カテゴリー別
過去記事一覧

Return to page top