Blue Trip

最近はやりのグリッドレイアウトのCSS フレームワークです。

もう、これなしでのweb作成は考えられません。

まぁ、今でもテーブルレイアウトで良いじゃないかという化石のような方もいらっしゃるようです…むろん禁止されているわけではありませんが、個人的には勘弁して欲しい。

公式サイトによると、Blueprint、 Tripoli (hence the name)、 Hartija、 960.gs、Elementsなどに影響されたとのことです。

これらのうち、Blueprint、960.gsなども使ってみましたが、私はBrueTripが一番しっくりと来ました。

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" />

BrueTripでは全体を24列で構成します。
ヘッダーを横幅一杯、本体を3：1の2ペインで構成する場合は、以下の様になります。

<div class="container">
  <div id="header" class="span-24">
    ヘッダーはここ
  </div>
  <div id="wrapper" class="span-24">
    <div id="main" class="span-18">
      メインがここ
    </div>
    <div id="sidebar" class="span-6 last">
      サイドバーがここ
    </div>
  </div>
</div>

公式サイト