body{
	margin:0;
	text-align:center;
	color:white;

//position: static;   初期値(デフォルト)　要素は通常で配置
}

header{
	position:fixed;
	top:0;
	width:100%;
	height:30px;
	background-color:rgba(60,60,60,0.7);
	z-index:99;
	//レイヤーは読み込まれた順に下に積まれるので最下層になったheaderを
	z-indexで最上部に移動　rgbaで70%透明にして下になった要素を見せる//
//position:fixed;   ウィンドウを基準とした配置
スクロールしても位置は固定されたまま
配置されるはずだった場所のスペースは確保されない
top right bottom left の値はウィンドウの各辺からの位置//
}

.container{
	position:relative;
	color:black;
	border:dotted red 3px;
	//クラスcontainerの範囲を赤いドットで示す
//position:relative;   通常の配置位置を基準とした配置
配置されるはずだった場所のスペースは確保されたまま配置変更
top right bottom left の値は通常配置されるはずだった場所からの移動量//
}

main{
	position:relative;
	top:27px;
	width:100%;
	height:200px;
	padding-top:60px;
	background-color:#f3acac;

//前段の要素headerが　position:fixed; で配置スペースが無視されるので
次の要素mainはheaderのスペース30px引くdot3px＝27px分下に避けて配置する//
}
.content1{
	position:relative;
	padding-top:60px;
	height:200px;
	background-color:#eceabc;
}
.content2{
	position:relative;
	padding-top:60px;
	height:200px;
	background-color:#ebd2ec;
}

footer{
	width:100%;
	height:30px;
	background-color:rgba(60,60,60,0.7);
	position:fixed;
	bottom:0;
}