段組みのCSS。
テーブルレイアウトで2段組みレイアウト

続いて、displayプロパティの値tabletable-cellを利用して、レイアウトを作ってゆきたいと思います。
と言っても、floatプロパティを使ったレイアウトの項で、メディアクエリの細かいポイントは整理できたので、あとは、フロートしてたところを、テーブルレイアウトで置き換えてゆくだけ、なはずです!

ヘッダーとナビゲーション

ひとまず、フロートの時のメディアクエリはそのままに、フロートしていた要素をテーブルレイアウトに置き換えます。
nav要素とナビゲーションにdisplay: table(テーブル)を指定して、サイトタイトルとナビゲーションボタンにはdisplay: table-cell(テーブルセル)を指定します。
ナビゲーションは、415px以上の時にはtableが適用されますが、768px以上の時にはtable-cellに上書きされることになります。

@media print, (min-width: 415px) {
	.nav-list {
		display: table;
	}
	.nav-list li {
		display: table-cell;
		border-left: 1px solid #eee;
	}
}
@media print, (min-width: 768px) {
	header nav {
		display: table;
		line-height: 80px;
	}
	.site-title, .nav-list {
		display: table-cell;
	}
	.nav-list a {
		padding: 0 2em;
	}
}

中央に寄っちゃいました。テーブル要素は、特に横幅の指定がないと、その内容にぴったりなサイズになってしまうので、nav要素をヘッダー内いっぱいに広げるために、nav要素の横幅を100%に指定します。
それから、767px以下の時にはナビゲーションが横幅いっぱいになるよう、ナビゲーションの横幅を100%に指定。

@media print, (min-width: 768px) {
	header nav {
		display: table;
		width: 100%;
		line-height: 80px;
	}
	⋮
}
@media screen and (max-width: 767px) {
	.nav-list {
		width: 100%;
	}
	⋮
}

縦方向の位置が、今はbaselineに揃っている状態なので、これを中央揃えにするため、table-cellを指定している要素にvertical-alignプロパティmiddleを指定します。

@media print, (min-width: 768px) {
	⋮
	.site-title, .nav-list {
		display: table-cell;
		vertical-align: middle;
	}
	⋮

ナビゲーションがロゴ側へ寄っちゃってますね…。これはテーブルレイアウトが持つアルゴリズムによって、よしなに横幅が決められているため。ここでは、このアルゴリズムを利用して、サイトタイトルの横幅を若干大きめに指定することで、テーブル要素を内側から広げるようにしたいと思います詳しくは後述

@media print, (min-width: 768px) {
	⋮
	.site-title {
		width: 60%;
	}
	⋮

あと、767px以下の時ナビゲーションボタンが均等になるところは、せっかくテーブルレイアウトなのでtable-layoutプロパティの値をfixedとすることで均等に割り付けるようにします。すると、li要素への横幅の指定も要らないので、414px以下で横幅を戻す指定も要らなくなりますね:D

@media screen and (max-width: 767px) {
	.nav-list {
		width: 100%;
		table-layout: fixed;
	}
	⋮

テーブルレイアウトのヘッダー完成ー。

ページトップへ戻る

メインコンテンツとサイドメニュー

続いて、コンテンツエリアをテーブルレイアウトで2段組みです。
さっそく、#contents要素にtable、メインコンテンツとサイドメニューにtable-cellを指定します。
ただし、前述の自動テーブルレイアウトアルゴリズムの所為で、テーブルセルに横幅を指定しても思い通りの横幅にはならないため、メインコンテンツには75%、サイドメニューには25%を指定して、メインコンテンツとサイドメニューの隙間は、それぞれの内側にパディングで、明示的にpx幅を指定して空けることにします。

@media print, (min-width: 768px) {
	#contents {
		display: table;
	}
	main, aside {
		display: table-cell;
	}
	main {
		width: 75%;
		padding-right: 20px;
	}
	aside {
		width: 25%;
		padding-left: 20px;
	}
}

メインビジュアルもいっしょくたに、テーブルセルはみなよこ並びになってしまうんですね…。
そこで、メインビジュアルだけ横幅いっぱいに配置するため、メインビジュアルにはdisplay: table-captionを指定します。テーブルキャプションならテーブルの上部に鎮座してくれるはずです。

@media print, (min-width: 768px) {
	#contents {
		display: table;
	}
	.visual {
		display: table-caption;
	}
	⋮

ただし、テーブルキャプションはテーブル要素に指定してるパディングは無視して鎮座してしまうので、テーブル要素(#contents要素)に指定している左右のパディングをもう一度、メインビジュアルにも指定してやります。
あとは、メインコンテンツとサイドメニューの縦方向の位置を上辺で揃えるために、table-cellを指定した要素にvertical-align: topを指定すれば、いっちょあがり。

@media print, (min-width: 768px) {
	⋮
	.visual {
		display: table-caption;
		padding: 0 16px;
	}
	main, aside {
		display: table-cell;
		vertical-align: top;
	}
	⋮

メインコンテンツのバナー

ここも、コンテンツエリアの2段組みと同じ要領で、テーブルレイアウトに置き換えればよいですねー。
ul要素にはtable、li要素にはtable-cellを指定して、横幅は50%に指定します。隙間を16px空けるために、最初のli要素は右側に、最後のは左側に8pxずつパディングを指定します。767px以下の時は8px空けたいので、4pxずつにすればできあがり。

main .bnr-list {
	display: table;
}
main .bnr-list li {
	display: table-cell;
	width: 50%;
}
main .bnr-list li:first-child {
	padding-right: 8px;
}
main .bnr-list li:last-child {
	padding-left: 8px;
}
@media screen and (max-width: 414px) {
	main .bnr-list li:first-child {
		padding-right: 4px;
	}
	main .bnr-list li:last-child {
		padding-left: 4px;
	}
}

ページトップへ戻る

商品一覧と記事一覧

これらもひとまず、フロートしてた部分をテーブルレイアウトに書き換えてゆきます!
それぞれ、ul要素にはtable、li要素にはtable-cellを指定して、フロートの時と同じように、li要素の左側にパディングで隙間を空けて、ul要素のズレをネガティブマージンで戻します。
案の定、こんな感じになります。やっぱり、ひどく申し訳ない気持ちになりますね…。X(

商品一覧
.menu-list {
	display: table;
	margin-left: -24px;
}
.menu-list li {
	display: table-cell;
	width: 33.333333%;
	padding-left: 24px;
	vertical-align: top;
}

商品一覧みたく、複数行に渡る一覧はテーブルレイアウトには向いてないです(「よこ並びのCSS。」参照のこと)

どうしてもテーブルレイアウトじゃなきゃいやだ、という場合には、水平にスクロールするコンテンツにしちゃう手があります。
テーブルセル(li要素)には、横幅を指定しても、親要素の横幅に合わせて調整されちゃうので、一定サイズより小さくならないように、最小幅を指定しておくことにします。
ul要素には、ちょっと横着して、display: tableを指定しません。ブロック要素のままにしておくことで、明示的に横幅を指定してoverflow: autoを指定した時に、横スクロールバーが表示されるようになります。

商品一覧
.menu-list {
	overflow: auto;
	margin-left: -24px;
}
.menu-list li {
	display: table-cell;
	min-width: 200px;
	padding-left: 24px;
	vertical-align: top;
}

同じように、サイドメニューの記事一覧とバナー一覧も、スクロールバーが出るように指定してます。どうせスクロールするやつなので、li要素の横幅は固定にしちゃって良いかもしれません。

一覧をスクロールすると、左側の見切れる位置が、セクションエリアからはみ出しちゃってますね…。ul要素を左にズラすと、見切れる位置ごとズレちゃうので、ul要素にネガティブマージンは指定しない方が良さそうですね…。代わりに、li要素のパディングは、最初のli要素以外に指定することにします。

商品一覧
.menu-list {
	overflow: auto;
}
.menu-list li {
	display: table-cell;
	min-width: 200px;
	vertical-align: top;
}
.menu-list li:not(:first-child) {
	padding-left: 24px;
}

最初の画像だけ大きくなっちゃいましたね。content-boxプロパティでborder-boxが指定されてるため、パディングがない分、要素の内容が広がっちゃうんです…。なので、li要素にはcontent-boxを指定して、widthプロパティの値にパディングを含めないようにすれば万事解決:)

商品一覧
.menu-list li {
	display: table-cell;
	min-width: 200px;
	vertical-align: top;
	box-sizing: content-box;
}

隙間がちょっと広い気がするのでちょっと調整したらば、できあがり!

ページトップへ戻る

フッターのサイトマップ

画像の回り込みのところとお知らせ一覧は、テーブルレイアウトではどうしても難しそうなのでパス…。
最後に、フッターの多段組みを、テーブルでレイアウトします。ここもひとまず、フロートしてたところをテーブルレイアウトに置き換えるカタチで、.sitemap-listtable、横幅を100%に指定して、.grouptable-cellを指定します。

@media print, (min-width: 768px) {
	.sitemap-list {
		display: table;
		width: 100%;
		margin-left: -16px;
	}
	.sitemap-list .group {
		display: table-cell;
		width: 20%;
		padding-left: 16px;
	}
	⋮

やっぱり、テーブルセルにはマージンが適用されないから、全部よこに並んで、最後のグループが潰れちゃいました…。5列は諦めて、6列にするしかないですね…。せめて、グループに横幅を指定するのはやめて、table-layout: fixedで自動的に均等に割り付けるようにしましょう。

@media print, (min-width: 768px) {
	.sitemap-list {
		display: table;
		table-layout: fixed;
		⋮

あと、テーブル要素の横幅が、左へネガティブマージンを指定した分広がっているので、100%でなくて、calc(100% + 16px)を指定しなくちゃいけません。

@media print, (min-width: 768px) {
	.sitemap-list {
		display: table;
		table-layout: fixed;
		width: calc(100% + 16px);
		margin-left: -16px;
	}
	.sitemap-list .group {
		display: table-cell;
		padding-left: 16px;
	}
}

これにて、テーブルレイアウトで2段組みレイアウト、おしまーい!

Comment & Pingback

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください