HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

9章. 3カラムレイアウトのレスポンシブ化

      2017/03/02   hatano

3カラムからの変更

3カラムのレスポンシブは、前章の「2カラムレイアウトのレスポンシブ化」floatを使用したパターンでは難しい場合があります。
PCサイトで中央にメインカラム、両端にナビやバナーなどのサブカラムがある場合、スマホでは、メインカラム → サブカラム → サブカラムといった順に並べたいことが多いと思います。

このような場合は、PCサイトで、position: absolute; を使うと自由にレイアウトを作ることができます。
ポイントは、メインカラムまたは一番高さがあるカラムには、positionを設定しないことです。
position: absolute; は、親要素からは認識できない要素となり、親要素が高さを確保することができません。
結果、footerなどの下のブロックが重なってしまいます。

footerが重なってしまった3カラムのレイアウト

下記のサンプルは、左にナビ、右にバナーエリアを設置した場合です。
メインカラムには、サブカラムより高くなるようにheightを指定していますが、通常はheight指定をしないようにしましょう。
もし、メインカラムがサブカラムより高さが足りない場合は、メインカラムにmargin-bottompadding-bottomで調整するほうが良いでしょう。
今回も「5章. レスポンシブサイトの設計方法」で紹介した3つのパターンのCSSで解説します。

3カラムのレスポンシブ

下記は、共通のHTMLです。


<div class="wrap">
	<div class="main">メインカラム</div>
	<ul class="side-menu">
		<li><a href="#">メニュー</a></li>
		<li><a href="#">メニュー</a></li>
		<li><a href="#">メニュー</a></li>
		<li><a href="#">メニュー</a></li>
		<li><a href="#">メニュー</a></li>
	</ul>
	<aside class="banner-area">
		<div><a href="#">バナー</a></div>
		<div><a href="#">バナー</a></div>
		<div><a href="#">バナー</a></div>
	</aside>
</div>
<footer><p><small>&copy;WEB MANABU,2017All Rights Reserved.</small></p></footer>

pc → スマホ(pcを継承)の場合

下記は、PCサイトからCSSを指定。スマホサイトはメディアクエリを使いPCサイトのCSSを継承して指定しています。
pc側で、設定したpositionをスマホ側で position: static; で解除しています。


/* pc 768px以上 */
.wrap{
	/* サイドメニューとバナーエリアの基点に設定 */
	position: relative;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}

/* メインカラム */
.main{
	width: 540px;
	/* サンプル用に高さを指定 */
	height: 300px;
	margin-left: 230px;
	background-color: #ccc;
}

/* サイドメニュー */
.side-menu{
	/* 左端に設置 */
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	border-top: 1px solid #333;
}
.side-menu li a{
	display: block;
	height: 44px;
	line-height: 44px;
	border-bottom: 1px solid #333;
	text-decoration: none;
	color: #333;
}

/* バナーエリア */
.banner-area{
	/* 右端に設置 */
	position: absolute;
	top: 0;
	right: 0;
	width: 200px;
}
.banner-area div{
	margin-bottom: 20px;
}
.banner-area div a{
	display: block;
	height: 70px;
	line-height: 70px;
	background-color: #333;
	text-decoration: none;
	text-align: center;
	color: #fff;
}

/* footer */
footer{
	height: 40px;
	line-height: 40px;
	background-color: #333;
	text-align: center;
	color: #fff;
}

/* スマホ 767px以下 */
@media only screen and (max-width: 767px) {
	.wrap{
		/* position: relative;を解除 */
		position: static;
		width: 90%;
	}

	/* メインカラム */
	.main{
		width: 100%;
		/* サンプル用に高さを指定 */
		height: 200px;
		margin-left: 0;
		margin-bottom: 30px;
	}

	/* サイドメニュー */
	.side-menu{
		/* position: absolute;を解除 */
		position: static;
		width: 100%;
		margin-bottom: 30px;
	}

	/* バナーエリア */
	.banner-area{
		/* position: absolute;を解除 */
		position: static;
		width: 100%;
	}
}

スマホ → pc(スマホを継承)の場合

下記は、スマホサイトからCSSを指定。PCサイトはメディアクエリを使いスマホサイトのCSSを継承して指定しています。
pc側でサイドメニューとバナーエリアに position: absolute; を指定し、両端に配置しました。 wrapで、position: relative; を指定し、2つのカラムの位置の基点にしています。


/* スマホ 767px以下 */
.wrap{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}

/* メインカラム */
.main{
	/* サンプル用に高さを指定 */
	height: 200px;
	background-color: #ccc;
	margin-bottom: 30px;
}

/* サイドメニュー */
.side-menu{
	margin-bottom: 30px;
	border-top: 1px solid #333;
}
.side-menu li a{
	display: block;
	height: 44px;
	line-height: 44px;
	border-bottom: 1px solid #333;
	text-decoration: none;
	color: #333;
}

/* バナーエリア */
.banner-area div{
	margin-bottom: 20px;
}
.banner-area div a{
	display: block;
	height: 70px;
	line-height: 70px;
	background-color: #333;
	text-decoration: none;
	text-align: center;
	color: #fff;
}

/* footer */
footer{
	height: 40px;
	line-height: 40px;
	background-color: #333;
	text-align: center;
	color: #fff;
}

/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
	.wrap{
		/* サイドメニューとバナーエリアの基点に設定 */
		position: relative;
		width: 1000px;
	}

	/* メインカラム */
	.main{
		width: 540px;
		/* サンプル用に高さを指定 */
		height: 300px;
		margin-bottom: 0;
		margin-left: 230px;
	}

	/* サイドメニュー */
	.side-menu{
		/* 左端に設置 */
		position: absolute;
		top: 0;
		left: 0;
		width: 200px;
		margin-bottom: 0;
	}

	/* バナーエリア */
	.banner-area{
		/* 右端に設置 */
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
	}
}

pc、スマホを別々に指定

下記は、pcサイトとスマホサイトのCSSを別々にメディアクエリで指定した場合です。


/* スマホ 767px以下 */
@media only screen and (max-width: 767px){
	.wrap{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
	
	/* メインカラム */
	.main{
		/* サンプル用に高さを指定 */
		height: 200px;
		background-color: #ccc;
		margin-bottom: 30px;
	}
	
	/* サイドメニュー */
	.side-menu{
		margin-bottom: 30px;
		border-top: 1px solid #333;
	}
	.side-menu li a{
		display: block;
		height: 44px;
		line-height: 44px;
		border-bottom: 1px solid #333;
		text-decoration: none;
		color: #333;
	}
	
	/* バナーエリア */
	.banner-area div{
		margin-bottom: 20px;
	}
	.banner-area div a{
		display: block;
		height: 70px;
		line-height: 70px;
		background-color: #333;
		text-decoration: none;
		text-align: center;
		color: #fff;
	}
	
	/* footer */
	footer{
		height: 40px;
		line-height: 40px;
		background-color: #333;
		text-align: center;
		color: #fff;
	}
}

/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
	.wrap{
		/* サイドメニューとバナーエリアの基点に設定 */
		position: relative;
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
	
	/* メインカラム */
	.main{
		width: 540px;
		/* サンプル用に高さを指定 */
		height: 300px;
		margin-left: 230px;
		background-color: #ccc;
	}
	
	/* サイドメニュー */
	.side-menu{
		/* 左端に設置 */
		position: absolute;
		top: 0;
		left: 0;
		width: 200px;
		border-top: 1px solid #333;
	}
	.side-menu li a{
		display: block;
		height: 44px;
		line-height: 44px;
		border-bottom: 1px solid #333;
		text-decoration: none;
		color: #333;
	}
	
	/* バナーエリア */
	.banner-area{
		/* 右端に設置 */
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
	}
	.banner-area div{
		margin-bottom: 20px;
	}
	.banner-area div a{
		display: block;
		height: 70px;
		line-height: 70px;
		background-color: #333;
		text-decoration: none;
		text-align: center;
		color: #fff;
	}
	
	/* footer */
	footer{
		height: 40px;
		line-height: 40px;
		background-color: #333;
		text-align: center;
		color: #fff;
	}
}