段組みのCSS。
フロートで2段組みレイアウト

floatプロパティは本来、特定の要素を左右に寄せて配置するためのプロパティですけれど、ここではページレイアウトのために使用します。ページ内の段組みするところと、よこ並びするところを、floatプロパティを使ってレイアウトしてゆきます:)

ヘッダーは2段組み、ナビゲーションはよこ並び

サイトタイトルはleftを指定して左へ寄せて、ナビゲーションはrightで右へ寄せます。ナビゲーションボタンはすべてleftでよこ並びにして、ボタンとボタンの境をわかりやすいように、li要素の左側にボーダーを引きます。
2段組みになるのは768px以上の時に決めたので、最初はなからメディアクエリで限定しておけば良いですね。

@media print, (min-width: 768px) {
	.site-title {
		float: left;
	}
	.nav-list {
		float: right;
	}
	.nav-list li {
		float: left;
		border-left: 1px solid #eee;
	}
}

clearfixは、前回の記事に引き続き、.cfというクラスに適用することにします。

もうちょっとヘッダーの高さを広げて、サイトタイトルとナビゲーションの高さも揃えたいな…。
サイトタイトルもナビゲーションも改行しそうにない、こんな状況なら、line-heightプロパティで調整するのが手っ取り早くてよいです。nav要素にline-height: 80pxと指定すれば、サイトタイトルとナビゲーションもろとも、行の高さが80pxになって、テキストが中央に揃います。;)
となると.nav-list aに指定してるパディングが余計なので、上下のパディングだけ0にしちゃいます。

@media print, (min-width: 768px) {
	header nav {
		line-height: 80px;
	}
	⋮
	.nav-list a {
		padding: 0 2em;
	}
}
line-heightをpx指定で、文字サイズに関わらず行高が揃う。

767px以下になるとナビゲーションボタンも縦に並ぶけれど、ボタンはまだ、よこ並びのままでいいかなと思います。もうひとつメディアクエリを用意して、ナビゲーションボタンのよこ並びだけ、415px以上の時に適用するように移動することにします。これでナビゲーションボタンがたて並びになるのは415px未満(414px以下)の時ってことになります。

@media print, (min-width: 415px) {
	.nav-list li {
		float: left;
		border-left: 1px solid #eee;
	}
}

むむ、767px以下の時、ナビゲーションが左に片寄ってます…。フロートすると、要素の横幅は、その内容に準拠した大きさになるんでした…。さらにメディアクエリを用意して、767px以下の時には5つのボタンが横幅いっぱい均等に並ぶように、li要素の横幅を20%に指定します。この時、一番左側のボーダーはいらないので、ひとつめのli要素はborder-left: 0と指定しておきます。

@media screen and (max-width: 767px) {
	.nav-list li {
		width: 20%;
	}
	.nav-list li:first-child {
		border-left: 0;
	}
}

画面幅を狭くしてゆくと、だんだんテキストが見切れちゃいます…。テキストを中央配置してるのだから、左右のパディングはなくてもいいくらい。なので0にしちゃいます。
414px以下の時にも、li要素に横幅20%が適用されちゃってるので、さらにさらにメディアクエリを用意して、414px以下の時には、li要素の横幅をautoにしておきます。
これにてヘッダー落着!

@media screen and (max-width: 767px) {
	.nav-list li {
		width: 20%;
	}
	.nav-list li:first-child {
		border-left: 0;
	}
	.nav-list a {
		padding: 1em 0;
	}
}
@media screen and (max-width: 414px) {
	.nav-list li {
		width: auto;
	}
}

ページトップへ戻る

メインコンテンツとサイドメニューの2段組み

メインコンテンツを左にフロート、サイドメニューを右にフロートします。フロートするだけでは、要素の内容に合わせて横幅が広がったまま、よこ並びにならないので、横幅を指定しないといけません。
ここでは、メインコンテンツの横幅をcalc(75% - 20px)、サイドメニューの横幅をcalc(25% - 20px)と指定することにしました。これで、メインコンテンツとサイドメニューが「3対1」の割合で、間に40pxの隙間を持った2段組みになるって寸法です;D例によって、メディアクエリで768px以上の時に限定しておきます。

@media print, (min-width: 768px) {
	main {
		float: left;
		width: calc(75% - 20px);
	}
	aside {
		float: right;
		width: calc(25% - 20px);
	}
}
メインコンテンツと、サイドメニューの横幅

続いて、それぞれのセクションを段組みしてゆきます!

メインコンテンツのバナーを2段組み

ここも前述の2段組みと同じですねー。最初のli要素を左へ、ふたつめのli要素を右へフロート。間に16pxの隙間を空けるとして、li要素の横幅を50% - 8pxと指定すればいっちょあがり。
ここは画面幅が狭い時でも、ずっと2段組みでいいかなと思うので、メディアクエリには入れないでおきます。

main .bnr-list li {
	float: left;
	width: calc(50% - 8px);
}
main .bnr-list li:nth-child(2n) {
	float: right;
}

商品一覧と記事一覧をよこ並び

よこ並びにするところは、まとめてレイアウトしちゃいます!
商品一覧も、記事一覧も、li要素はすべてfloat: leftで並べて、隙間はパディングで空けるようにします。商品一覧は横幅を33.333333%で、左側に32pxのパディング。記事一覧は横幅を50%で、左側に16pxのパディングを指定します。このままだとパディング分、一覧全体が右に片寄ってしまうので、ul要素の左側に、パディングと同じ分のネガティブマージンを指定することで、一覧全体を元の位置へ戻しています。
※行の先頭の要素には、clearプロパティを指定するのも忘れずに(詳しくは「よこ並びのCSS。」という記事を参照のこと)。

ネガティブマージン分、ul要素が右側に伸びる
商品一覧
.menu-list {
	margin-left: -24px;
}
.menu-list li {
	float: left;
	width: 33.333333%;
	padding-left: 24px;
}
.menu-list li:nth-child(3n+1) {
	clear: left;
}

box-sizing: border-boxを指定してあるので、widthプロパティの値は、パディングも含めた値として適用される。

商品一覧は、画面幅が狭い時に3列のままだと商品が小さくなりすぎるので、414px以下の時を境に2列になるようにしたいと思います。

@media screen and (max-width: 414px) {
	.menu-list li {
		width: 50%;
	}
	.menu-list li:nth-child(2n+1) {
		clear: left;
	}
}
画面幅が狭い時は、サイドメニューの最後のバナーもよこ並び。

逆に、記事一覧は、1段組みになった時に2列のままだと大きく感じるので、767px以下の時には4列にしちゃいます。ついでに、サイドメニューの最後のバナーも、767px以下の時にはよこ並びになるようにします。

@media screen and (max-width: 767px) {
	.article-list li {
		width: 25%;
	}
	.article-list li:nth-child(4n+1) {
		clear: left;
	}
}

あらら、414px以下の時に商品一覧がぐちゃっちゃいますね…。414px以下の時にまで:nth-child(3n+1)に指定したクリアが適用されてしまってるので、この指定は415px以上の時用のメディアクエリを新設して、移動しておきます。

@media print, (min-width: 415px) {
	.menu-list li:nth-child(3n+1) {
		clear: left;
	}
}
改行される要素のところで、フロートをクリア。

記事一覧のところも、767px以下の時にまで:nth-child(2n+1)のクリアが適用されてしまっているので、この指定は768px以上の時だけにしないといけません。
ただ、414px以下の時に4列のままだと小さすぎちゃうので、414px以下になったら2列に戻したい…。つまり、4つ並べるのは767px以下〜415px以上の時という事なので、メディアクエリでもそのように限定します!なので、クリアするのはその逆の768px以上、もしくは414px以下の時ということになりますねー。そしてついでの、サイドメニューの最後のバナーも、414px以下の時には2列にすることにします。

767px以下〜415px以上の時というメディアクエリ
@media print, (min-width: 768px), (max-width: 414px) {
	.article-list li:nth-child(2n+1) {
		clear: left;
	}
}
768px以上、もしくは414px以下の時というメディアクエリ
@media screen and (max-width: 767px) and (min-width: 415px) {
	.article-list li {
		width: 25%;
	}
	.article-list li:nth-child(4n+1) {
		clear: left;
	}
}

あと、画像サイズに対して、隙間が広く感じるので、画面幅が狭い時には列の隙間も狭くしたいです。ここでは767px以下の時、商品一覧のところは16px、記事一覧とバナー一覧では8pxになるようにします。414px以下の時には、商品一覧も8pxにします。
そんなこんなで、バナー一覧、商品一覧、記事一覧が整いましたー:D

@media screen and (max-width: 414px) {
	.article-list {
		margin-left: -8px;
	}
	.article-list li {
		padding-left: 8px;
	}
}

ページトップへ戻る

文章を画像に回り込ませる

商品一覧の下の、文章中に画像があるところは、floatプロパティの専売特許ですね!
画像を左右に寄せたらば、右に寄せた画像には左側にマージン、左に寄せた画像には右側にマージンを、ここでは24px空けました。

.right-img {
	float: right;
	margin-left: 24px;
}
.left-img {
	float: left;
	margin-right: 24px;
}

画面幅が狭くなると回り込んでるテキストが窮屈になってくるので、414px以下の時には画像の横幅を50%となるようにして、画像とテキストの隙間もちょっと狭く、16pxにします。
あと、画像の上辺が文章に比べて、ちょっと上気味なのが気になるので、ちょちょっと調整して、できあがり。

@media screen and (max-width: 414px) {
	.right-img, .left-img {
		width: 50%;
		margin: .4em 0
	}
	.right-img {
		margin-left: 16px;
	}
	.left-img {
		margin-right: 16px;
	}
}

お知らせ一覧を2段組み

ここは、前述の画像を回り込ませるのと同じ方法で、内容(dd要素)に日付(dt要素)を回り込ませるってことをします。なので、floatプロパティを指定するのは日付に対してだけ。そしてdt要素の横幅を、日付が入り切るくらいちょっと余裕を持って指定します。ここでは9.6文字分9.6emとしました。

.info-list dt {
	float: left;
	width: 9.6em;
}
.info-list dt,
.info-list dd {
	padding: .8em 0;
}
dd要素自体は、dt要素の下に入り込んだまま。

これだけでも大丈夫そうですけれど、画面幅を狭めていくと、内容の3行めが、日付の下に回り込んじゃうので、内容の左側に日付の幅と同じ分だけのパディングを指定。そしたら、dt要素の横幅は指定しなくてもよくなりますね…¦(、とっちゃいます。

.info-list dt {
	float: left;
}
.info-list dt,
.info-list dd {
	padding: .8em 0;
}
.info-list dd {
	padding-left: 9.6em;
}

あまり画面幅が狭いと、内容が改行しすぎなので、日付と内容を横に並べるのは415px以上の時だけにすることにします。
すると、414px以下の時には、日付と内容が縦に並ぶことになるので、dt要素には上だけ、dd要素は下だけにパディングを指定して、できあがり!

@media print, (min-width: 415px) {
	⋮
}
@media screen and (max-width: 414px) {
	.info-list dt {
		padding-top: .8em;
	}
	.info-list dd {
		padding-bottom: .8em;
	}
}

ページトップへ戻る

フッターのサイトマップを多段組み

サイトマップを5列並ぶようにレイアウトします。
まずは、.sitemap-list .groupという要素をよこ並びにして、横幅を20%に指定します。例によって768px以上限定です。

@media print, (min-width: 768px) {
	.sitemap-list .group {
		float: left;
		width: 20%;
	}
}

マークアップ上「Lopan Cafeについて」、「メニュー」、「店舗検索」、「お知らせ」、「企業情報」と「その他(プライバシーポリシーとか)」の6つにグループ分けしてるので、よこ並びにするだけじゃデザイン通りにはならないのですね…。「お知らせ」を「店舗検索」の下にレイアウトしたいのだけれど…。

そこで、「お知らせ」のグループにだけ、左側にグループひとつ分のネガティブマージン-20%を指定します。

@media print, (min-width: 768px) {
	⋮
	.sitemap-list .group:nth-child(4) {
		margin-left: -20%;
	}
}

これでデザイン通り5列になったけれど、「お知らせ」と「店舗検索」が重なっちゃったので、「お知らせ」の上にパディングを指定して、いいくらいの位置まで下げます。となりの「会社案内」と揃うといいかなと思います。となると、「店舗検索」の高さ分パディングを指定すれば、「会社案内」と同じ高さまで下がるはず。
「店舗検索」の高さは、「行の高さ + 上下のパディングとマージンの値」で算出できそうです。行の高さは、「文字サイズ × line-heightプロパティの値」なので、つまり1.3rem * 1.4 + .9emということ!これをそのまま上パディングとして指定します。

@media print, (min-width: 768px) {
	⋮
	.sitemap-list .group:nth-child(4) {
		margin-left: -20%;
		padding-top: calc(1.3rem * 1.4 + .9em);
	}
}
「店舗検索」の高さ

あと、リンクの矢印が隣のグループと引っ付いて見えるので、グループとグループの間に隙間を空けたいです。商品一覧とかと同じように、li要素の左側にパディングを指定して、ズレたul要素をネガティブマージンで元の位置に戻したら、できあがりー!

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

Comment & Pingback

コメントを残す

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