[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>
実装のイメージ:6カラム

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>
実装のイメージ:4カラム

ユニットは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>
実装のイメージ:3カラム

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

実装のイメージ:6カラム

sponsors

top of page

©2018 coliss