1カラムレイアウト ヘッダー＆フッターレスポンシブ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>1カラムレイアウト ヘッダー＆フッター</title>
</head>
<body>
<header></header>

<div id="container">

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

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

CSSstyle.cssdownload

@charset "utf-8";

body{
	width: 100%;
	margin: 0;
	padding: 0;
}
header{
	width: 100%;
	height: 15vh;
	background-color: #c2fcca;
}
#container{
	width: 100%;
	height: 70vh;
	background-color: #ccffff;
}
footer{
	width: 100%;
	height: 15vh;
	background-color: #ffcc66;
}
サンプルページ
© 2025 wayday