2カラムレイアウトレスポンシブWebデザイン

PC

モバイル

HTML&CSS

HTMLindex.htmldownload

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link rel="stylesheet" href="style.css" type="text/css" />
	<title>2カラムレイアウト</title>
</head>
<body>
<div id="flexbox">

	<div id="flex_left">

		<header></header>

	</div><!-- flex_left ここまで -->

	<div id="flex_right">

		<footer></footer>

	</div><!-- flex_right ここまで -->
</div><!-- flex_box ここまで -->
</body>
</html>

CSSstyle.cssdownload

@charset "utf-8";

body{
	width: 100%;
	margin: 0;
	padding: 0;
}
#flexbox{
}
#flex_left{
	width: 100%;
	height: 50vh;
	background-color: #ccffff;
}
#flex_right{
	width: 100%;
	height: 50vh;
	background-color: #ffd5ec;
}
/*  PC向けのスタイル：1024px以上 */
@media only screen and (min-width: 1024px){
#flexbox{
	display: flex;
}
#flex_left{
	width: 50%;
	height: 100vh;
}
#flex_right{
	width: 50%;
	height: 100vh;
}
}
サンプルページ
© 2025 wayday