トップ > HTML

Bootstrap を使ってデザインしたアプリに Sidr でメニューを作成

JavaScript HTML CSS

Twitter Bootstrap はレスポンシブ Web デザインをサポートしているから、 小さい画面ではナビゲーションバーのメニューが隠れて、代わりにボタンが表示される。

このボタンをタップするとメニューがドロップダウン(?)表示されるんだけど、これ好みじゃない。 Facebook や Gmail の iPhone アプリみたいに、横からスライド表示されるメニューにしたい。

そこで、Sidr と Bootstrap を組み合わせて、それっぽいメニューを実装してみた。

この手のメニューを実装するプラグインは Sidr のほかに PageSlide や Snap なんかがあるけど、 試した中では Sidr が一番 Bootstrap と組み合わせやすかった。他のは動かすだけで一苦労。

Bootstrap と Sidr を組み合わせたサンプルがこちら。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
    <link rel="stylesheet" href="sidr/stylesheets/jquery.sidr.dark.css" />
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a id="sidebar_button" href="#" class="btn btn-navbar" style="float:left;">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

          <a href="#" class="brand">Sample</a>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <table class="table">
          <tbody>
            <tr>
              <td>
                <input type="checkbox" />
                Task
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!--これがメニューになる-->
    <div id="sidr">
      <ul>
        <li>
        Lists
        <ul>
          <li><a href="#">list</a></li>
          <li><a href="#">list</a></li>
          <li><a href="#">list</a></li>
          <li><a href="#">list</a></li>
        </ul>
        </li>
        <li>
        Tags
        <ul>
          <li><a href="#">tag</a></li>
          <li><a href="#">tag</a></li>
          <li><a href="#">tag</a></li>
          <li><a href="#">tag</a></li>
        </ul>
        </li>
      </ul>
    </div>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="sidr/jquery.sidr.min.js"></script>
    <script type="text/javascript">
      $(function() {
          var $tbody = $("tbody");
          var $template = $tbody.html();
          for (var i = 0; i < 20; i++) {
              $tbody.append($template);
          }
      });

      // サイドバーにする要素を指定しない場合、
      // id に sidr が設定された要素を使う。
      $("#sidebar_button").sidr();
</script>
  </body>
</html>

Bootstrap のナビバーボタンは本来右端に表示されるけど、直接スタイルを指定して左端に表示している。

この HTML を Chrome で表示。

f:id:griefworker:20130423200231p:plain

左上のボタンをクリックすると

f:id:griefworker:20130423200243p:plain

スライドしてメニューが表示された。

ここまでは期待通り。 本格的にアプリに組み込むのはこれからなので、もしかしたらこの先で躓くかもしれない。 その時は Sidr のソースコードを改変するか、おとなしく自作しよう。

Webサービスのモックアップは HTML と CSS で書けばいい

HTML CSS

デザインはからっきしだけど、このままではダメだと思って、本や雑誌でデザインを独学してる。 で、モックアップが重要みたいなこと説かれていると、Visio なんか使ってワイヤーフレームを書き始めるけど、正直まどろっこしい。性に合わない。この上 Photoshop？学習コスト高すぎる…。もちろん財布にも優しくない。

そもそも、Web サービスのデザインの場合、HTML と CSS でやればいいんだよ。最近気づいた。 HTML と CSS なら、慣れ親しんだエディタとブラウザがあれば事足りる。

Bootstrap や jQuery といった、デザインで利用するフレームワークと素材をつっこんだリポジトリを GitHub や Bitbucket に作っておけば、あとは clone してローカルでいじればいい。個人なら編集内容をリアルタイムで共有する必要ないし、少人数なら GitHub や Bitbucket で共有すればいい。静的な HTML はホストもできるし。

今はそんな感じで落ち着いた。 細部に凝ろうと思ったら、Photoshop や Illustrator を覚える必要があるだろうけど。 そこは YAGNI の精神。必要になるまでやらないでいいや。

秋なので Canvas に絵を描いてみた

HTML JavaScript

朝夕はすごく涼しくなりましたね。むしろ寒いくらいです。もうすっかり秋ですね。秋だけに、絵を描いてみたくなりました。ただし、使うキャンバスは絵画用じゃなく、HTML5 のものですけど。

線を引くところから初めて、画像を表示するまで、一通り試したコードがこちら。

<!DOCTYPE html>
<html>
    <head>
        <title>Canvas Sample</title>
    </head>
    <body>
        <h1>Canvas Sample</h1>

        <div>
            <h2>線で矩形を描く</h2>
            <canvas id="strokeRect" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("strokeRect");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    ctx.beginPath();
                    ctx.moveTo(20, 20);
                    ctx.lineTo(120, 20);
                    ctx.lineTo(120, 120);
                    ctx.lineTo(20, 120);
                    ctx.closePath();
                    ctx.stroke();
                })();
            </script>
        </div>

        <div>
            <h2>線で矩形を描く(塗りつぶし)</h2>
            <canvas id="fillRect" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("fillRect");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    ctx.beginPath();
                    ctx.moveTo(20, 20);
                    ctx.lineTo(120, 20);
                    ctx.lineTo(120, 120);
                    ctx.lineTo(20, 120);
                    ctx.closePath();
                    ctx.fill();
                })();
            </script>
        </div>

        <div>
            <h2>矩形を描く</h2>
            <canvas id="strokeRect2" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("strokeRect2");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    ctx.strokeRect(20, 20, 100, 100);
                })();
            </script>
        </div>

        <div>
            <h2>矩形を描く(塗りつぶし)</h2>
            <canvas id="fillRect2" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("fillRect2");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    ctx.fillRect(20, 20, 100, 100);
                })();
            </script>
        </div>

        <div>
            <h2>円を描く</h2>
            <canvas id="strokeArc" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("strokeArc");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    ctx.beginPath();
                    ctx.arc(70, 70, 60, 0, Math.PI * 2, false);
                    // arc は strokeRect と違って線が引かれないので、
                    // stroke を呼び出す必要あり
                    ctx.stroke();
                })();
            </script>
        </div>

        <div>
            <h2>円を描く(塗りつぶし)</h2>
            <canvas id="fillArc" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("fillArc");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    ctx.beginPath();
                    ctx.arc(70, 70, 60, 0, Math.PI * 2, false);
                    // arc は fillRect と違って線が引かれないので、
                    // fill を呼び出す必要あり
                    ctx.fill();
                })();
            </script>
        </div>

        <div>
            <h2>線の色を指定する</h2>
            <canvas id="strokeStyle" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("strokeStyle");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    ctx.strokeStyle = "rgb(255, 0, 0)";
                    ctx.beginPath();
                    ctx.arc(70, 70, 60, 0, Math.PI * 2, false);
                    ctx.stroke();
                })();
            </script>
        </div>

        <div>
            <h2>塗りつぶす色を指定する</h2>
            <canvas id="fillStyle" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("fillStyle");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    ctx.fillStyle = "rgb(255, 0, 0)";
                    ctx.beginPath();
                    ctx.arc(70, 70, 60, 0, Math.PI * 2, false);
                    ctx.fill();
                })();
            </script>
        </div>

        <div>
            <h2>縦方向のグラデーション</h2>
            <canvas id="verticalLinearGradient" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("verticalLinearGradient");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    // グラデーション領域の作成
                    var grad = ctx.createLinearGradient(0, 0, 0, 140);
                    // グラデーションに使う色を指定
                    grad.addColorStop(0, "rgb(255, 0, 0)");
                    grad.addColorStop(0.5, "rgb(0, 255, 0)");
                    grad.addColorStop(1, "rgb(0, 0, 255)");
                    // グラデーションで塗りつぶす
                    ctx.fillStyle = grad;
                    ctx.fillRect(0, 0, 140, 140);
                })();
            </script>
        </div>
        
        <div>
            <h2>横方向のグラデーション</h2>
            <canvas id="horizontalLinearGradient" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("horizontalLinearGradient");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    // グラデーション領域の作成
                    var grad = ctx.createLinearGradient(0, 0, 140, 0);
                    // グラデーションに使う色を指定
                    grad.addColorStop(0, "rgb(255, 0, 0)");
                    grad.addColorStop(0.5, "rgb(0, 255, 0)");
                    grad.addColorStop(1, "rgb(0, 0, 255)");
                    // グラデーションで塗りつぶす
                    ctx.fillStyle = grad;
                    ctx.fillRect(0, 0, 140, 140);
                })();
            </script>
        </div>

        <div>
            <h2>円形のグラデーション</h2>
            <canvas id="radialGradient" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("radialGradient");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    // グラデーション領域の作成
                    var grad = ctx.createRadialGradient(70, 70, 0, 70, 70, 70);
                    // グラデーションに使う色を指定
                    grad.addColorStop(0, "rgb(255, 0, 0)");
                    grad.addColorStop(0.5, "rgb(0, 255, 0)");
                    grad.addColorStop(1, "rgb(0, 0, 255)");
                    // グラデーションで塗りつぶす
                    ctx.fillStyle = grad;
                    ctx.beginPath();
                    ctx.arc(70, 70, 60, 0, Math.PI * 2, false);
                    ctx.fill();
                })();
            </script>
        </div>

        <div>
            <h2>画像を表示</h2>
            <canvas id="drawImage" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("drawImage");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    var img = new Image();
                    // 画像の読み込みが終わってから表示する
                    img.onload = function() {
                        ctx.drawImage(img, 0, 0);
                    };
                    // 確実に onload が発生するようにタイムスタンプをくっつける
                    img.src = "sample1.png?" + new Date().getTime();
                })();
            </script>
        </div>

        <div>
            <h2>画像を表示(トリミング)</h2>
            <canvas id="drawImage2" width="140" height="140"></canvas>
            <script type="text/javascript">
                (function(){
                    var canvas = document.getElementById("drawImage2");
                    if (!canvas || !canvas.getContext) {
                        return false;
                    }
                    var ctx = canvas.getContext("2d");
                    var img = new Image();
                    // 画像の読み込みが終わってから表示する
                    img.onload = function() {
                        ctx.drawImage(img,
                                      50, 50, 30, 30,   // 元画像の(30,30)の座標から幅15×高さ15で切り取り
                                      10, 10, 100, 100);// (10,10)の座標から幅100×高さ100で表示
                    };
                    // 確実に onload が発生するようにタイムスタンプをくっつける
                    img.src = "sample2.png?" + new Date().getTime();
                })();
            </script>
        </div>
    </body>
</html>

canvas 要素からコンテキストを取得し、それを使って描画する、というのが基本的な流れ。

ブラウザで表示したときのスクリーンショットも貼っておきます。
f:id:griefworker:20111018200627p:image
絵というよりも図形といった方が適切な気がしますけど、大目に見てください。

それにしても、Canvas は画像を表示するだけでなく、トリミングまでできるので、なかなかパワフルです。ゲームとか実装してみたいですね。

Google ドキュメントみたいに中身がスクロールするリストを実装するメモ

HTML CSS

overflow-y:auto のスタイルを付けた div でラップするだけ。

<html>
    <head>
        <title>Table Test</title>
        <style type="text/css">
            <!--
            /* overflow を指定して内側の
               table をスクロールさせる */
            #list-view {
                overflow-x: hidden;
                overflow-y: auto;

                border: 1px solid black;
                height: 200px;
                width: 300px;
            }

            /* 外側の div に横幅をあわせる */
            #list-table {
                width: 100%;
            }
            #list-table tbody {
                width: 100%;
            }
            /* 項目が分かりやすいように線で囲む */
            #list-table td {
                border: 1px solid black;
            }
            -->
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Table Test</h1>
        </div>
        <div id="main">
            <div id="list-view">
                <!--この table が外側の div からはみ出るときスクロールする-->
                <table id="list-table">
                    <tbody>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                        <tr><td>Test</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

こんな感じになります。
f:id:griefworker:20110330160412p:image

Web デザイナなら、こんなの迷わずに一瞬で書けるんでしょうね。CSS ムズカシイ。

固定幅レイアウトでのナビゲーションのサンプル

HTML CSS

StackOverflow の最上部にあるナビゲーションって、固定された幅の中で項目が左右に寄せてあって、しかも背景はブラウザ画面の幅いっぱいに表示されています。これどうやるんだろう？


気になってソースを調べてみると、ネガティブマージンを使っていました。簡単なサンプルがこちら。

<html>
    <head>
        <title>test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            <!--
            body {
                margin: 0px;
                padding: 0px;
                text-align: center;
            }

            #custom-header {
                width: 100%;
                height: 32px;
                background: #EEE;
                margin-bottom: -32px;
            }

            #topheader {
                float: right;
            }

            #container {
                text-align: left;
                width: 350px;
            }
            -->
        </style>
    </head>
    <body>
        <div id="custom-header">
        </div>

        <div id="container">
            <div id="topheader">
                login | about | faq
            </div>
            <div style="clear:both;"></div>

            <div id="header">
                <h1>test</h1>
            </div>
            <div id="main">
                ここにメインコンテンツを表示
            </div>
        </div>
    </body>
</html>

f:id:griefworker:20110309161034p:image
背景用の div をブラウザ画面の幅いっぱいに表示し、ネガティブマージンを指定してナビゲーションを重ねています。


リキッドレイアウトでサイドバーを実現するのにネガティブマージンを使ったことはあるけど、こんな風に縦方向に使って、しかも他の要素と重ねるなんて使い方は思い付きもしなかったです。


プログラミング同様、Web デザインも有名なサイトの HTML や 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>

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