段組みのCSS。
インライン・ブロックで2段組みレイアウト

続いて、displayプロパティの値inline-blockを使って、ページをレイアウトしてゆきます。テーブルレイアウトの時と同じく、フロートしてたところを、インライン・ブロックに置き換えながら、調整するだけのかんたんな作業です。

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

ひとまず、フロートの時のメディアクエリはそのままに、サイトタイトルとナビゲーション、ナビゲーションボタンにdisplay: inline-blockを指定してみます。

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

妙な隙間をなくすには、letter-spacingプロパティで文字間を調整すれば良いんでした。それから、縦方向の位置をvertical-alignプロパティでmiddleに揃えます。※詳しくは「よこ並びのCSS。」という記事を参照のこと。

@media print, (min-width: 415px) {
	header nav {
		letter-spacing: -.5em;
	}
	.site-title,
	.nav-list {
		vertical-align: middle;
	}
	.nav-list li {
		display: inline-block;
		border-left: 1px solid #eee;
		letter-spacing: 0;
	}
}

インライン・ブロックな要素を右側に寄せるには、その親要素にtext-align: rightを指定すれば、右揃えになるのですけれど、それだとサイトタイトルごと右へ寄ってしまいます。なのでここでは、ul要素をヘッダーの右側いっぱいにまで広げて、li要素を右揃えにすることで、ナビゲーションボタンだけ右側へ寄せることにします。
そのために、まず、サイトタイトルの横幅を200pxに固定。ul要素にはその残りの幅100% - 200pxを指定することで、サイトタイトルとナビゲーションが、ヘッダーにみっちり配置されるはずです。

@media print, (min-width: 768px) {
	⋮
	.site-title {
		width: 200px;
	}
	.nav-list {
		width: calc(100% - 200px);
		text-align: right;
	}
	.nav-list li a {
		padding: 0 2em;
	}
}
サイトタイトルとナビゲーションをヘッダー内にみっちり並べて、ナビゲーションボタンを右揃えに。

横幅が狭い時のレイアウトは、フロートの時と同じままで問題なさそうですねー。ヘッダー落着!

ページトップへ戻る

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

ひとまず、#contents要素に、妙な隙間を消すためのletter-spacingを指定して、main要素とaside要素をインライン・ブロックにします。それぞれ横幅を指定して、メインコンテンツとサイドメニューの隙間は、テーブルレイアウトの時と同じ要領で内側にパディングで空けて、vertical-align: topで上揃えにすれば、整いました!

@media print, (min-width: 768px) {
	#contents {
		letter-spacing: -.5em;
	}
	main, aside {
		display: inline-block;
		letter-spacing: 0;
		vertical-align: top;
	}
	main {
		width: 75%;
		padding-right: 20px;
	}
	aside {
		width: 25%;
		padding-left: 20px;
	}
}

バナーと商品一覧と記事一覧

バナーのところは前述の方法と同じでうまくいきそうです。
妙な隙間を消す術を施しつつ、li要素をインライン・ブロックに。横幅を50%にして、ひとつめのli要素は右側にパディング、ふたつめは左側にパディングを指定で、できあがり。

main .bnr-list {
	letter-spacing: -.5em;
}
main .bnr-list li {
	display: inline-block;
	width: 50%;
	letter-spacing: 0;
}
main .bnr-list li:first-child {
	padding-right: 8px;
}
main .bnr-list li:last-child {
	padding-left: 8px;
}

商品一覧と記事一覧も同じく、妙な隙間を消す術を施しつつ、li要素をインライン・ブロックに。隙間の空け方は、フロートの時と同じように、li要素の左側にパディングで隙間を空けて、ul要素のズレをネガティブマージンで元に戻せば、あっというまに整いました!XD

商品一覧
.menu-list {
	margin-left: -24px;
	letter-spacing: -.5em;
}
.menu-list li {
	display: inline-block;
	width: 33.333333%;
	padding-left: 24px;
	letter-spacing: 0;
	vertical-align: top;
}

お知らせ一覧

インライン・ブロックもやっぱり、画像の回り込みは難しいのでパスして、お知らせ一覧をレイアウトします。
ひとまず、日付と内容をインライン・ブロックにして。例によって、妙な隙間を埋める術も施します。
あとは、ヘッダーと同じ要領で、dl要素の中に、日付と内容をみっちり並べるように、日付(dt要素)の横幅を9.6em、内容(dd要素)の横幅を100% - 9.6emという風に指定します。

@media print, (min-width: 415px) {
	⋮
	.info-list dt {
		width: 9.6em;
	}
	.info-list dd {
		width: calc(100% - 9.6em);
	}
}

綺麗に並びましたけれど、ボーダーが途中で途切れちゃってますね…。フロートの時はdd要素が日付の下に入り込んでたので、日付の下までボーダーが引かれてたのだけれど、インライン・ブロックはdd要素ごと隣に並んでるだけなので、ボーダーが内容の下にしか引かれないんですね。
フロートした時と同じ状況を作るべく、dd要素にネガティブマージンを指定して、dt要素の範囲までdd要素を伸ばして、そのあとパディングで元の位置に戻す、という風にしてみます。

@media print, (min-width: 415px) {
	⋮
	.info-list dd {
		width: calc(100% - 9.6em);
		margin-left: -9.6em;
		padding-left: 9.6em;
	}
}

うまくいくかなと思ったけれど、ぐちゃぐちゃ…。ネガティブマージンを指定した分、右側に空きができてしまったので、そこに日付が並んでしまって、次の内容がdl要素の先頭にきちゃったもんだから、そこからネガティブマージンで枠の外へハミ出しちゃって、大変なことになってます。X(

ネガティブマージンとパディングの状態

内容の横幅は100%にすれば良いということですね。できました!

@media print, (min-width: 415px) {
	⋮
	.info-list dd {
		width: 100%;
		margin-left: -9.6em;
		padding-left: 9.6em;
	}
}

ページトップへ戻る

フッターのサイトマップ

フロートでのレイアウトと同じ要領で、フロートしてた要素.groupをインライン・ブロックに変えるだけ(もちろん妙な隙間を埋める術も施しつつ)で、なんともはやできちゃいました…!
インライン・ブロックで2段組みレイアウト、完成ー!

@media print, (min-width: 768px) {
	.sitemap-list {
		margin-left: -16px;
		letter-spacing: -.5em;
	}
	.sitemap-list .group {
		display: inline-block;
		width: 20%;
		padding-left: 16px;
		letter-spacing: 0;
		vertical-align: top;
	}
	⋮

Comment & Pingback

コメントを残す

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