[CSS]柔軟性のあるグリッドをシンプルで簡単に実装するスタイルシートのチュートリアル

すべてのモダンブラウザとIE8+に対応したグリッドを複雑なフレームワークを使うのではなく、シンプルで簡単に実装するスタイルシートのチュートリアルを紹介します。

Don't Overthink It Grids

下記は各ポイントを意訳したものです。

• ラッパー
• カラム
• フロートのクリア
• ガター（溝）
• 外側のガター（溝）
• カラムの追加
• 対応ブラウザ

ラッパー

まずは、グリッドを包むラッパーです。
グリッド用のラッパーはセマンティック的には特に意味がなく、ただのラッパー（包み紙）です。使用する要素はdivがよいです。

HTML

<div class="grid">
	<!-- 100% wide -->
</div>

表示例

ラッパーとなるdiv要素はブロックレベルのエレメントで、この中にグリッドを包み込みます。

カラム

カラムはよく見かけるメイン コンテンツとサイドバーの2つです。
メイン コンテンツは幅を2/3、サイドバーは幅を1/3にし、2カラムを実装します。

HTML

<div class="grid">
	<div class="col-2-3">
		メイン コンテンツ
	</div>
	<div class="col-1-3">
		サイドバー
	</div>
</div>

2つのdiv要素を並列に配置するため、floatを使用します。

CSS

[class*='col-'] {
	float: left;
}

2つのカラムの幅を個別に指定します。

.col-2-3 {
	width: 66.66%;
}
.col-1-3 {
	width: 33.33%;
}

表示例

左にメイン コンテンツ、右にサイドバーができました。

フロートのクリア

2つのカラムを並列に配置するためにfloatを使ったので、その親要素の高さが0にならないようにするためにクリアします。

CSS

.grid:after {
	content: "";
	display: table;
	clear: both;
}

ガター（溝）

グリッドの実装で最も難しいのは、ガター（溝）ではないでしょうか。ここまでの実装でグリッドを柔軟にするために、幅の指定にパーセントを使用してきました。溝の指定にパーセントを利用することもできますが、個人的にパーセント指定の溝は好きではないので、ピクセル指定で実装してみましょう。

まずは「box-sizing: border-box;」を設定し、padding, borderの値がwidth, heightに含まれるようにします。

CSS

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

これで、パーセントで指定したカラムの幅に影響することなく、padding, boderを使用できるようになったので、paddingを使用してカラムの右側に溝を適用します。

[class*='col-'] {
	padding-right: 20px;
}
[class*='col-']:last-of-type {
	padding-right: 0;
}

これは全てのカラムの右にpaddingを設定し、「:last-of-type」を使用して最後のカラムだけpaddingを0にしています。
このように記述すると、カラムの数を変更してもそのままのコードで利用できます。

表示例

外側のガター（溝）

溝を外側にも設置する必要がありますか？
では、外側にも溝を設置してみましょう。まずは、外側にdiv要素を追加します。

HTML

<div class="grid grid-pad">
	<!-- グリッド -->
</div>

追加したdiv要素にpaddingを指定します。

CSS

.grid-pad {
	padding: 20px 0 20px 20px;
}

正しくpaddingが適用されるよう最後のカラムのpaddingを指定します。

.grid-pad > [class*='col-']:last-of-type {
	padding-right: 20px;
}

表示例

カラムの追加

カラムを追加しても、実装は基本的には同じです。
3カラム、幅を1/4, 1/2, 1/4で実装してみましょう。

HTML

<div class="grid grid-pad">
	<div class="col-1-4">
		<div class="module">
			<h3>1/4</h3>
		</div>
	</div>
	<div class="col-1-2">
		<div class="module">
			<h3>1/2</h3>
		</div>
	</div>
	<div class="col-1-4">
		<div class="module">
			<h3>1/4</h3>
		</div>
	</div>
</div>

カラムの幅をパーセントで指定します。
※トータルで100%になるようにします。

CSS

.col-1-2 {
	width: 50%;
}
.col-1-4 {
	width: 25%;
}

表示例

対応ブラウザ

この実装方法の対応ブラウザはIE8+とすべてのモダンブラウザです。
もしIE7をサポートする必要があれば、何か手を加える必要があります。