7日目 | CSSボックスモデル

授業
margin、padding

余白に関する指定をする。
marginは相手との間合いを取るイメージ
paddingは自分が着膨れているイメージ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>今日の天気</title>
<style>
/* reset */
*{
  margin: 0;
  padding: 0;
}
body{
  margin: 30px;
  padding: 30px;
  background-color: #eee;
}
h1 {
  color: #fff;
  background-color: #00bec4;
  width:500px;
  margin: 0 0 20px 0;
  padding: 5px 1em 7px 1em;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<style>

h1{
  color: #12898f;
}
h3{
	color: #fff;
	font-size: 1.5em;
	width: 200px;
	padding: 3px 0;
	background-color: #036;
}
p{
	  color: #036;
}
</style>
</head>

<body>
<h1>style要素</h1>
<p></p>
<h3>style element</h3>
<p>HTML文書内にまとめて設定します。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Wine</title>
<style>
h1{
	color: #fff;
	
}
h2{
	color: #fff;
	background-color: #bc908f;
	padding: 2px 10px 2px 10px;
}
p{
	padding: 20px 1.1em 20px 1.1em;
	background-color: #f5f5db;
}
body{
	background-color: #91bc86;
	width: 400px;
}

</style>
</head>
<body>
<h1>About wine</h1>
<h2>Chianti Classico Riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p>
</body>
</html>
スタイルシートの中のコメントアウト
/*コメントアウトの内容を書く*/
htmlの中のコメントアウト
<!--コメントアウトの内容を書く-->