2012年11月30日

カテゴリ：　Web制作

擬似クラスを使ってレスポンシブなカラムレイアウトを作成する

• Tweet
• 

シンプルなレスポンシブのカラムレイアウトを作成するＴｉｐｓがあったのでメモしておく。
ブレークポイントで4カラムが3カラムになったり、3カラムが2カラムへというレイアウトを作ることができる。

こちらのサイトの記事を意訳しました。

Responsive Column Layouts 

よくやりがちなのが、並べたカラムの端っこの要素に.firstとか.lastとかクラスをつけること。
でもこれってその要素が常に端っこにあるのが前提だから、レスポンシブデザインには向いてない。

じゃあこれをどうにかうまいことしていく、ってことでまずは完成したデモを見てください。

DEMO

ちゃんとレスポンシブしてる。これをどうやって作るか説明していく。

擬似クラスnth-of-typeを使う。

nth-of-type(An+B)という書き方なら.firstとか.lastといった余計なクラスが必要がなくて便利。

例えば、
.col:nth-of-type(4n+1)　と書くと最初の.col要素と、そこから数えて4つ目ごとの.col要素がターゲットになる。（1番目、5番目、9番目…）

.col:nth-of-type(3n+1)　なら最初の要素とそこから3つ目ごと、

.col:nth-of-type(2n+1)　なら最初の要素とそこから2つ目ごとの要素がターゲットになる。

.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
}

メディアクエリを使ってレスポンシブ化する。

レスポンシブデザインにするために、widthやmarginはpxではなく%指定で。

/* col */
.col {
	background: #eee;
	float: left;
	margin-left: 3.2%;
	margin-bottom: 30px;
}

/* grid4 col */
.grid4 .col {
	width: 22.6%;
}

/* grid3 col */
.grid3 .col {
	width: 31.2%;
}

/* grid2 col */
.grid2 .col {
	width: 48.4%;
}

4カラムを3カラムに変更させる。

ここでは画面幅が740px以下になったら4カラムから3カラムに変化するように設定する。

1. .grid4 .colで設定しているwidthを31.2%（1/3のwidth）に変更する。
2. left marginをリセットする。
3. 3カラムに変化したのでnth-of-type(3n+1)を使ってleft marginを3カラム用にセットしなおす。

@media screen and (max-width: 740px) {
	.grid4 .col {
		width: 31.2%;
	}
	.grid4 .col:nth-of-type(4n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 0;
		clear: left;
	}
}

次は3カラムを2カラムに変化するようにする。

ここでは画面幅が600pxを下回ったら変更するように設定。
手順は先ほどの同じ。

@media screen and (max-width: 600px) {
	/* change grid4 to 2-column */
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* change grid3 to 2-column */
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
}

画面幅400px以下になったら全部のカラムを幅100%にしてmarginやfloatも解除するように書く。

@media screen and (max-width: 400px) {
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}

これでレスポンシブなカラムレイアウトの出来上がり。

やっぱりIEが問題に。。　orz

ただ、メディアクエリとnth-of-typeの擬似クラスはIE8以下ではサポートされてない。
メディアクエリをサポートするためにselectivizr.jsってやつが、IEでnth-of-typeをサポートするためにrespond.jsってやつがあるけど、一緒に使うとどうもうまく動かないみたい。

スマホやタブレットでIE8使うってこともまずないだろうし、これは切捨てでもOKじゃないかな。

以上、わりとお手軽にレスポンシブデザインが楽しめるので、始めの一歩として試してみるにはいい内容だと思いご紹介しました。

元記事>> Responsive Column Layouts