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

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

      2017/03/02   hatano

2カラムレイアウトからのレスポンシブ

PCサイトで、floatを使った2カラムレイアウトを1カラムに変更する場合は、スマホでのレイアウトの順番が重要です。
まず、スマホでのレイアウトの順番を決めます。
次にPCサイトでfloatを使い、2カラムレイアウトにします。
PCサイトでの左右のカラムの入れ替えは、floatを使うことでコントロールが可能です。
今回は、左右どちらかがメニューになっていても対応できる方法を紹介します。

サンプルは、HTMLは共通とし「5章. レスポンシブサイトの設計方法」で紹介したパターンをそれぞれ紹介していきます。
レイアウトを分かりやすくするために、mainレイアウトにheightを指定しています。

右メニューのレイアウトの場合

pcサイトは、mainに float: left; side-menuに float: right; を指定し、スマホサイトはfloat指定をせず、カラムダウンさせています。

右メニューの2カラムレイアウト

下記は、共通のHTMLです。


<div class="wrap">
	<div class="main">レイアウト1</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>
</div>

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

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


/* pc 768px以上 */
.wrap{
	overflow: hidden;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.main{
	float: left;
	width: 630px;
	height: 300px;
	background-color: #ddd;
}
.side-menu{
	float: right;
	width: 300px;
	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;
}

/* スマホ 767px以下 */
@media only screen and (max-width: 767px) {
	.wrap{
		width: 100%;
	}
	.main{
		float: none;
		width: 90%;
		height: 200px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
	.side-menu{
		/* floatを解除 */
		float: none;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}

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

下記は、スマホサイトからCSSを指定。PCサイトはメディアクエリを使いスマホサイトのCSSを継承しています。
pc側でfloatの設定とカラムのwidthの上書き指定をしています。


/* スマホ 767px以下 */
.main{
	width: 90%;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	background-color: #ddd;
}
.side-menu{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	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;
}

/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
	.wrap{
		overflow: hidden;
		width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
	.main{
		float: left;
		width: 630px;
		height: 300px;
	}
	.side-menu{
		float: right;
		width: 300px;
	}
}

pc、スマホを別々に指定

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


/* スマホ 767px以下 */
@media only screen and (max-width: 767px) {
	.main{
		width: 90%;
		height: 200px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
		background-color: #ddd;
	}
	.side-menu{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		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;
	}
}

/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
	.wrap{
		overflow: hidden;
		width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
	.main{
		float: left;
		width: 630px;
		height: 300px;
		background-color: #ddd;
	}
	.side-menu{
		float: right;
		width: 300px;
		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;
	}
}

左メニューのレイアウトの場合

右メニューとの違いは、mainとside-menuのfloatの指定です。
mainにfloat: right; side-manuにfloat: left;にすることで、pcサイトでカラムの左右を入れ替えられます。
サンプルでは、pcサイト, スマホサイトを別々に指定した場合の例で紹介します。

左メニューの2カラムレイアウト


/* スマホ 767px以下 */
@media only screen and (max-width: 767px) {
	.main{
		width: 90%;
		height: 200px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
		background-color: #ddd;
	}
	.side-menu{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		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;
	}
}

/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
	.wrap{
		overflow: hidden;
		width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
	.main{
		/* float: right;に変更 */
		float: right;
		width: 630px;
		height: 300px;
		background-color: #ddd;
	}
	.side-menu{
		/* float: left;に変更 */
		float: left;
		width: 300px;
		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;
	}
}