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>
<header></header>

<div id="flexbox">

	<div id="flex_left">

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

	<div id="flex_center">

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

	<div id="flex_right">

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

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

<footer></footer>
</body>
</html>

CSSstyle.cssdownload

@charset "utf-8";

body{
	width: 100%;
	margin: 0;
	padding: 0;
}
header{
	width: 100%;
	height: 14vh;
	background-color: #c2fcca;
}
#flexbox{
}
#flex_left{
	width: 100%;
	height: 24vh;
	background-color: #ccffff;
}
#flex_center{
	width: 100%;
	height: 24vh;
	background-color: #ffd5ec;
}
#flex_right{
	width: 100%;
	height: 24vh;
	background-color: #ddbffa;
}
footer{
	width: 100%;
	height: 14vh;
	background-color: #ffcc66;
}
/*  PC向けのスタイル:1024px以上 */
@media only screen and (min-width: 1024px){
header{
	height: 16vh;
}
#flexbox{
	display: flex;
}
#flex_left{
	width: 33%;
	height: 68vh;
}
#flex_center{
	width: 34%;
	height: 68vh;
}
#flex_right{
	width: 33%;
	height: 68vh;
}
footer{
	height: 16vh;
}
}
広告
サンプルページ
(c) 2020 cuorefilms.com