Web Page Base 2カラム

Page base

DEMO


<!DOCTYPE html>
<html dir="ltr" lang="ja-JP">
<head>
<!-- Google tag (gtag.js) -->

	<meta charset="UTF-8">
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="ページの概要">
	<meta name="msapplication-TileColor" content="#ee7836"><!--Windowsタイル画像の背景色-->
	<meta name="theme-color" content="#ffffff"><!--Windowsピン留め背景色-->

	<!-- Favicon -->
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico">

	<!-- CDN -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

	<!-- CSS -->
	<link rel="stylesheet" href="/path/to/destyle_v3-0-2.css">
	<link rel="stylesheet" href="/path/to/style.css">

</head>

<body>

<header>
	  <!--=====Header=====-->
</header>

<div class="container">
	<main>

	  <!--=====Main Contents=====-->

	</main>

	<aside>
	  <!--=====Side bar Contents=====-->
	</aside>
</div>

<footer>
	  <!--=====Footer=====-->
</footer>

</body>
</html>


body {
	display: flex;
	flex-flow: column;
	min-height: 100vh;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow-x: hidden;
	background: #ede5c9;
	}
header {
	height: 10rem;
	background: #cff;
	}
.container {
	display: flex;
	flex: 1 1 auto;
	width: 90%;
	max-width: 1920px;
	margin: 0 auto;
	background: red;
	}
@media only screen and (max-width: 767px) {
	.container {
		display: block;
		}
	}

main {
	background: pink;
	min-width: 70%;
	}
aside {
	flex: 0 0 30%;
	background: #ccc;
	}
footer {
	height: 5rem;
	text-align: center;
	background: #cff;
	}

section {
	width: 100%;	
	max-width: 1920px;	
	background-color: #a5c285;
	margin: 0 auto 2rem;
	padding: 1rem;
	}
article {
	max-width: 1024px;	
	background-color: #fcd307;
	margin: 0 auto;
	padding: 1rem;
	}

TOP