Hatena::ブログ(Diary)

present このページをアンテナに追加 RSSフィード Twitter

2011-02-08

CSSフレームワーク『BlueTrip』が想像以上にすごい

CSS, HTML

CSS フレームワークを再認識

CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。

確かに、これは便利そうですね！

f:id:griefworker:20091227205529j:image

さっそく、CSS フレームワークを導入してみます。

BlueTrip を導入

CSS フレームワークはいろいろありますが、今回は先の記事で紹介されていた BlueTrip を導入してみます。

次のページからアーカイブをダウンロードし、解凍して css ファイルと画像を static フォルダに配置。

HTML の head 部に、下記を追加。

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

これで準備完了。

基本的な使い方

まず、グリッドレイアウトにしたい部分を

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

で囲みます。

あとは

<div id="header" class="span-24">
</div>

という風に、クラスで幅を指定するだけ。指定したクラスで幅が決まるというのは面白いです。

BlueTrip のグリッドレイアウトは横が最大 24 列あります。サンプルでは header は24列、つまり横幅いっぱいに表示。幅を指定するクラスは span-1 から span-24 まで用意されています。

サイドバーを実装してみる

こんな風に書けます。

<div id="wrapper" class="span-24">
    <div id="main" class="span-16 colborder">
        ここがメイン
    </div>
    <div id="sidebar" class="span-6 last">
        ここがサイドバー
  </div>
</div>

まずラップ用の div にクラス span-24 を指定し、領域を横いっぱいに確保。そこにクラス span-16 を指定したメイン領域と、span-6 を指定したサイドバー領域を配置。

サイドバーがメイン領域の右側にくるように、クラスに last を指定しています。last を指定すると、グリッドの残りの列に配置されます。

あと、メイン領域の div のクラスに colborder を指定していますが、これはメイン領域とサイドバー領域の間に境界線を引くためです。デザイン次第では無くても OK。

最後に簡単なレイアウトを組んでみる

見よう見まねで、Twilog や Favolog みたいなレイアウトを組んでみます。といっても、冒頭で紹介した記事に書かれているブログのレイアウトと、ほとんど変わらないんですけどね。多くの Web サービスで採用されているレイアウトですし。

<html>
    <head>
        <title>Sample</title>
        <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
        <!--[if IE]>
        <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
        <![endif]-->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
    </head>
    <body>
        <div class="container">

            <div id="header" class="span-24">
                <div class="span-16">
                    <h1>Sample</h1>
                </div>
                <div class="span-6 last">
                    ホーム|投稿|管理|ログアウト
                </div>
            </div>
            <hr/>

            <div id="contents" class="span-24">
                <div id="main" class="span-16 colborder">
                    ここがメイン<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                </div>
                <div id="sidebar" class="span-6 last">
                    ここがサイドバー<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                </div>
            </div>

            <hr class="space"/>
            <hr/>
            
            <div id="footer" class="span-24 last center">
                <address>
                    Copyright &copy; 2011 griefworker All Rights Reserved.
                </address>
            </div>

        </div>
    </body>
</html>

この HTML をブラウザで表示すると…

f:id:griefworker:20110208151410p:image

　　　　　　　　 　 　 　 .　-―-　.　　　　　　やったッ！！　さすが BlueTrip！
　　　　　　 　 　 　 ／　　　　　　 ヽ
　　　　　　　　　　//　　　　　　　　 ',　　　　　　おれたちにできない事を
　　　　　 　 　 　 | { ＿＿＿＿＿ 　|　　　　　　　　平然とやってのけるッ！
　　　　　 　 (⌒ヽ7´　　　　　　　 ｀`ヒﾆ¨ヽ
　　　　　　　 ヽ､..二二二二二二二. -r‐''′　　　　　そこにシビれる！
　　　　　　　　/´ 〉'"＞､､,,.ィ二¨'　{.　 ヽ　 　　 ＿　＿　　　　　　あこがれるｩ！
　　　　　　 　 `r､|　ﾞ._(9,)Ｙ´_(9_l′ )　 （　 , -'′　｀¨¨´￣｀ヽ、
　　　　　　　　 {（,|　`'''７､,. ､ ⌒　　|/ﾆＹ　{　　 　 　 　 　 　 　＼
　　　　 　 　 　 ヾ|　　　^'^ ′-､　,ﾉr')リ　 ,ゝ､ｰ｀――-'- ∠,_　 ﾉ
　　　　　　　　 　 | 　 ｢匸匸匚|　'"|ィ'（　（,ﾉ,r'ﾞへ.￣￣,二ﾆ､ﾞ}了
　　　　, ヘｰ‐- ､ l 　｜ /＾''⌒|　　| |　,ゝ )､,>（_9,`!i!}i!ｨ_9,）　|人
　 -‐ノ .ヘー‐-ｨ ヽ 　!‐}_＿,..ﾉ　 ｜| /-‐ヽ| 　 -イ,__,.>‐　　ﾊ　}
　''"/／ヽｰ､ 　ﾉヽ∧　`ｰ一'´　／　|′　丿!　　, -===- ､　　}くｰ- ..._
　 /／＾＼ 　ヾ-､ :| ﾊ 　￣　／　ﾉ　|.　　{ {ﾊ. 　Ｖ'二'二ソ　 ﾉ| |　　　｀ヽ
,ノ 　 ヽ,_　ヽノヽ_)ﾉ:l　'ｰｰ＜.　　/ 　|.　　ヽヽヽ._ ｀二¨´　／ノ ﾉ
/　 　 <＾_,.ｲ `r‐'ﾞ :::ヽ 　＼　｀丶､ 　|、 　　＼＼'ｰ--‐''"／／
＼＿＿_,／|　 !　　::::::l、　　＼　　＼| ＼　　　＼ヽ 　　/ ノ

CSS フレームワーク便利すぎ

こんなレイアウトがサクッと作れてしまう BlueTrip ってスゴイ。なんで今まで CSS フレームワークを試さなかったんだろう。CSS フレームワークという名前をはじめて聞いたとき、即座に調べていれば…！

デザイナーがいるなら別ですけど、個人で Web サービスを作ろうとしているなら、導入しない理由は無いです。というか、導入しないと損です。私はそう感じました。

Permalink | コメント(19) | トラックバック(4)

コメントを書く

篠田麻里子画像篠田麻里子画像 2011/02/09 16:43
同意しますが、何が基礎なのか正確に知らないと、やったつもりで終わると思います。

少年アベシ少年アベシ 2011/02/09 21:16 これ取り入れるとなるとこいつにあわせてデザイン作らなきゃならないね。で、デザイン凝りたきゃ結局CSSを修得しちゃってこんなもの必要無くなるって感じだね。正直使えない。

これはこれは 2011/02/10 04:42 素直にテーブルレイアウトにすべきかと

y_gurikoy_guriko 2011/02/10 09:18 ソース、流し見しました。
これすごいですか？１日で作れそうだけど・・・

『LINK ICONS』の部分は参考になりましたが
IEを含めたすべてのモダンブラウザに対応してますか？

ああ 2011/02/10 09:30 cssのメリットがなくなってるよ
デザイン修正するたびに全部のclass名修正せんといけん
htmlに依存し過ぎかと

griefworkergriefworker 2011/02/10 09:31 >少年アベシさん
確かに、凝ったデザインを作りたいならCSSの習得は必須です。例えば、それなりの見た目のプロトタイプをとにかく速く作りたいときに使うといいんじゃないでしょうか。

griefworkergriefworker 2011/02/10 09:35 >これは さん(?)
掲載したサンプル程度ならテーブルレイアウトでも簡単だと思います。div 使いまくりでテーブルレイアウトとあまりかわらないし…orz

griefworkergriefworker 2011/02/10 09:39 >y_guriko さん
私もソース見ました。量的には、CSS バリバリ使っている人は1日で作れそうですね。私のスキルじゃまだ無理ですが。

griefworkergriefworker 2011/02/10 09:51 >あ さん
確かに、BlueTripだとレイアウトを変更するのに、CSSファイルではなくHTMLのclassを修正しないといけませんね。。。

Python の Jinja2 と一緒に使っていたので、ベースの HTML テンプレートの修正で済み、ほとんど気にしていませんでした。

y_gurikoy_guriko 2011/02/10 13:50 いえいえ、勉強になった部分もありましたし期待してます。

ただ、この構造と命名規則はどうなんだろう・・・というのが正直な感想でした。

anonanon 2011/02/10 15:27 批判してるやつは使ってから言えと。
そして何故これだけ沢山のフレームワークが出てるか考えてから言えと。

rezoorezoo 2011/02/10 17:24 anonさんに同意です。
別に使わずに批判してもいいとは思いますが、本家も見ずにうだうだ言うのは短絡的です。

まぁ本家ドキュメントが充実してないのでそんなに役立たないんですけど、トップページに
Blueprint, Tripoli, Hartija, 960.gs, Elements
いろんなCSSフレームワークから影響受けたよって書いているんですから、
他のフレームワークのIntroductionを読んでみて、CSSフレームワークの意義とは何か、
なぜ生まれるに至ったのか、読み解いていくのも有益ではないでしょうか。

その上で、その思想に賛同するかどうか決めて批判するのならいいとは思いますけど...

くにおくにお 2011/02/10 18:05 テーブルレイアウトってw

taikibansyotaikibansyo 2011/02/12 00:14 そこにシビれた！
　　　　　　あこがれたァ！
で、いいじゃない。

fmactionfmaction 2011/02/12 19:46 これマジすげーっす！！

iimurakazuoiimurakazuo 2011/04/10 15:18 cssフレームワークは、HTML文書を手打ちしたい人には、便利だと思います。

toku_basstoku_bass 2012/01/22 04:31 弊社でも独自で同じようなことしてますが、フレームワークって呼ばれてるとは思ってなかったです。
あ さんいってるCSSのメリットって何なんでしょうか。
CSSを変更すればHTMLのクラス名を変えなくていいってことなんでしょうか。
僕の考えでは、デザインを変更する必要があるというのは、元のCSSが不適切であった場合以外は、新しいCSSとして定義するべきだと思うので、結局HTMLのクラス名を変える必要がでると思うんです。

大規模に開発されちゃってて、クラス名全部書き換えなんてできないって場合も考えましたが、CSSを書き換えるのも結局調べる影響範囲同じですよね。だから新しいCSSを追加して、必要な部分だけクラス名書き換えて運用するんじゃないでしょうか。

あと、iimurakazuoさんの発言がよく分からなかったので、お聞きしたいのに、URL先がなくて残念、、、、

通りすがり通りすがり 2012/03/20 22:49 >toku_bassさん
少々失礼な言い方になりますが、一端のプロ？としてその認識はあまりに薄っぺらいと思います。

もちろん日々仕事をこなしていく上で、デザインの変更＝HTML,CSSの変更の双方が必要になるケースが殆どであることは認識できますし、
このフレームワークのようなものを使ってすばやく仕事をこなしているところがたくさんあるのも知っています。
しかしながら、そもそもCSSがどのような理由で定義されたかをあなたは知らないわけではないでしょう？
その意味ではこのCSSフレームワークというのはCSSの存在理由自体に反してしまっていると言っていいです。
インラインでCSSを書くところを短い表記で済んでいる程度のものでしかないのですから。
classの使い方としてはプログラムで言ったら単なる「短縮関数」でしかありません。

あさんの言われたメリットというのは、classの定義がほぼ完璧であることを前提としていると思いますが、
CSSファイルの変更だけでダイナミックにデザインを変更できるのが、CSSの本当の醍醐味だと私は思います。

通りすがり通りすがり 2012/03/20 22:51 3行目訂正します
×　デザインの変更＝HTML,CSSの変更
○　デザインの変更によってHTML,CSSの変更

スパム対策のためのダミーです。もし見えても何も入力しないでください
 ゲスト

画像認証

トラックバック - http://d.hatena.ne.jp/griefworker/20110208/css_framework_bluetrip
プロフィール

griefworker

griefworker

ハッカーになりたい。

日記の検索

最新タイトル


カテゴリー
20110107073127