[CSS]表示サイズに合わせて最適なグリッドを構築するスタイルシート -SimpleGrid

デスクトップ用のブラウザだけでなく、iPhoneなどスマートフォンにも対応した、表示サイズに最適なレイアウトを適用するResponsive Web Design用のシンプルなグリッドシステムを紹介します。

SimpleGrid
デモページ

[ad#ad-2]

SimpleGridのデモ

SimpleGridでは、4種類のサイズにそれぞれ最適なレイアウトを適用します。

1235px～
※画像クリックで拡大

985px～
※画像クリックで拡大

720px～
※画像クリックで拡大

～720px
※画像クリックで拡大

[ad#ad-2]

SimpleGrid 3つの特徴

Responsive Web Design

SimpleGridは4種類のスクリーンサイズで最適なレイアウトを提供します。
水平スクロールバーとは、さよならです。

• ～720px
• 720px～
• 985px～
• 1235px～

効率的なclass管理

同様のグリッドシステムの多くは、同じサイズのグリッドを一つのclassで管理します。SimpleGridではユニットの最初・中央・最後を個別のclassで管理します。

スタイルシートはシンプルに

SimpleGridは管理のしやすいシンプルなclass名を採用しています。また、ユニットの最後に余分なclassをつける必要もありません。

SimpleGridの実装

デモページ（ダウンロードファイル）を元に、SimpleGridの実装方法を紹介します。

スタイルシートのセット

SimpleGridは4つのスタイルシートを使用します。

	<link rel="stylesheet" href="./css/base.css" type="text/css" media="all">
	<!--&#91;if lt IE 9 &#93;><link rel="stylesheet" href="./css/720_grid.css" type="text/css"><!&#91;endif&#93;-->
	<link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)">
	<link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)">
	<link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" >

HTML：6カラム

ベーシックなユニットで構成された6カラムのHTMLです。

<div class="row">
	<div class="slot-0"></div> 
	<div class="slot-1"></div> 
	<div class="slot-2"></div> 
	<div class="slot-3"></div> 
	<div class="slot-4"></div> 
	<div class="slot-5"></div> 
</div>

HTML：4カラム

ベーシックなユニットで構成された4カラムのHTMLです。

<div class="row">
	<div class="slot-6"></div> 
	<div class="slot-7"></div> 
	<div class="slot-8"></div> 
	<div class="slot-9"></div> 
</div>

ユニットは6カラム用の4カラム用のもので構成されており、これらを組み合わせて、さまざまなグリッドを生成することができます。

HTML：3カラム

6カラムの変形です。
1と2、3と4と5、を連結する感じです。

<div class="row">
	<div class="slot-06"></div> 
	<div class="slot-1-2"></div> 
	<div class="slot-3-4-5"></div> 
</div>

他にも、ネストなどで複雑なグリッドを生成することも可能です。