Web Page Base

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>
<h1></h1>
<header><!--=====Header=====--></header>

<main>
	  <!--=====Contents=====-->
</main>

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

</body>
</html>


html {
	height: 100%;
	}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: #ede5c9;
	}
header,
main,
footer {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
	}
header {
	height: 10rem;
	background: #cff;
	}
main {
	background: #ffb6c1;
	}
footer {
	position: sticky;
	top: 100vh;
	height: 5rem;
	margin: 0;
	padding: 1rem;
	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;
	}
h2 {
	max-width: 1024px;	
	margin: 0 auto;
}

TOP