[cssフレームワーク]BluePrintの紹介

cssもフレームワーク化されてるとレイアウトがすごく楽になりますね。

そんなcssのフレームワークである、BluePrintのご紹介！

cssフレームワークとは、cssでのレイアウトをフレームワーク化したものです（そのままです）。

どんな利便性があるか！というと、プログラムのフレームワークと似たようなもので、あらかじめ用意された物を利用してhtmlをくみ上げていく。

という手法（？）です。

使ってみた

とりあえず使ってみようということで使ってみました。

まずはBluePrintからソースをダウンロードします。

やること１【下ごしらえ】

以下のような構成で、それぞれのファイルを作成します。

[public_html/] +- index.html（適当にタグを記述しておくといいかもしれませんです）
+-

これで完了です。

jsフォルダなどが必要な方は各々作成してください。

やること2【インストール】

ダウンロードしたｚｉｐなりtarボールなりを解凍します。

すると、解凍した中に、「blueprint」というフォルダがあります。

その「blueprint」フォルダをまとめて先ほど作った「css/」フォルダにぶち込みます。

その後以下のタグをコピペで先ほど作った「index.html」に貼り付けます。

<!--&#91;if IE&#93;&gt;&lt;!&#91;endif&#93;-->

これでインストールは完了です。

やること3【使ってみる】

「index.html」を何かで（メモ帳なりDreamweaverなり）開きます。

bodyタグ直下に「div」を1つ。class名は「container」として作ります。

「container」の中にさらに「div」を3つ作成します。

これらのclass名は作成した順に「colmun span-4」、「colmun span-16」、「span-4 last」とつけます。

ここまでの操作をいったん保存し、お茶を飲み干します。

「span-16」の中に「p」タグで文章を適当にたくさん打ち込んでください。

再度保存し、ブラウザでプレビューしますと、きれーに並んでます。

複雑なカラム構成が簡単に作成できるのがとても魅力的です。

ブログなどのテンプレートを作成する際には重宝するかも知れません。

ついでにcss無知で有名な俺が作ったサンプルの画像を載せてみようと思います。

感じたこと

実用的かといったら、どうなのかなーと思いますが、ケースバイケースだなぁと思いました。

とりあえず俺はこのcssフレームワークでMHFのjQueryプラグインを作ってみようかなぁと思いました。

後、暇があったら、blueprintの升シート作って見ようと思います。