3カラムレイアウト - レスポンシブ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>3カラムレイアウト</title>
</head>
<body>
<div id="flexbox">

	<div id="flex_left">

		<header></header>

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

	<div id="flex_center">

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

	<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: 33vh;
	background-color: #ccffff;
}
#flex_center{
	width: 100%;
	height: 33vh;
	background-color: #ffd5ec;
}
#flex_right{
	width: 100%;
	height: 33vh;
	background-color: #ddbffa;
}
/*  PC向けのスタイル:1024px以上 */
@media only screen and (min-width: 1024px){
#flexbox{
	display: flex;
}
#flex_left{
	width: 33%;
	height: 100vh;
}
#flex_center{
	width: 34%;
	height: 100vh;
}
#flex_right{
	width: 33%;
	height: 100vh;
}
}
広告
サンプルページ
(c) 2020 cuorefilms.com