トップ > css

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 サービスを作ろうとしているなら、導入しない理由は無いです。というか、導入しないと損です。私はそう感じました。

ニコニコ動画みたいなCSSレイアウト

HTML CSS

ニコニコ動画やニコニコ静画で使われている、ヘッダー・ナビゲーション・右サイドバー・フッターを持つ CSS レイアウトを、見よう見まねで実装してみました。こんな感じのやつ。
f:id:griefworker:20110122233051p:image

このレイアウトは Web アプリでよく利用すると思うので、メモしておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>ニコニコ動画風レイアウト</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            <!--
            * { padding: 0; margin: 0; }
            
            #wrapper { 
                margin: 0 auto;
                width: 920px;
            }

            #header {
                width: 900px;
                padding: 10px;
                height: 50px;
                margin: 10px 0px 5px 0px;
            }

            #navigation {
                padding: 10px;
                margin: 0px 0px 5px 0px;
            }

            #contents {
                margin-bottom: 5px;
                overflow: auto;
                width: 100%
            }

            #main { 
                float: left;
                margin: 10px;
                padding: 0px;
                width: 681px;
                display: inline;
                position: relative;
            }

            #sidebar { 
                display: inline;
                margin: 10px;
                padding: 0px;
                width: 195px;
                float: right;
            }

            #footer { 
                width: 900px;
                clear: both;
                margin: 0px 0px 10px 0px;
                padding: 10px;
            }

            .clear {
                clear: both;
                background: none;
            }
            -->
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1>タイトル</h1>
            </div>

            <div id="navigation">
                ここにナビゲーションを表示します。<br><br>
            </div>

            <div id="contents">
                <div id="main">
                    <h2>メイン</h2>
                    <div>
                        ここにメインコンテンツを表示します。
                        <br><br><br><br><br><br><br><br><br><br>
                    </div>

                    <div class="clear"></div>
                </div>

                <div id="sidebar">
                    <h3>サイドバー</h3>
                    <div>
                        ここに広告やお知らせを表示します。
                        <br><br><br><br><br><br><br><br><br><br>
                    </div>

                    <div class="clear"></div>
                </div>
            </div>

            <div id="footer">
                <address>
                    &copy; 2011 
                    <a href="http://d.hatena.ne.jp/griefworker">griefworker</a>
                </address>
            </div>
        </div>
    </body>
</html>

メイン部分と右サイドバーの高さを揃えていないので、背景色を設定したときは表示が変になるけど、白背景にする予定だから気にしないでいいかな。

Twitterやニコニコ動画みたいにヘッダーを固定する方法

HTML CSS

Twitter やニコニコ動画みたいなヘッダーが固定された HTML ページを、ネットで調べながら見よう見まねで作ってみました。こんなの。
f:id:griefworker:20110122233636p:image

Ajax を使った RIA だと、この手の「ヘッダ固定」や「フッタ固定」は頻繁に実装すると思うので、今後の自分のためにメモっておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            <!--
            body {
                height: 100%;
                margin: 0px;
            }

            #header {
                background: #ccc;
                border-bottom: grey 1px solid;
                position: fixed;
                width: 100%;
            }
            -->
        </style>
    </head>
    <body>
        <!--位置固定のナビゲーション-->
        <div id="header">
            Top | MyPage | Logout
        </div>

        <!--コンテンツの先頭位置を調節-->
        <div style="height:26px;"></div>

        <!--スクロールするとヘッダの下に隠れる-->
        <div id="main">
            aaaaaaaa<br><br><br><br><br><br>
            bbbbbbbb<br><br><br><br><br><br>
            cccccccc<br><br><br><br><br><br>
            dddddddd<br><br><br><br><br><br>
            eeeeeeee<br><br><br><br><br><br>
            ffffffff<br><br><br><br><br><br>
            gggggggg<br><br><br><br><br><br>
            hhhhhhhh<br><br><br><br><br><br>
        </div>
    </body>
</html>

もっと良い方法があれば教えてください＞＜

CSSでブラウザ画面の高さいっぱいにレイアウトする方法

CSS

CSSでブラウザ画面いっぱいにレイアウトしたいけど、div タグの height を 100% にしても、高さいっぱいに表示されませんでした。width を 100% にしたときは、幅いっぱいに表示されるのに…。

どうやらこれは、height が親要素の高さに依存しているのが原因みたいです。外側の html タグや body タグの height を 100% にしたら、画面いっぱいに表示することができました。

html,body {
  height:100%;
}

Web 上で公開されている CSS レイアウトのサンプルは、高さいっぱいにレイアウトしているものが非常に少なかったです。おかげで方法を調べるのに苦労しました。CSS って難しいですね。