anti scroll

ブラウザと小説の新しい関係を模索する

960 grid system メモ

ブラウザごとのレイアウト整合性を確認するのがしんどくなってきたので、何か統一的に使えるCSSフレームワークを導入しようと思いました。

960 Grid System というグリッドフレームワークを使うと、IE用のファイルとかが必要ないらしいです。

でも今はぶっちゃけblueprintcssの方が気に入っています。

グリッドのサイズを自分好みに変えたい場合は、こちらのジェネレーターから作成できるようです。

使い方はデモページFirebugの「要素を調査」などで追いかけるだけでわかりますが、毎回調べるのもあれなので、自分用の覚え書きを残しておきます。blueprint みたいなチートシートを誰か作ってくれないかな。

960 grid systemにおけるグリッドの割り当て方なのですが、960pxを12列に分ける定義と、16列に分ける定義が用意されています。

12列の定義では、各列が60pxごとに区切られ、16列では40pxごとに区切られます。どちらを採用しても、グリッド間の余白の長さは20pxです(最左列の左余白と最右列の右余白は10px)。つまり、例えば2列(grid_2)を入れるときは、60pxの列が2つと、間に挟まる余白が1つだから、2 * 60 + 20 = 140px の幅を確保することになります。一般に確保したグリッドの横幅は、グリッド数を n、単位グリッド長をGW 、余白の幅をMとすると、

n * GW + (n-1) * M = n(GW+M) - M

12列と16列の定義、どちらを採用するにしても使用するCSSは同じで、reset.css、960.cssです。オマケでtext.css も読み込むと、h1,h2,h3などの関係が黄金率になったり、各種のタグに一貫したマージンが割り当てられたりなどして、見栄えが格好良くなります。

前置きはここまでとして、実際にどんな風にマークアップするのか。以下、12列のグリッドシステム(container_12)を採用したという前提です。

12列のグリッドシステムの中で、左から11列と1列に分けた列を記述すると、

<div class='container_12'>
  <div class='grid_11'>11列</div>
  <div class='grid_1'>1列</div>
  <!-- これが改行に当たる。明示的に書かなければならない -->
  <div class='clear'></div>
</div>

表示させると、こんな感じになります。

f:id:convertical:20130827101734p:plain

左に2列右に8列を空けた1列を指定したい場合は、prefix、suffixというクラスを使って

<div class='container_12'>
  <div class='grid_1 prefix_2 suffix8'>左に2列、右に8列空けた1列</div>
  <div class='clear'></div>
</div>

表示させると、こんな感じになります。一列のグリッドの左に2列、右に8列が空いています。

f:id:convertical:20130827101745p:plain

12列の中に別のグリッド領域を入れ子で作るときは、pull と push を使います。

左側に入れ子を作るのがpull_n(nは割り当てるグリッド数)で、右側がpush_n(nは割り当てるグリッド数)です。例えばこんな感じです。

<!-- 全体は12列のグリッド -->
<div class='container_12'>

  <!-- 右側に6列の入れ子グリッドを作成 -->
  <div class='grid_6 push_6'>

    <!-- 1行目 -->
    <div class='grid_2 alpha'>R-1-1</div>
    <div class='grid_2'>R-1-2</div>
    <div class='grid_2 omega'>R-1-3</div>
    <div class='clear'></div>

    <!-- 2行目 -->
    <div class='grid_3 alpha'>R-2-1</div>
    <div class='grid_2'>R-2-2</div>
    <div class='grid_1 omega'>R-2-3</div>
    <div class='clear'></div>
  </div>

  <!-- 左側に6列の入れ子グリッドを作成 -->
  <div class='grid_6 pull_6'>

    <!-- 1行目 -->
    <div class='grid_1 alpha'>L-1-1</div>
    <div class='grid_3'>L-1-2</div>
    <div class='grid_2 omega'>L-1-3</div>
    <div class='clear'></div>

    <!-- 2行目 -->
    <div class='grid_2 alpha'>L-2-1</div>
    <div class='grid_2'>L-2-2</div>
    <div class='grid_2 omega'>L-2-3</div>
    <div class='clear'></div>
  </div>
  <div class='clear'></div>
</div>

実際にはこんな見え方になります。

f:id:convertical:20130827101759p:plain

気をつけなきゃいけないポイントは2つあって、1つ目は、右側の入れ子を先に書くことです。

右側のpush_6は、左から6列分の座標を与えることで右に寄せる、という意味です。そして、左側のpull_6は、右に寄せた要素の「マイナス6列分の座標」を与えて左側に表示させる、という意味になります。

.push_6{ left:480px; }
.pull_6{ left:-480px; }

次に気をつけなきゃいけないのは、入れ子のグリッドの中では、最も左側のグリッドには「alpha」クラスを、そして最も右側のグリッドには「omega」クラスを与えないといけません。

最も外側のグリッド(この場合はcontainer_12)で最左領域と最右領域には既に余白が与えられているので、入れ子の中のグリッドではそれをゼロにする必要があるわけですね。

つまり alpha、omegaの定義はこうなっています。

.alpha{ margin-left:0 }
.omega{ margin-right:0 }

最後に、上記のレイアウトをIEで動作確認してみたのですが、残念ながらグリッドのセンタリングには失敗していました。

というわけで、以下のようなお決まりのIEハックは、ここでも捨てることが出来ないようです。

body{ text-align:center }
div{ text-align:left; }