css11〜15ボックスモデル - Web関連あれこれ

画像のような表示になるよう指定しなさい
色・文字サイズは自由設定（バランスは考慮すること）
解答は、エンベッド
DTDは各自選択

【CSS11】マージン

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS11】ボックスモデル</title>
<style type="text/css">
<!--
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
}
p {
  color: #fff;
  background-color: #009eff;
  width: 350px;
  height:100px;
  margin: 50px;
}
-->
</style>
</head>
<body>
<p>BOX and margin<br />
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</div>
</html>

【CSS12】ボーダー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS12】ボックスモデル</title>
<style type="text/css">
<!--
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
}
p {
  color: #fff;
  background-color: #009eff;
  width: 350px;
  height:100px;
  margin-right: auto;
  margin-left: auto;
  border: solid 4px #FFCA00;
}
-->
</style>
</head>
<body>
<p>BOX and margin<br />
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</div>
</html>

【CSS13】マージン・パディング

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />

<title>【CSS13】ボックスモデル</title>
<style type="text/css">
<!--
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
  background-image: url(01.jpg);
  background-repeat: repeat-y;
  margin-left: 0;
}
h2 {
  color: #fff;
  background-color: #D147CE;
  width: 70px;
  margin-left: 0;
}
p {
  width: 400px;
  margin-left: 70px;
}

-->
</style>
</head>
<body>
<h2>BOX</h2>
<p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

【CSS14】パディング

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS14】パディング</title>
<style type="text/css">
<!--
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", s
  sans-serif;
}
h2 {
  background-color: #629665;
  width: 400px;
}
p {
  background-color: #95C998;
  width: 400px;
}
h2,p {
  color: #fff;
  margin: 0;
  padding: 15px;
}
-->
</style>
</head>
<body>
<h2>BOX and PADDING</h2>
<p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</body>
</html>

【CSS15】パディング

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS15】ボックスモデル</title>
<style type="text/css">
<!--
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック",
  sans-serif;
  background-color: #CCC;
}
p {
  color: #5d99a9;
  background-color: #fff;
  width: 400px;
  padding: 20px;
}
-->
</style>
</head>
<body>
<p>BOX and PADDING<br />
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</body>
</html>