レスポンシブ・グリッドレイアウト

はじめに

黯羽軽揚のホームページは、擬似絶対配置（Faux Absolute Positioning）を使用して実現された24列960グリッドです。擬似絶対配置とグリッドレイアウトはまさに絶妙な組み合わせで、柔軟性、適応性、使いやすさは文句なしです。ブログでも引き続き960グリッドを使用しますが、モバイル端末での閲覧に対応させる必要があるため、当然メディアクエリを検討しました。その結果、グリッドを解除するのも非常に容易であることが分かりました（もちろん、これらはすべて擬似絶対配置の恩恵です）。

1. 擬似絶対配置

擬似絶対配置が登場したのは、絶対配置（Absolute Positioning）とフロート配置（Float Positioning）がいずれもグリッドレイアウトにおいて様々な弊害を抱えていたからです。

絶対配置グリッドの欠点：

高さの自動調整ができない

position: absolute; を指定すると、要素は標準のドキュメントフローから外れ、ブラウザのレンダリング時に高さが計算されなくなります。そのため、親要素が崩壊（高さの自動調整が不能）してしまいます。
動的レイアウトで使用できない

絶対配置ではない要素が混在する場合、その要素の配置が非常に困難になります（(left, top) 地点にコンテンツがあるかどうかを判断できないため）。

フロート配置グリッドの欠点：

脆弱性

どの要素の width、margin、padding、border もページ全体のレイアウトに影響します。幅が1pxでも超えると、行末の要素が押し下げられ、その下のすべての行が崩れてしまいます。緻密に計算されたピクセル単位のレイアウトが、一瞬で台無しになります。

擬似絶対配置はこれらの問題を解決し、グリッドレイアウトにおいて非常に使い勝手が良いです。原理はシンプルです：

トップレベルコンテナの幅を固定する

 .body {
     overflow: hidden;   /* 補助配置用の下位コンテナを非表示にする */
     width: 950px;       /* 幅を固定 */
 }

子コンテナをトップレベルコンテナの外側、右端にフロートさせる

 .container {
     float: left;         /* フロート */
     position: relative;  /* ステップ3の準備 */
     width: 100%;         /* コンテンツにネガティブマージンの参照を提供 */
     left: 100%;          /* 外に出す */
 }

子コンテナの内容にネガティブマージンを適用し、トップレベルコンテナの領域内に戻す

 /* 2カラム 100 : 850 */
 .content1 {
     margin-left: -950px;    /* トップレベルコンテナ領域に戻す */
     width: 100px;
 }
 .content2 {
     margin-left: -850px;    /* トップレベルコンテナ領域に戻す */
     width: 850px;
 }

子コンテナの内容が右側の見えない子コンテナを押し広げ、すべての第2レベルのコンテナがトップレベルコンテナを支えることができるため、高さが自動調整されます。配置はネガティブマージンに依存し、フロート配置には依存しないため、一つの要素の変更が全体に波及する問題も存在しません。

2. メディアクエリ（Media Query）

メディアクエリでレスポンシブレイアウトを実現するには、まず2つの問題を解決する必要があります：

1. メディアクエリの条件

スマートフォン、タブレット、PCの幅に合わせて個別にメディアクエリを書く必要はありません。例えば、960グリッドは幅が960px以上のデバイスでは正常に表示されますが、960px未満のデバイスでは正常に表示されません。そのため、もう一つのスタイルセット（max-width: 959px）を用意するだけで十分です。もちろん、これはデバイスの物理ピクセルを指しますが、互換性の高い方法は以下の通りです：

HTMLでwidthを物理ピクセル幅として宣言する

 <meta name="viewport" content="width=device-width, initial-scale=1" />

CSSでwidthを物理ピクセル幅として宣言する

 /* IE10+ */
 @-ms-viewport {
     width: device-width;
 }
 /* W3C標準 */
 @viewport {
     width: device-width;
 }

メディアクエリ

 /* <=959 */
 @media screen and (max-width: 959px) {
 /*...*/
 }

2. グリッドの解除

小画面デバイス向けのスタイルでは、構築済みのグリッドを上書きする必要があります。理想的なのは、上書きが必要なすべてのスタイルをリセットできる便利な reset があることです。もちろんそれは不可能ですが、擬似絶対配置で実装されたグリッドを解除するのは非常に簡単です：

/* トップレベルコンテナ */
.body {
    overflow: visible;
    width: auto;
}
/* 子コンテナ */
.container {
    float: nonr;
    position: static;
    width: auto;
    left: auto;
}
/* 内容 */
.content {
    margin-left: 0;
    width: auto;
}

これらの値をデフォルトに戻すだけでグリッドを解除できます。これは非常に大きな利点です（もし絶対配置グリッドであれば、グリッドを解除する作業量を想像しただけで恐ろしいことになります……）。

3. Bootstrapのグリッド

Bootstrapもレスポンシブ・グリッドを提供しており、以下の機能をサポートしています：

デバイス区分（col-xs、col-sm、col-md、col-lg）
カラムオフセット
ネストされたカラム（グリッドレイアウト自体の特徴と言えます）
カラムの並べ替え（HTMLの宣言順とは異なる表示順序への調整）

Bootstrapで使用されているのは擬似絶対配置グリッドではなく、パーセントによるレイアウトです。

参考資料

http://960.gs/：無数のグリッドレイアウト
Bootstrap 栅格系统
Faux Absolute Positioning：オリジナル版
伪绝对定位(译)：翻訳版、おすすめ