ホーム >  レスポンシブデザイン >  グリッド・システムの基本コード


Posted:2014/12/23 9:00:33 AM|Category : レスポンシブデザイン

グリッド・システムの基本コード

米国カリフォルニア州の制作会社 ZURB,Incが提供する「Foundation」の「The Grid」をベースに紹介します。また、前回紹介したグリッド・システムの条件を網羅します。

グリッド・システムとは?

完成イメージ

さまざまな幅のグリッドが並びます。

less0023

ブラウザの幅が小さくなると、横一列のカラムが、縦一列に並びます。

less0030

コード

index.html

<!--[if lt IE 7]><!--> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"> <![endif]-->
<!--[if IE 7]><!--> <html class="no-js lt-ie9 lt-ie8" lang="ja"> <![endif]-->
<!--[if IE 8]><!--> <html class="no-js lt-ie9" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->
<head>
<!-- モバイル・ファーストで定義した IE6-8 以外のブラウザ用 -->
<!--[if (gt IE 8) | (IEMobile 7)]><!-->
<link href="style.css' ; ?>" rel="stylesheet" type="text/css" />
<!--<![endif]-->

<!-- IE6-8 向けのデスクトップ用 -->
<!--[if (lt IE 9) & (!IEMobile 7)]><!-->
<link href="desktop.css' ; ?>" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
  <div class="row">
    <div class="one cols"><p>1</p></div>
      <div class="one cols"><p>1</p></div>
      <div class="one cols"><p>1</p></div>
      <div class="one cols"><p>1</p></div>
      <div class="one cols"><p>1</p></div>
      <div class="one cols"><p>1</p></div>
      <div class="one cols"><p>1</p></div>
      <div class="one cols"><p>1</p></div>
      <div class="one cols"><p>1</p></div>
      <div class="one cols"><p>1</p></div>
      <div class="one cols"><p>1</p></div>
      <div class="one cols"><p>1</p></div>
    </div>
    <div class="row">
      <div class="two cols"><p>2</p></div>
      <div class="two cols"><p>2</p></div>
      <div class="two cols"><p>2</p></div>
      <div class="two cols"><p>2</p></div>
      <div class="two cols"><p>2</p></div>
      <div class="two cols"><p>2</p></div>
    </div>
    <div class="row">
      <div class="three cols"><p>3</p></div>
      <div class="three cols"><p>3</p></div>
      <div class="three cols"><p>3</p></div>
      <div class="three cols"><p>3</p></div>
    </div>
    <div class="row">
      <div class="four cols"><p>4</p></div>
      <div class="four cols"><p>4</p></div>
      <div class="four cols"><p>4</p></div>
    </div>
    <div class="row">
      <div class="five cols"><p>5</p></div>
      <div class="seven cols"><p>7</p></div>
    </div>
    <div class="row">
      <div class="six cols"><p>6</p></div>
      <div class="six cols"><p>6</p></div>
    </div>
    <div class="row">
      <div class="four cols"><p>4</p></div>
      <div class="eight cols"><p>8</p></div>
    </div>
    <div class="row">
      <div class="three cols"><p>3</p></div>
      <div class="nine cols"><p>9</p></div>
    </div>
    <div class="row">
      <div class="two cols"><p>2</p></div>
      <div class="ten cols"><p>10</p></div>
    </div>
    <div class="row">
      <div class="one cols"><p>1</p></div>
      <div class="eleven cols"><p>11</p></div>
    </div>
    <div class="row">
      <div class="four cols"><p>4</p></div>
      <div class="four cols"><p>4</p></div>
    </div>    
    <div class="row">
      <div class="four cols"><p>4</p></div>
      <div class="four cols end"><p>4</p></div>
    </div>
  </div>
</body>
</html>

style.css

@charset "utf-8";

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: #000;
}

p {
	padding: 0 0 30px;
	/*background: #eee;*/
	background: #B6E1FF;
}

.row {
	width: 1140px;
	max-width: 100%;
	min-width: 768px;
	margin: 0 auto;
	background: #ddd;
}

.row .row {
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0 -1.2%;
}

.cols {
	float: left;
	min-height: 1px;
	padding: 0 1.2%;
	position: relative;
	background: #fff;
}

[class*="clos"] + [class*="clos"]:last-child { float: right; }
[class*="clos"] + [class*="clos"].end { float: left; }

.row .one { width: 8.33%; }
.row .two { width: 16.66%; }
.row .three { width: 25%; }
.row .four { width: 33.33%; }
.row .five { width: 41.66%; }
.row .six { width: 50%; }
.row .seven { width: 58.33%; }
.row .eight { width: 66.66%; }
.row .nine { width: 75%; }
.row .ten { width: 83.33%; }
.row .eleven { width: 91.66%; }
.row .twelve { width: 100%; }

@media screen and (max-width: 767px) {
	.row {
		width: auto;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
	}

	.cols {
		float: none;
		width: auto !important;
		height: 50px;
	}

	[class*="clos"] + [class*="clos"]:last-child { float: none; }
	[class*="clos"] + [class*="clos"].end { float: none; }

}

desktop.css

.lt-ie8 .row {
	min-width: 1140px;
}

.lt-ie8 .row .one { width: 5.886%; } /* 8.33 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .two { width: 14.2161%; } /* 16.66 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .three { width: 22.5561%; } /* 25 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .four { width: 30.8861%; } /* 33.33 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .five { width: 39.2161%; } /* 41.66 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .six { width: 47.5561%; } /* 50 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .seven { width: 55.8861%; } /* 58.33 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .eight { width: 64.2161%; } /* 66.66 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .nine { width: 72.5561%; } /* 75 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .ten { width: 80.8861%; } /* 83.33 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .eleven { width: 89.2161%; } /* 91.66 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .twelve { width: 97.5561%; } /* 100 - (1.2 × 2) - 50/1140 */

解説

index.html

htmlを記述します。

htmlタグ
<!--[if lt IE 7]><!--> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"> <![endif]-->
<!--[if IE 7]><!--> <html class="no-js lt-ie9 lt-ie8" lang="ja"> <![endif]-->
<!--[if IE 8]><!--> <html class="no-js lt-ie9" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->

コンディショナル・コメントで、htmlタグのclass属性を分岐します。
[if lt IE 7] IE7未満 :no-js、lt-ie9、lt-ie8、lt-ie7のクラス名を使用。
[if IE 7] IE7の場合 :no-js、lt-ie9、lt-ie8のクラス名を使用。
[if IE 8] IE8の場合 :no-js、lt-ie9のクラス名を使用。
[if gt IE 8] IE8より大きい場合 :no-jsのクラス名を使用。

スタイルシート
<head>
<!-- モバイル・ファーストで定義した IE6-8 以外のブラウザ用 -->
<!--[if (gt IE 8) | (IEMobile 7)]><!-->
<link href="style.css' ; ?>" rel="stylesheet" type="text/css" />
<!--<![endif]-->

<!-- IE6-8 向けのデスクトップ用 -->
<!--[if (lt IE 9) & (!IEMobile 7)]><!-->
<link href="desktop.css' ; ?>" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

・ブラウザのバージョンごと、使用するcssファイルを分けます。
[if (gt IE 8) | (IEMobile 7)] IE8より大きい場合か、モバイルの場合:「style.css」を使用。
[if (gt IE 8) | (IEMobile 7)] ie6~ie8の場合:「desktop.css」を使用。
※前回の記事に詳細が記載しております。

IE8以下でメディアクエリを対応させるには?

style.css

ie8よりバージョンが上のブラウザのcssを記述します。

box-sizing
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

ボックスモデルを「border-box」に変更します。widthで指定した幅が、paddingとborderの幅に関係なく保持されます。指定すれば、ガッターサイズの変更がシンプルになります。

「-moz-box-sizing」は、firefoxのための記述です。
「-webkit-box-sizing」は、iOS4以下・Android2.3以下のための記述です。

IE6、IE7ではサポートされていません。たとえば、以下のようなボックスがあるとします。
例)
border:2px
padding:20px
width:400px

less0027

・「border-box」に指定しない場合
実際のコンテンツの幅:400-(20+2)×2 = 356px

less0028

・「border-box」に指定した場合
実際のコンテンツの幅:400px

less0029

.row
.row {
    width: 1140px;
    max-width: 100%;
    min-width: 768px;
    margin: 0 auto;
    background: #ddd;
}

基本となる幅を1140pxにします。それ以下の表示は「max-width:100%」を指定します。「min-width: 768px;」を使って768以下は横幅が可変しないように指定します。

.row .row
.row .row {
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0 -1.2%;
}

 入れ子にした行のスタイルを記述します。
入れ子にする場合は、両脇のガッターが不要ですので、「margin: 0 -1.2%;」を指定します。

.cols
.cols {
	float: left;
	min-height: 1px;
	padding: 0 1.2%;
	position: relative;
	background: #fff;
}

列のスタイルを記述します。colsとカラム数(one、Two、threeなど)の組み合わせの「class=”two cols”」を各グリッドに指定します。そして、カラム共通のfloatとpaddingを指定します。「position:relative」は、PUSHとPULLを実現するためで、表示順が調整できるようになります。43行目のendクラスを指定するのは、カラム数が少ない場合に右寄せをリセットするためです。

行の最後のカラム
    <div class="row">
      <div class="four cols"><p>4</p></div>
      <div class="four cols"><p>4</p></div>
    </div>    
    <div class="row">
      <div class="four cols"><p>4</p></div>
      <div class="four cols end"><p>4</p></div>
    </div>
[class*="clos"] + [class*="clos"]:last-child { float: right; }
[class*="clos"] + [class*="clos"].end { float: left; }

CSSの属性セレクタと隣接兄弟セレクタを使います。行の最後の行を右寄せにします。ブラウザごとの小数点以下単位の扱いが違うため、差を調整する役割です。

endクラスを指定しない場合

カラムが左につめられないままです。

less0032

endクラスを指定した場合

カラムが左につめられます。

less0031

カラム幅指定
.row .one { width: 8.33%; }
.row .two { width: 16.66%; }
.row .three { width: 25%; }
…(省略)…

各グリッドのサイズを指定します。
1カラムの幅 = 100% ÷ 12 = 8.33%
2カラムの幅 = 100% ÷ 6 = 16.66%
3カラムの幅 = 100% ÷ 4 = 25%
以下省略

メディアクエリ
@media screen and (max-width: 767px) {
	.row {
		width: auto;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
	}

	.cols {
		float: none;
		width: auto !important;
		height: 50px;
	}

	[class*="clos"] + [class*="clos"]:last-child { float: none; }
	[class*="clos"] + [class*="clos"].end { float: none; }

}

767px以下では全て1カラムにします。

@media screen and (max-width: 767px)

767px以下の表示に対してスタイルシートを適用します。

.row

rowクラスは行をコントロールします。
1カラム表示の場合は、画面の最大幅を使用します。
そのために、widthにauto指定します。
最小幅(min-width)とmarginを0にリセットします。

.cols

colsクラスは列をコントロールします。
floatをリセットします。
1カラム表示の場合は、画面の最大幅を使用します。
そのために、widthにauto指定します。
「!important」は、幅を優先的にautoに指定します。
「.row .one」「.row .two」などのスタイルがrowクラスのみの幅指定より優先度が高いためです。

72~73行目

最後の行にきたカラムのfloatをnoneにリセットします。

desktop.css

IE7向けは幅を固定
.lt-ie8 .row {
	min-width: 1140px;
}

そもそもIE7はデスクトップ向けブラウザであるため、可変グリッドは不要です。IE7では、横幅を「min-width: 1140px;」と固定します。

IE7向けcss
.lt-ie8 .row .one { width: 5.886%; } /* 8.33 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .two { width: 14.2161%; } /* 16.66 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .three { width: 22.5561%; } /* 25 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .four { width: 30.8861%; } /* 33.33 - (1.2 × 2) - 50/1140 */

.lt-ie8 .row .five { width: 39.2161%; } /* 41.66 - (1.2 × 2) - 50/1140 */

IE7では、box-sizingがサポートされていません。カラム幅の指定をやり直します。

①幅から、ガッターサイズ(padding)と調整値を引きます。

②そして、小数点以下の数値の扱いがブラウザごとことなるため調整値を引きます。

例).row .oneの場合

①ガッターサイズを引く:8.33%-(1.2×2)=5.93%

②調整値を引く:5.93%-50÷1140px=5.886%
調整値につきましては、こちらのサイトで紹介されています。

レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告