mrgarita/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta name="robots" content="INDEX,FOLLOW">
	<meta name="description" content="HTML5に準じた基本的な3分割サイトです。ヘッダ部分、コンテンツ部分、フッタ部分に分けてあります。レスポンシブにも対応しています。ご自由にコピーして使ってください。">
	<link rel="stylesheet" href="style.css">
	<title>3分割レイアウト</title>
	<link rel="apple-touch-icon" href="img/icon.png" >	<!--ホームアイコンの設定-->
	<link rel="SHORTCUT ICON" href="img/icon.ico">	<!-- PC用ホームアイコンの設定 -->

</head>
<body>
	<header>
		<h1>3分割レイアウト</h1>
	</header>

	<div id="contents">
		<p><img src="img/legocamera.jpg" alt="レゴカメラの画像"></p>
		<p>ヘッダ部分、コンテンツ部分、フッタ部分からなるページのこと。</p>
	</div>

	<footer>
		<p><small>&copy; 2018 <a target="_blank" href="https://dianxnao.com/">dianxnao.com</a></small></p>
	</footer>
</body>
</html>

## style.css
/* style.css */
@charset "utf-8";

*{
	margin: 0;
	padding: 0;
}
body{
	font-family: Helvetica, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック', meiryo, sans-serif;	/* フォント */
	background-color: #fff;
	color: #546e7a;
}
/* ヘッダ */
header{
	background-color: #546e7a;
	color: #ffffff;
}
header h1{
	font-size: 24pt;
	padding: 20px 3em;
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
}
/* コンテンツ */
div#contents{
	font-size: 16pt;
	background-color: #ffffff;
	width: 800px;
	margin: 1em auto;
	padding: 0;
}
div#contents p{
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
}
/* フッタ */
footer{
	text-align: right;
	padding: 20px 40px;
	font-size: 14pt;
	background-color: #ffffff;
	border-top: solid 1px #dddddd;
}
/* 汎用タグ */
small{
	font-size: 14pt;
}
a{
	color: #546e7a;
	text-decoration: none;
}
a:hover{
	color: orange;
}

/* 画像サイズが画面サイズに合わせて変化します */
img{
	width: 100%;
	height: auto;	/* 縦横比を変えないため */
}

/* メディアクエリ設定 */
@media screen and (min-width:376px) and (max-width:960px) {	/* 横幅 376～960ピクセル */
/* タブレット用のcssを記述 */
	header h1{
		padding: 20px;
		text-align: center;
		font-size: 16pt;
	}
	div#contents{
		width: auto;
		margin: 10px 10px;
		padding: 1em;
		font-size: 14pt;
	}
	footer{
		padding: 20px;
		text-align: center;
	}
}

@media screen and (max-width:376px) {	/* 横幅 375ピクセル以下 */
/* スマホ用のcssを記述 */
	header h1{
		padding: 20px;
		text-align: center;
		font-size: 14pt;
	}
	div#contents{
		width: auto;
		margin: 0 0;
		padding: 0;
		font-size: 12pt;
	}
	footer{
		padding: 20px;
		text-align: center;
	}
	small{
		font-size: 11pt;
	}
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta name="robots" content="INDEX,FOLLOW">
	<meta name="description" content="HTML5に準じた基本的な3分割サイトです。ヘッダ部分、コンテンツ部分、フッタ部分に分けてあります。レスポンシブにも対応しています。ご自由にコピーして使ってください。">
	<link rel="stylesheet" href="style.css">
	<title>3分割レイアウト</title>
	<link rel="apple-touch-icon" href="img/icon.png" > <!--ホームアイコンの設定-->
	<link rel="SHORTCUT ICON" href="img/icon.ico"> <!-- PC用ホームアイコンの設定 -->

	</head>
	<body>
	<header>
	<h1>3分割レイアウト</h1>
	</header>

	<div id="contents">
	<p><img src="img/legocamera.jpg" alt="レゴカメラの画像"></p>
	<p>ヘッダ部分、コンテンツ部分、フッタ部分からなるページのこと。</p>
	</div>

	<footer>
	<p><small>© 2018 <a target="_blank" href="https://dianxnao.com/">dianxnao.com</a></small></p>
	</footer>
	</body>
	</html>
	/* style.css */
	@charset "utf-8";

	*{
	margin: 0;
	padding: 0;
	}
	body{
	font-family: Helvetica, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック', meiryo, sans-serif; /* フォント */
	background-color: #fff;
	color: #546e7a;
	}
	/* ヘッダ */
	header{
	background-color: #546e7a;
	color: #ffffff;
	}
	header h1{
	font-size: 24pt;
	padding: 20px 3em;
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
	}
	/* コンテンツ */
	div#contents{
	font-size: 16pt;
	background-color: #ffffff;
	width: 800px;
	margin: 1em auto;
	padding: 0;
	}
	div#contents p{
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
	}
	/* フッタ */
	footer{
	text-align: right;
	padding: 20px 40px;
	font-size: 14pt;
	background-color: #ffffff;
	border-top: solid 1px #dddddd;
	}
	/* 汎用タグ */
	small{
	font-size: 14pt;
	}
	a{
	color: #546e7a;
	text-decoration: none;
	}
	a:hover{
	color: orange;
	}

	/* 画像サイズが画面サイズに合わせて変化します */
	img{
	width: 100%;
	height: auto; /* 縦横比を変えないため */
	}

	/* メディアクエリ設定 */
	@media screen and (min-width:376px) and (max-width:960px) { /* 横幅 376～960ピクセル */
	/* タブレット用のcssを記述 */
	header h1{
	padding: 20px;
	text-align: center;
	font-size: 16pt;
	}
	div#contents{
	width: auto;
	margin: 10px 10px;
	padding: 1em;
	font-size: 14pt;
	}
	footer{
	padding: 20px;
	text-align: center;
	}
	}

	@media screen and (max-width:376px) { /* 横幅 375ピクセル以下 */
	/* スマホ用のcssを記述 */
	header h1{
	padding: 20px;
	text-align: center;
	font-size: 14pt;
	}
	div#contents{
	width: auto;
	margin: 0 0;
	padding: 0;
	font-size: 12pt;
	}
	footer{
	padding: 20px;
	text-align: center;
	}
	small{
	font-size: 11pt;
	}
	}